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 即可看到浏览器打开并抓取标题。
Angel工作室企业网站管理系统1.2
下载
Angel工作室企业网站管理系统全DIV+CSS模板，中英文显示，防注入sql关键字过滤，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。内置IIS测试，双击打启动预览网站 Angel工作室企业网站
调试技巧：让自动化“看得见、停得住”
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 开发最趁手的“操作台”——写得清、跑得稳、错得明。
