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

Question

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

例如，我有以下布局：

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

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

谢谢！

Answer 1

我想

  

检查元素

谷歌浏览器中的

可以完成这项工作

如何使用Inspect Element

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

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

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

了解更多信息

<强> This is official site

如果您想要反转Chrome Chrome DevTools App