cocosH5嵌入webview调试工具，基于Chrome Devtools

Creator 3.x
#1

前言：由于项目需要打包h5并嵌入到webview里面，偶尔就会造成调试困难，如果能像在电脑开发的时候可以在网页上显示对应节点树那么调试起来就会方便很多，这里只做简单的实现方法探讨，目前我本地代码大多都是AI实现

1.发现了一个非常好的开源工具https://github.com/liriliri/chii只需要启动服务,然后在需要调试的页面进行注入对应js那么就可以进行远程的调试。

2.有了上面的方案我们只需要实现cdp通信部分就可以实现显示对应cocos的节点树信息，并可以看到对应的打印信息

截屏2026-01-18 17.44.55
截屏2026-01-18 17.44.552172×1500 168 KB

3.代码实现逻辑主要为单独使用vue写一个节点树面板，使用iframe嵌套进入，然后里面的数据需要使用cdp里面封装的runtimeAgent里的方法进行获取对应的属性变量

// 获取 runtimeAgent
async function getRuntimeAgent() {
  const win = getDevToolsWindow() as any;
  if (!win || !win?.SDK) {
    log('❌ Error: SDK not found. DevTools frame might not be ready.');
    return null;
  }
  const target = win.SDK.targetManager.mainTarget()
  if (!target) {
    log('❌ Error: No main target found.');
    return null;
  }
  runtimeAgent.value = target.runtimeAgent()
  return runtimeAgent.value;
}

// 获取节点树
const refreshTree = async () => {
  log("Starting refreshTree...");
  selectedObjectId.value = ''; // Reset selection on refresh
  const agent = await getRuntimeAgent();
  if (!agent) {
    log("Aborting: No Runtime Agent.");
    return;
  }

  try {
    const result = await agent.invoke_evaluate({
      expression: 'cc.director.getScene().children',
      objectGroup: 'console',
      includeCommandLineAPI: true,
      returnByValue: false,
      generatePreview: true
    });
    console.log('Result:', result);
    // 设置根对象以触发 ObjectTree 渲染
    if (result.result) {
      rootObject.value = result.result;
    }
  } catch (e) {
    console.error('Refresh failed:', e);
  }
};
1赞