laurentvv/graph-orchestrator-smolagents/devtools-preview

DevTools Preview Skill

You have a controllable Chrome browser (Chrome DevTools MCP) to visually and functionally verify your page BEFORE calling final_answer. The screenshot you capture is returned in context as an image.

Why

Syntactically valid HTML can still render broken layouts, empty containers, or silent JS exceptions. Previewing directly catches visual flaws and runtime errors immediately.

Workflow (Mandatory for web tasks after write_file)

1. Navigate: navigate_page(url="<ABSOLUTE file:/// URL>")

• The exact primary file URL is provided in the prompt. Use it directly.

1. Console Verification: list_console_messages() -> check for JS errors.

• ⚠️ MANDATORY: If you see SyntaxError, Unexpected token, or Uncaught, fix it immediately via search_replace or write_file.

1. Capture: take_screenshot() -> inspect the rendered image in context.

• ⚠️ NEVER pass `filePath`. Call take_screenshot() without arguments.
• Verify layout, colors, font styling, and proper container utilization.

1. UI Fuzzing & Interaction:

• Call fuzz_click_all_buttons() or click(uid=...) to wake up event handlers and catch silent JS exceptions.
• For canvas/animations, verify movement with probe_canvas_activity().

1. Fix & Re-verify:

• If bugs occur, fix them, then re-navigate, re-check console, and re-capture.

1. final_answer: Call when rendering is verified AND 0 console errors AND controls are functional.

Pitfalls to Avoid

• HTML ONLY: NEVER pass .css or .js files to navigate_page(). Always navigate to the parent HTML file (e.g. index.html).
• Stop Condition: Once files are written and verified with clean console and good rendering, immediately call final_answer.
• Absolute URLs: navigate_page(url="index.html") will not work. Always use the provided absolute file:///... URL.

Key Tools