调试 puppeteer 脚本在 vscode 中的关键在于配置调试环境和理解运行机制。1. 配置 launch.JSon 文件，使用 pwa-node 类型实现断点调试，根据脚本语言选择 ts-node 或 node 执行器；2. 设置 puppeteer 启动参数，关闭无头模式（headless: false）并开启开发者工具（devtools: true），便于观察页面变化和调试；3. 结合 mocha 或 jest 等测试框架组织自动化测试代码，并通过 vscode 调试器实现断点调试与测试报告输出；4. 注意等待逻辑处理，使用 page.waitforselector() 或 page.goto() 的 waituntil 和 timeout 参数确保元素加载完成，避免因异步加载导致的失败。这些步骤能帮助你高效稳定地调试 puppeteer 自动化脚本。
调试 Puppeteer 脚本在 VSCode 中其实不难，关键在于配置好调试环境和理解 Puppeteer 的运行机制。Puppeteer 是一个控制无头 chrome 或 Chromium 的 Node.js 库，常用于自动化测试、页面截图、爬虫等任务。下面我们就从几个实用角度出发，讲讲怎么在 VSCode 里调试 Puppeteer，并运行自动化测试。
配置 launch.json 实现断点调试
VSCode 的调试功能很强大，要调试 Puppeteer 脚本，第一步就是配置 launch.json 文件。
- 打开你的项目文件夹，在 .vscode 目录下创建或编辑 launch.json
- 添加一个调试配置项，类型选 pwa-node（推荐使用 microsoft 的 JS debugger）
示例配置如下：
{ "version": "0.2.0", "configurations": [ { "type": "pwa-node", "request": "launch", "name": "Launch Puppeteer Script", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node", "runtimeArgs": ["${workspaceFolder}/your-script.ts"], "restart": true, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" } ] }
如果你用的是 JavaScript，可以把 ts-node 换成 node，并指向 .js 文件。
这样配置后，你就可以在代码中加断点，点击“开始调试”按钮运行脚本了。
设置 puppeteer 启动参数让调试更方便
默认情况下，Puppeteer 是以无头模式运行的，看不到浏览器界面，这对调试不太友好。我们可以手动关闭无头模式，看到浏览器操作过程。
在启动 Puppeteer 时加上以下参数：
const browser = await puppeteer.launch({ headless: false, // 显示浏览器界面 slowMo: 50, // 放慢操作速度，方便观察 });
这两个参数非常实用，特别是调试过程中，能看到页面变化会让你更容易发现哪里出错了。
另外，如果你想保留浏览器上下文，比如调试登录状态，可以设置 devtools: true 来打开开发者工具：
const browser = await puppeteer.launch({ headless: false, devtools: true });
使用 Mocha 或 Jest 做自动化测试
如果你不只是想跑个脚本，而是要做完整的自动化测试，建议结合测试框架来组织代码。
比如使用 Mocha：
- 安装依赖：npm install mocha puppeteer –save-dev
- 创建测试文件，例如 test/example.spec.js
- 编写测试用例：
const puppeteer = require('puppeteer'); describe('Google Search Test', () => { let browser; let page; before(async () => { browser = await puppeteer.launch({ headless: false }); page = await browser.newPage(); }); after(async () => { await browser.close(); }); it('should search and get results', async () => { await page.goto('https://google.com'); await page.type('input[name=q]', 'puppeteer test'); await page.keyboard.press('Enter'); await page.waitForNavigation(); const title = await page.title(); console.log(title); }); });
然后在 package.json 中添加启动命令：
"scripts": { "test": "mocha" }
再配合 VSCode 的调试器，就能实现断点调试 + 测试报告输出，非常适合做 UI 自动化测试。
小贴士：别忘了等待和超时处理
Puppeteer 默认不会等待元素加载完成，所以经常会出现找不到元素的问题。记得多用 page.waitForSelector() 或 page.waitForFunction()。
比如：
await page.waitForSelector('#login-button'); await page.click('#login-button');
如果页面加载慢，还可以适当增加等待时间：
await page.goto('https://example.com', { waitUntil: 'networkidle2', timeout: 30000 });
这些细节处理不好，很容易让你的测试脚本失败，特别是在网络不稳定或页面异步加载较多的时候。
基本上就这些。调试 Puppeteer 不复杂，但有些地方容易忽略，尤其是等待逻辑和浏览器显示模式。只要配置好调试器，合理使用等待方法，自动化测试也能跑得又稳又快。
