
I Put Playwright Inside a Chrome Side Panel — Console, Recorder, and Debugger Included
When I started building Dramaturg , I just wanted a quick way to run Playwright commands without setting up a Node.js project. Type click "Submit" , see it happen. Simple. But then I kept going. And going. And now it has a full JS debugger — breakpoints, step-through, scope inspection — all running inside a Chrome side panel. What is Dramaturg? It's a Chrome extension that gives you a Playwright-powered REPL directly in your browser. No backend server, no IDE, no npx playwright test . Just open the side panel and start automating. It has two input modes: Keyword mode ( .pw ) — human-friendly commands: goto https://demo.playwright.dev/todomvc fill "What needs to be done?" "Buy groceries" press Enter verify-text "1 item left" JavaScript mode — full Playwright API: await page . goto ( ' https://example.com ' ); const title = await page . title (); console . log ( title ); await expect ( page . locator ( ' h1 ' )). toBeVisible (); Both modes run against your real browser session — cookies,
Continue reading on Dev.to Webdev
Opens in a new tab

