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

Get Javascript reference to element with only backendNodeId from Devtools protocol

我希望能够将鼠标悬停在页面上,使其突出显示光标下方的元素(与开发人员工具检查器的方式相同),并且当我单击鼠标时获取该元素的 XPath。 通过代码启用元素检查器并接收 XPath,并由人工选择元素。

我可以通过使用 Chrome Devtools Protocol and using the Overlay.setInspectMethodinspectNode=searchForNode 来启用 devtools 检查器行为。

单击鼠标后,我会收到来自 Overlay.inspectNodeRequested 事件

的已单击元素的 DOM.BackendNodeId

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

虽然我可以通过 CDT 协议评估 javascript,但经过数小时的尝试,我无法弄清楚如何获取对节点的引用以执行 javascript 函数当我只有 BackendNodeId.

有没有办法在 javascript 中获取节点的引用,或者有没有办法在 CDTProtocol 中获取节点的 XPath?

找到合适的解决方案

首先我需要通过

获得对Javascript对象的引用

DOM.resolveNode, {backendNodeId: nId}

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

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

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