debugging-skill

Debugging Skill: Error-Free UI Verification

Purpose

Ensure that after any code change, the app is fully reloaded, the user flow is tested from the beginning, and no runtime errors or warnings are present before continuing with feature work or test automation.

Workflow

1. Restart Browser Session

   • After any file change or hot-reload, always start a new browser session (do not reuse previous state).
   • This ensures no stale state or session issues.

2. Start with the Test App (http://localhost:5173)

   • Always verify behavior on the standalone test app first, before testing in Storybook or other environments.
   • The test app runs directly in the page (no iframes), making it easier to inspect shadow DOM elements, debug overlay state, and interact with the bottom toolbar.
   • Only move to Storybook (SB8/SB10) or other environments after confirming the feature works in the test app.

3. Walk Through Full User Flow

   • Navigate to the target page.
   • Interact with the UI as a real user would.

4. Monitor for Errors and Warnings

   • Capture all browser console logs, errors, and exceptions during navigation and interaction.
   • Do not proceed if any runtime errors or warnings are present.
   • Only continue with feature work or test automation when the UI is confirmed error-free.

Clicking the Toggle Button (Playwright MCP)

The Convey toggle button (aria-label="Open Convey inspector") lives inside a shadow DOM (#tw-visual-editor-host). Playwright MCP's click_element and snapshot tools cannot reach shadow DOM elements directly.

Always use page.evaluate() to click it:

await page.waitForFunction(() => {
  const host = document.querySelector('#tw-visual-editor-host') as HTMLElement;
  return !!(host?.shadowRoot?.querySelector('.toggle-btn'));
}, { timeout: 5000 });

await page.evaluate(() => {
  const host = document.querySelector('#tw-visual-editor-host') as HTMLElement;
  const btn = host.shadowRoot!.querySelector('.toggle-btn') as HTMLButtonElement;
  btn.click();
});