DevTools 与 MCP

使用方式

目标应用必须启动 DevTools，主线程持续轮询命令。服务默认回环绑定，启动后以实际端口为准；多窗口调试先发现目标，再连接精确 target，避免修改其他窗口。

接入和限制

调试顺序建议为 DOM、computed style、盒模型、截图与性能记录。协议是 CDP 风格的部分域，Runtime.evaluate 执行 Lua，不是浏览器 JS。连接地址包含认证信息，不能把完整 URL 写进日志。

窗口级启动代码

由窗口管理 DevTools 能跟随正常帧轮询。本工程只有传入 --inspect 时启用，自动分配端口并记录无认证信息的 target。

    if (inspect) {
        if (auto* tools = window->startDevTools(0)) {
            // 只输出目标编号，完整连接 URL 含认证信息。
            std::fprintf(stderr, "target=kui-%u port=%u\n", tools->port(), tools->port());
        } else return 3;
    }

• 设置页调试课程 →

按问题选择面板

调试目标是缩小问题，不必同时打开所有记录。

1. 元素位置或样式错误：在 DOM/CSS 中选择节点，检查盒模型和计算样式。
2. Lua 逻辑错误：在脚本处设置断点，触发操作，检查当前变量与调用栈。
3. 拖动或滚动卡顿：录制单次固定操作，查看帧、样式、布局和绘制工作。
4. 需要 Agent 操作：连接 MCP，读取 DOM，再执行输入、点击、断言和截图。

改动必须回到源码

在 DevTools 中把侧栏改窄，只改变当前进程。确认效果后修改 HTML/CSS 文件并重建，再重新启动。自动化报告记录操作和断言，不保存带认证信息的连接地址。

• 图解 DevTools 与 MCP →
• 跟做调试 →