Chrome开发人员工具：实施自己的元素层次结构视图（相同的Chrome浏览器，React开发人员工具）

Question

我正在构建像react-devtool或vue-devtool这样的devtool。

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

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

示例：chrome dev-tool元素面板。

谢谢。

Answer 1

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

请参见DevTools protocol via Chrome Extension。