在 Chrome DevTools 中并行调试 Node.js 和浏览器 JavaScript（Nodejs版）

在 Chrome DevTools 中并行调试 Node.js 和浏览器 JavaScript（Nodejs版）

更新到 Node.js v6.4+ 后使用 Node inspector 调试代码遇到了异常，一路搜索下来后，学到了一点 Node.js debug 新姿势！ 于是拼凑了一篇在 Chrome DevTools 中并行调试 Node.js 和浏览器 JavaScript。


1 回复

在 Chrome DevTools 中并行调试 Node.js 和浏览器 JavaScript（Node.js 版）可以通过使用 Chrome DevTools Protocol (CDP) 和一些辅助工具来实现。以下是一个简要的步骤指南和示例代码，帮助你实现这一目标。

  1. 使用 chrome-remote-interface： 首先，你需要安装 chrome-remote-interface 库，这个库允许你通过 CDP 与 Chrome 通信。

    npm install chrome-remote-interface

  2. 启动 Node.js 应用并启用调试： 使用 --inspect 标志启动你的 Node.js 应用。

    node --inspect your-app.js

  3. 连接到 Node.js 调试会话： 使用 chrome-remote-interface 连接到 Node.js 的调试端口（默认为 9229）。

    const CDP = require('chrome-remote-interface');

CDP(function(client) {
  // 列出所有可用的标签页（Node.js 会话被视为一个标签页）
  client.Page.enable().then(() => client.Page.getNavigationHistory()).then(({entries}) => {
    console.log('Navigation history:', entries);
    // ... 其他调试操作
  });

  // 关闭连接
  client.close();
}).on('error', (err) => {
  console.error(err);
});

  4. 并行调试： 同时，你可以在 Chrome 中打开 DevTools，并通过 chrome://inspect 页面连接到你的 Node.js 应用和浏览器标签页，从而实现并行调试。

这样，你就可以在 Chrome DevTools 中同时调试 Node.js 和浏览器中的 JavaScript 代码了。注意，实际调试过程中可能需要根据你的应用逻辑和调试需求调整代码和步骤。

回到顶部