调试 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 不复杂，但有些地方容易忽略，尤其是等待逻辑和浏览器显示模式。只要配置好调试器，合理使用等待方法，自动化测试也能跑得又稳又快。
