What is the Playwright Inspector and how does it speed up debugging?

Playwright's debugging stack has three closely-related tools:

1. The Inspector (PWDEBUG=1): launches a stepping debugger. The browser opens alongside an inspector pane that shows the current action, the next action, and Locator information. Click "Step over" to advance one action; "Resume" to run to the next pause.

PWDEBUG=1 npx playwright test tests/login.spec.ts

2. page.pause() mid-test: insert anywhere in your test to pause execution and open the Inspector at that point. Useful for "let me poke around at step 3".

test('debug a specific step', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[data-test=email]', 'alice@x.com');
  await page.pause();   // inspector opens here
  await page.fill('[data-test=password]', 'pwd');
});

3. The UI Mode (--ui): a richer alternative — interactive runner with watch mode, time-travel through actions, network log, console, and pickable Locators. Excellent for development.

npx playwright test --ui

4. Codegen: npx playwright codegen <url> opens a browser; as you click and type, Playwright generates the equivalent test code. Great for boostrapping a test from an exploratory session.

npx playwright codegen https://staging.example.com/login

Inspector capabilities worth knowing:

• Locator picker: hover an element in the browser, the Inspector shows a recommended Locator (getByRole, then getByText, then a CSS fallback). Click to copy.
• Live selector evaluation: edit the locator in the Inspector and see it highlight in real time.
• Action playback: click "Record" to capture additional actions and append them to the test.

Debugging vs Cypress's time-travel: Playwright's Inspector is live (you're stepping the actual browser), Cypress's time-travel is post-hoc (you scroll back through past snapshots). Both are powerful; Playwright also has a post-hoc equivalent in the trace viewer.