javascript - Chrome 开发工具：实现您自己的元素层次结构视图（相同的 chrome，react 开发工具）

Question

我正在构建一个开发工具，例如 react-devtool 或 vue-devtool。

我们有一个与 HTML DOM 相同的组件层次结构。我们希望以图形方式表示它，就像在 chrome（或任何浏览器）检查器窗口元素面板中完成的那样。寻找可用的预构建库或 chrome API，否则我将不得不手动构建整个表示。

对于 chrome，我已经构建了面板，但我不确定现有的解决方案是否可以以图形格式表示我拥有的 DOM 对象。

示例：chrome 开发工具元素面板。

谢谢你。

标签： javascriptdomgoogle-chrome-devtools

Answer 1

看起来DOM.getDocument会为您返回整个树。

通过 Chrome 扩展查看DevTools 协议。