FORGE KUI / learn

Debug the settings page

Start DevTools for this window and inspect elements, styles and save status.

Version 3.61.7

Lesson 04
Before you start
A built settings project and a browser
What you will build
Locate a real layout or event problem
Download project ↓settings-lab.zip

Start the window service

Run settings_lab.exe --inspect. The project calls window->startDevTools(0) to allocate an available port. Its log prints only target=kui-port and the port number. Full connection URLs contain authentication data and should not appear in logs or feedback attachments.

cpp
    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;
    }

Connect to the exact target

Connect with the target ID reported by this process. TARGET_FROM_LOG below means the actual ID in the current log, not a fixed port. In a multi-window session verify the title to avoid changing a different app.

text
kui_targets()
kui_connect(target=TARGET_FROM_LOG)
kui_page_info()
kui_dom(selector="#display-name")
kui_box_model(selector="#save")

Reproduce validation failure

Clear the name and save. Inspect whether #status has data-state=error and the input has aria-invalid=true. Save a valid name and check data-state=success with an increased #revision. This checks controls and native callbacks beyond the initial screenshot.

text
kui_dom(selector="#status")
kui_dom(selector="#revision")
kui_get_style(selector="#status")
kui_screenshot(output_path="settings-state.png")

Layout and performance checks

Use box geometry to inspect workspace and button dimensions. Style inspection helps diagnose colors, spacing and overflow; performance recordings analyze frame work during interaction. This settings project does not attach a Lua engine. Runtime.evaluate is not a browser JavaScript console.

Current SDK keyboard limitation

In the Windows x64 SDK 3.61.7 lesson, Tab focuses the button, but Enter injected through DevTools does not trigger its save click. Mouse activation works. This does not establish behavior for every native keyboard path or full keyboard acceptance.

Practice and acceptance

Use these actions to check completion; there is no need to copy the same code into another project.

  • Start with --inspect and find #display-name and #save in the DOM.
  • Try a color or spacing change, write it to app.css and rebuild.
  • Restart and discover the new target rather than reusing authenticated URLs.