无法获取CDP的DOM.shadowRootPushed事件,求技术解决方案
无法捕获CDP的DOM.shadowRootPushed事件
我尝试让Chrome DevTools Protocol(CDP)发送实验性的DOM.shadowRootPushed事件,但始终无法成功捕获。
我的操作流程如下:
- 使用
--remote-debugging-port=2222参数启动Chrome - 通过WebSocket连接到调试端点,发送
DOM.enable命令启用DOM域处理器 - 对应的Node.js代码:
import WebSocket from 'ws'; async function connectToChrome() { const response = await fetch('http://localhost:2222/json'); const endpoints = await response.json(); let debuggerUrl = ''; for (const i in endpoints) { if (endpoints[i].title === 'Simple html') { debuggerUrl = endpoints[i].webSocketDebuggerUrl; } } console.log('debuggerUrl', debuggerUrl); const ws = new WebSocket(debuggerUrl); ws.on('open', () => { console.log('Connected to Chrome'); ws.send(JSON.stringify({ id: 1, method: 'DOM.enable' })); }); ws.on('message', (data) => { const message = JSON.parse(data); if (true) { console.log('Message received:', message); } }); ws.on('error', (error) => { console.error('WebSocket error:', error); }); } connectToChrome();
我准备了一个测试用的HTML页面,点击按钮时会调用attachShadow创建影子DOM:
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple html</title> <script> function test() { const dummy = document.getElementById('dummy'); let shadowRoot = dummy.attachShadow({ mode: 'open' }); const paragraph = document.createElement('p'); paragraph.textContent = 'This content is encapsulated.'; shadowRoot.appendChild(paragraph); } </script> </head> <body> <div id="dummy"> <button onclick="test()">Click me</button> </div> </body> </html>
相关验证细节:
- 在DevTools中启用“Protocol monitor”后,能看到
DOM.shadowRootPushed事件触发,说明HTML页面逻辑无问题 - 即使Chrome不添加任何启动参数,该事件仍会出现在Protocol Monitor中,推测无需特殊启动参数
- 重新加载HTML页面时,能正常收到
DOM.documentUpdated事件,说明DOM域处理器已正常运行
我想知道是否需要发送其他CDP命令才能捕获到DOM.shadowRootPushed事件,但未找到相关文档说明。
内容的提问来源于stack exchange,提问作者SS221
相关产品推荐
相关产品推荐

