Cypress 中调试 Node.js 侧任务（task）的正确方法-js教程-PHP中文网

Cypress 中调试 Node.js 侧任务（task）的正确方法

Cypress 的 cy.debug() 仅适用于浏览器端测试代码，无法调试运行在 Node.js 进程中的 cy.task()；要调试 task 内部调用的 JS 文件（如 FileUtils.js），需使用 VS Code 等 IDE 的 Node.js 调试器直接附加到 Cypress 的 Node 进程。

cypress 的 `cy.debug()` 仅适用于浏览器端测试代码，无法调试运行在 node.js 进程中的 `cy.task()`；要调试 `task` 内部调用的 js 文件（如 fileutils.js），需使用 vs code 等 ide 的 node.js 调试器直接附加到 cypress 的 node 进程。

在 Cypress 测试中，测试文件（.cy.js）运行于浏览器环境，而 cy.task() 及其依赖的模块（如 FileUtils.js）运行于 Node.js 环境（Cypress Runner 进程）——这是两个完全隔离的 JavaScript 运行时。因此，你在 Chrome DevTools 的 Sources 面板中为 FileUtils.js 设置的断点永远不会触发，因为该文件根本未被加载到浏览器中，而是由 Node.js 加载并执行。

✅ 正确调试路径如下：

1. 明确调试目标：Node.js 侧逻辑 ≠ 浏览器侧逻辑

cy.debug()、debugger 语句、Chrome DevTools → 仅用于调试 cy.get()、cy.visit() 等前端交互逻辑；
cy.task()、setupNodeEvents、require('./Utils/FileUtils.js') → 属于 Node.js 上下文，必须用 Node.js 调试器（如 VS Code）调试。

2. 使用 VS Code 调试 `cy.task()`（推荐方案）

确保已安装 VS Code 并启用 Node.js 支持（内置无需插件）。按以下步骤操作：

✅ 步骤一：启用 Auto Attach（自动附加）

在 VS Code 中打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入并选择：

Debug: Toggle Auto Attach

选择 Only With Flag 或 Always（开发阶段建议选 Always）。

? 原理：Cypress 启动时会以 node --inspect-brk ... 方式启动子进程，Auto Attach 可自动捕获并附加调试器。

jm-jsjkxyjs02-zlm-405
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

✅ 步骤二：在 `FileUtils.js` 中设置断点

// ./Utils/FileUtils.js
async function checkFiles() {
  console.log('? Entering checkFiles — breakpoint here will now hit'); // ← 在此行左侧点击设断点
  // your actual logic...
  const files = await fs.readdir('./fixtures');
  console.log('Found files:', files);
  return files;
}

module.exports = { checkFiles };

✅ 步骤三：启动 Cypress 并触发 task

在终端中运行（务必在 VS Code 的集成终端中执行）：

npx cypress open

→ 在 Cypress Test Runner 中选择对应 spec（如 test1.cy.js）并运行。
此时 VS Code 将自动附加到 Node.js 进程，执行至 checkFiles() 断点处即暂停，支持：

单步步入（F11）、跳出（Shift+F11）、继续（F5）
查看变量作用域、调用栈、表达式求值（Debug Console）
修改变量值并继续执行（仅限部分场景）

⚠️ 注意：若未触发断点，请检查：

是否在 集成终端（而非系统终端）中运行 npx cypress open；

FileUtils.js 路径是否正确（require() 路径错误会导致静默失败）；

cy.task('myTask') 是否真正被调用（可在 myTask 函数内加 console.log('task started') 验证）。

3. 替代方案：手动 attach 到进程（进阶）

若 Auto Attach 不生效，可手动附加：

运行 npx cypress open --inspect（Cypress ≥ 12.0 支持）；

在 VS Code 中创建 .vscode/launch.json：

{
"version": "0.2.0",
"configurations": [
  {
    "type": "node",
    "request": "attach",
    "name": "Attach to Cypress Node",
    "port": 9229,
    "address": "localhost",
    "localRoot": "${workspaceFolder}",
    "remoteRoot": "${workspaceFolder}"
  }
]
}

然后点击 ▶️ 启动调试会话。

✅ 总结：关键原则

环境	运行位置	调试方式	工具示例
Browser	浏览器渲染进程	`cy.debug()` + Chrome DevTools	Elements/Console/Sources
Node.js	Cypress Runner 进程	VS Code Node Debugger	Breakpoints, Debug Console