vscode 是开发 Puppeteer 脚本最顺手的编辑器，通过安装 ES7+、javaScript snippets、Debugger for chrome/edge 和 Prettier 等扩展，配合 node.js 环境与 launch({devtools:true})、screenshot()、waitUntil 等调试技巧，可高效完成编写、运行与排错。
VSCode 是写 Puppeteer 脚本最顺手的编辑器之一，它不直接运行浏览器，但能高效开发、调试和管理 Puppeteer 自动化 任务。
装对扩展，事半功倍
在 VSCode 里开发 Puppeteer，建议装这几个实用扩展：
- ES7+ react/Redux/React-Native snippets：快速输入 async/await、try-catch 等常用结构，Puppeteer 脚本大量依赖 异步 操作
- javascript (es6) code snippets：补全 promise、setTimeout、querySelector 等 dom 和 Node.js 常用写法
- Debugger for Edge / Debugger for Chrome：配合 Puppeteer 的
launch({devtools: true})或headless: false实时断点调试页面行为 - Prettier：统一代码风格，避免因缩进或分号引发的执行异常
本地运行 Puppeteer 脚本的最小配置
不需要额外服务，node.js 环境配好就能跑。关键几步：
- 项目根目录运行
npm init -y初始化 - 安装 Puppeteer：
npm install puppeteer（自动下载 Chromium） - 新建
test.js，写个基础示例：
const puppeteer = require('puppeteer'); (async () => {const browser = await puppeteer.launch({ headless: false}); const page = await browser.newPage(); await page.goto('https://example.com'); console.log(await page.title()); await browser.close();})();
按 F5 启动调试，或终端执行 node test.js 即可看到浏览器打开并抓取标题。
调试技巧：让自动化“看得见、停得住”
Puppeteer 默认静默运行，调试时容易卡住或失败。几个真实有效的办法：
- 加
waitUntil: 'networkidle2'到page.goto()，等页面资源基本加载完再继续 - 用
page.screenshot()在关键步骤截图，确认页面状态（比如登录后是否跳转） - 开启 DevTools：
puppeteer.launch({devtools: true})，然后在 VSCode 调试器中设断点，直接查看 DOM 和 console - 捕获异常时打印
page.url()和page.content()片段，快速定位失败位置
集成测试工作流（轻量级）
不用上 Cypress 或 Playwright，纯 Puppeteer + VSCode 也能搭出可用的测试流程：
- 把每个测试用例写成独立文件，如
login.test.js、search.test.js - 用
npm test触发npx jest或简单脚本批量执行（Jest 支持 Puppeteer 环境） - 在
.vscode/tasks.json里配一个“运行当前测试”任务，一键执行光标所在文件 - 失败时自动生成 html 报告（可用
puppeteer-html-reporter或简单写 fs.writeFile 输出日志）
基本上就这些。VSCode 不是测试工具，但它是 Puppeteer 开发最趁手的“操作台”——写得清、跑得稳、错得明。
