Node环境下Playwright控制台即时调试方法咨询

1. 原生调试器+async/await配合调试 #

直接在异步测试逻辑里插入debugger语句，搭配Node调试工具（Chrome DevTools或VS Code调试功能）即可：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  // 执行到此处会暂停，此时page、browser均为已解析的实例
  debugger;
  
  const title = await page.title();
  console.log(title);
  await browser.close();
})();

运行时用node inspect your-test-file.js，或者在VS Code里直接启动调试任务，断点触发后可直接查看所有已通过await获取的变量值，无需反复重跑测试。

2. 用Playwright官方调试工具（PWDEBUG） #

设置环境变量启动Playwright Inspector，这是专门针对Playwright的调试工具，支持单步执行、实时查看DOM、控制台调用API：

• Windows（PowerShell）：$env:PWDEBUG=1 node your-test-file.js
• macOS/Linux：PWDEBUG=1 node your-test-file.js
  启动后会弹出调试窗口，你可以：
• 点击「Step over」逐步执行代码
• 在控制台直接输入await page.title()这类命令，实时获取结果
• 查看当前页面DOM结构，快速定位元素

3. VS Code断点调试配置 #

在项目中创建.vscode/launch.json配置文件，实现一键断点调试：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Playwright Test",
      "program": "${workspaceFolder}/your-test-file.js",
      "skipFiles": ["<node_internals>/**"],
      "env": {
        "PWDEBUG": "1" // 可选，同时启用Playwright Inspector增强调试
      }
    }
  ]
}

配置完成后，直接在代码行左侧点击添加断点，启动调试后，断点会在异步操作完成后暂停，此时所有变量都是已解析的实际值，体验和Python控制台暂停一致。

核心提示 #

不要直接查看pending状态的Promise，通过await将异步逻辑转为同步执行流程后再调试，就能避免反复重跑测试的麻烦。

内容的提问来源于stack exchange，提问作者jTiKey