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

Question

我想知道是否有人做过这样的事情-我希望能够通过悬停/选择其代码等效元素来模仿chrome调试器（或任何其他浏览器调试器）突出显示渲染元素的功能。

例如，我有以下布局：

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

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

谢谢！

Answer 1

我想

检查元素

在Google Chrome浏览器中可以胜任

如何使用检查元素

右键单击任何网站，然后单击最后一个Inspect元素 （并等待一段时间）。

然后，开发人员工具将使用html弹出。 您可以将鼠标悬停在开发人员工具中的这些代码上，当您将鼠标悬停在网站元素上时，它将突出显示网站元素，而突出显示的颜色则用于指示填充，边距和元素本身。

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

了解更多信息

这是官方网站 。

如果您要撤消Chrome 浏览器Chrome DevTools应用