使用chrome devtools扩展名突出显示节点 [英] Highlight node with chrome devtools extension

问题描述

我想用元素检查器（在开发工具中）的相同方式突出显示我的chrome dev-tools扩展中的dom元素。有这个特殊的API吗？
Thanks $ / $>

I would like to highlight a dom element from my chrome dev-tools extension in the same way as Element inspector (in dev tools) does. Is there some special API for this? Thanks

推荐答案

每当您使用DevTools控制台在受检页面中评估一些代码时，DevTools会暴露一堆帮助程序调用称为命令行API 。该API包含inspect（）调用，其效果与用户从上下文菜单调用Inspect Element相同，即调出Elements面板并突出显示该节点。您可以使用chrome.devtools.inspectedWindow.eval（），通过DevTools extion使用inspect（）调用以及命令行API的其余部分对代码进行评估，因此您可以执行如下操作：

Whenever you evaluate some code in the inspected page using DevTools console, DevTools expose a bunch of helper calls known as command line API. This API includes inspect() call that has the same effect as if user invoked "Inspect Element" from the context menu, i.e. brings up the Elements panel and highlights the node. The inspect() call along with the rest of command line API is available to code evaluated by DevTools extnesions using chrome.devtools.inspectedWindow.eval(), so you can do stuff like:

chrome.devtools.inspectedWindow.eval("inspect(document.body)");

如果您只想在被检查的页面上突出显示，在Elements面板上没有任何事情发生因为当您将鼠标悬停在Elements搜索模式下的DOM搜索模式的页面上时），您必须自行实现此功能，因为目前没有API。我建议只使用内容脚本将自定义样式添加到元素中。

If you just want the highlight on the inspected page side, without anything happening on the Elements panel (i.e. as when you hover over the page with DOM search mode turned on by the looking glass in the Elements panel), you'll have to implement this on your own, as there's currently no API for that. I would suggest just adding a custom style to an element using a content script.

这篇关于使用chrome devtools扩展名突出显示节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！