从Devtools协议获取只具有backendNodeId的元素的Javascript引用

Question

我希望能够将鼠标放在页面上，让它突出显示光标下的元素(与开发人员工具检查器相同)，当我单击鼠标时，可以获得该元素的XPath。启用元素检查器并接收要通过代码完成的XPath，以及由人进行的元素选择。

我可以通过使用Chrome Devtools Protocol和带有inspectNode=searchForNode的Overlay.setInspectMethod来启用devtools检查器行为。

在单击鼠标时，我会收到来自Overlay.inspectNodeRequested事件的被单击元素的DOM.BackendNodeId

devtools协议似乎没有任何内置的方法来获取XPath。所以我找到了Chrome开发人员工具复制-> this功能的Xpath javascript实现。

虽然我可以通过CDT协议评估javascript，但经过几个小时的尝试，我不知道如何获得对Node的引用来执行javascript函数，而我所拥有的只有BackendNodeId。

有没有办法在javascript中获得对节点的引用，或者在CDTProtocol中获得节点的XPath？

Answer 1

找到合适的解决方案

首先，我需要通过以下方式获取对Javascript对象的引用

DOM.resolveNode, {backendNodeId: nId}

然后从返回的JSON对象中提取objectId。它看起来像这样

​

然后，我可以调用任何我喜欢的函数，使用元素作为上下文

Runtime.callFunctionOn, {functionDeclaration: "function(){getXPathForElement(this)}", objectId: "{"injectedScriptId":3,"id":3}"