从 Devtools 协议获取 Javascript 对仅具有 backendNodeId 的元素的引用
Get Javascript reference to element with only backendNodeId from Devtools protocol
我希望能够将鼠标悬停在页面上,使其突出显示光标下方的元素(与开发人员工具检查器的方式相同),并且当我单击鼠标时获取该元素的 XPath。
通过代码启用元素检查器并接收 XPath,并由人工选择元素。
我可以通过使用 Chrome Devtools Protocol and using the Overlay.setInspectMethod 和 inspectNode=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}"
我希望能够将鼠标悬停在页面上,使其突出显示光标下方的元素(与开发人员工具检查器的方式相同),并且当我单击鼠标时获取该元素的 XPath。 通过代码启用元素检查器并接收 XPath,并由人工选择元素。
我可以通过使用 Chrome Devtools Protocol and using the Overlay.setInspectMethod 和 inspectNode=searchForNode
来启用 devtools 检查器行为。
单击鼠标后,我会收到来自 Overlay.inspectNodeRequested
事件
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}"