如何在 VSCode 中通过 Node.js 环境进行网页抓取开发-VSCode-PHP中文网

node.js 环境是否就绪直接决定抓取脚本能跑还是报错；vscode 仅是编辑器，真正执行请求的是本地 node.js，需先在终端验证 node -v 和 npm -v 是否可用，再根据静态或动态页面选择 axios+cheerio 或 puppeteer/playwright，并注意调试机制、反爬 headers、响应验证及 robots.txt 合规性。

如何在 vscode 中通过 node.js 环境进行网页抓取开发

Node.js 环境是否就绪，直接决定抓取脚本能跑还是报错

VSCode 本身不提供运行环境，它只是编辑器；真正执行 fetch、axios 或 https.get 的是本地 Node.js。所以第一步不是写代码，而是确认终端里能认出 node 和 npm。

打开 VSCode 内置终端（Ctrl+`），执行：

node -v && npm -v

如果提示“不是内部命令”，说明 Node.js 没进系统 PATH —— 安装时没勾选“Add to PATH”，或安装后没重启终端。别急着重装，先手动把 Node.js 安装目录（比如 C:\Program Files\nodejs\）加到系统环境变量里，再新开终端验证。

常见坑点：

npm install 卡住或报 EACCES 错误：Windows 上多数因 PowerShell 默认策略禁止脚本执行，用管理员身份运行终端，或临时执行 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
装了最新版 Node.js（如 22.x），但某些爬虫库（如旧版 cheerio 插件）依赖已废弃的 node-gyp 构建，优先用 LTS 版本（当前稳定为 20.x）

用什么库抓取，取决于你要的内容类型

静态 HTML 页面（如新闻列表、商品页）和带 JS 渲染的页面（如 React/Vue 单页应用），得用不同工具，混用会导致拿不到数据。

纯静态页，推荐组合 axios + cheerio：

axios 负责发请求、自动处理重定向和响应体编码
cheerio 是服务端的 jQuery，只解析 DOM，不执行 JS，轻量且快

示例片段（保存为 scrape.js）：

const axios = require('axios');
const cheerio = require('cheerio');
<p>axios.get('<a href="https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635">https://www.php.cn/link/b05edd78c294dcf6d960190bf5bde635</a>')
.then(res => {
const $ = cheerio.load(res.data);
console.log($('h1').text()); // 输出页面第一个 h1
});</p>

动态渲染页（比如登录后才显示的数据、滚动加载内容），必须用 puppeteer 或 playwright 启动真实浏览器上下文：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

puppeteer 启动 Chromium，支持等待元素、截图、模拟点击，但体积大、启动慢
playwright 支持多浏览器（Chromium/Firefox/WebKit），API 更统一，适合 CI 环境

注意：puppeteer 默认下载完整 Chromium，国内网络常失败，可提前设置镜像：

npm install playwright --save
# 然后在代码开头加：
process.env.PLAYWRIGHT_DOWNLOAD_HOST = 'https://npmmirror.com/mirrors/playwright';

VSCode 调试器里看不到请求，不是 bug 是设计如此

你在 console.log 里打日志能看到响应，但断点停不住 axios.get 的回调？这不是配置问题，是 Node.js 运行时机制决定的：网络 I/O 由 libuv 底层调度，JS 层只注册回调，不阻塞主线程。VSCode 的调试器只挂载 JS 执行栈，不拦截系统级 socket 调用。

所以别指望在 Debug Console 里看到实时请求列表——那属于浏览器 Network 面板或 mitmproxy 的职责。

真正有效的调试方式是：

在 then 或 catch 块里下断点，检查 res.data 结构是否符合预期
用 console.error 打印 res.status、res.headers['content-type']，确认不是返回了 403 或 HTML 登录页
如果目标站反爬，加 headers: { 'User-Agent': 'Mozilla/5.0...' }，否则很多站直接返回空内容或 403

VSCode 的 launch.json 只需基础配置：

{
  "version": "0.2.0",
  "configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Launch scrape.js",
    "program": "${workspaceFolder}/scrape.js",
    "console": "integratedTerminal"
  }]
}

抓到的数据怎么验证和后续处理

拿到 res.data 后，别急着存文件或入库，先确认三件事：

响应状态码是不是 200（res.status !== 200 时，res.data 往往是错误页 HTML）
Content-Type 是否含 text/html 或 application/json，避免把 PDF 或图片当 HTML 解析
用 cheerio 选中器测试是否真能取到目标字段：比如 $('[data-testid="title"]').length > 0

存文件建议用 fs.writeFileSync 而非 fs.writeFile（异步）—— 抓取逻辑通常是串行的，同步写更易调试；但若批量抓取上百页，就得改用流式写入或分批次，否则内存爆掉。

容易被忽略的一点：目标网站的 robots.txt 和使用条款。很多站明确禁止自动化抓取，axios 默认不带 robots.txt 解析逻辑，你得自己检查 https://site.com/robots.txt 里是否允许你的 User-Agent 和路径。硬上可能触发 IP 封禁或法律风险。