How to use it
The application must start DevTools and keep processing commands on the main thread. The service binds to loopback by default; use its actual assigned port. Discover targets before connecting so a multi-window session modifies the intended window.
Integration and limits
Inspect the DOM, computed styles and box model before taking screenshots and recording performance. The protocol implements selected CDP-style domains. Runtime.evaluate executes Lua, not browser JavaScript. Connection URLs contain authentication data and must not be logged.
Window-level startup
Window-owned DevTools participates in normal frame polling. The lesson enables it only with --inspect, automatically allocating a port and logging a target ID without authentication data.
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;
}
Pick a panel for the problem
Use debugging to narrow a problem; recording everything is rarely necessary.
- Wrong position or styling: select the node in DOM/CSS and inspect its box and computed styles.
- Lua logic failure: set a breakpoint, trigger the action and inspect variables and stack.
- Slow scrolling or dragging: record one repeatable action and inspect frame, style, layout and paint work.
- Agent automation: connect MCP, inspect DOM, then input, click, assert and capture.
Write changes back to source
Narrowing a sidebar in DevTools changes the current process. Save the change in HTML/CSS, rebuild and restart. Automation reports should retain actions and assertions, excluding authenticated connection URLs.
Something unclear?
Report an issue on this page →