Javascript - 模拟 chrome-debugger 的元素突出显示

【问题标题】：Javascript - emulating chrome-debugger's element highlightingJavascript - 模拟 chrome-debugger 的元素突出显示
【发布时间】：2015-11-29 22:56:58
【问题描述】：

不知道有没有人做过这样的事—— 我希望能够模拟 chrome 调试器（或任何其他浏览器调试器）通过悬停/选择其代码等效元素来突出显示呈现的元素的能力。

例如，我有以下布局：

顶部是呈现示例 HTML 页面的 iframe 元素，底部是嵌入式浏览器代码编辑器 (ace)，它显示 iframe 内容的 HTML 代码。我希望能够通过将相应的 HTML 代码元素悬停在代码编辑器中来突出显示 iframe 中的 HTML 元素。

有没有人知道如何实现这样的目标？我想听听一些有趣的方向。

谢谢！

【问题讨论】：

标签： javascript jquery html ace-editor

【解决方案1】：

我以为

检查元素

在谷歌浏览器中可以完成这项工作

如何使用检查元素

右键单击任何网站，然后单击最后一个检查元素（并稍等片刻）。

然后开发者工具将弹出 html。您可以将鼠标悬停在开发人员工具中的这些代码上，它会在您悬停时突出显示网站元素，并且突出显示的颜色不同以指示填充、边距和元素本身。

除了这些功能之外，您还可以使用 chrome 开发人员工具做很多事情，例如编辑样式和 DOM、检查 CSS 类、检查大小

更多信息

This is official site.

如果你想反转 Chrome Chrome DevTools App

【讨论】：

我想模拟这个功能
@royv 因此，您应该使用逆向工程 Google Chrome 来进行模拟。我将在答案中添加有用的链接。