使用 Chrome Devtools 调试 Node 程序

在 Node 程序中使用 console.log 打印嵌套较深的对象时,无法完全展示该对象,而且终端的可读性较差,因此可以利用 Chrome DevTools 调试 Node 程序。

Quick Start

想利用 Chrome DevTools 调试 Node 程序,对 Node 程序有一个要求就是,Node 程序比较阻塞,比如监听一个 Socket,下文会解释原因。

首先创建一个示例文件 server.js

js 复制代码
// server.js
const http = require('http')

http
  .createServer((request, response) => {
    const { headers, method, url } = request
    console.log(request)
    let body = []
    request
      .on('error', (err) => {
        console.error(err)
      })
      .on('data', (chunk) => {
        body.push(chunk)
      })
      .on('end', () => {
        body = Buffer.concat(body).toString()
        response.on('error', (err) => {
          console.error(err)
        })
        response.statusCode = 200
        response.setHeader('Content-Type', 'application/json')
        const responseBody = { headers, method, url, body }
        response.write(JSON.stringify(responseBody))
        response.end()
      })
  })
  .listen(8080)

用 node 执行代码,并添加 --inspect

sh 复制代码
node --inspect server.js

然后使用以下任意一种方法打开 Devtools for Node.js:

  1. 在 chrome 地址栏中打开 chrome://inspect/#devices。启动 node inspect 的时候,chrome 会自动捕获可调试的目标
  1. 访问 http://127.0.0.1:9229/json 获取 devtoolsFrontendUrl,然后新建 tab 页面打开。Devtools 其实就是一个前端项目(仓库地址)
  1. 任意打开一个 Devtools,点击左边 Node 图标

此时,你不仅可以用 Console 进行调试,还可以用 Sources 面板进行断点调试

调试原理

在使用 Chrome DevTools 调试 Node 程序时,Chrome DevTools 是调试前端,Node 是调试后端,前后端使用 WebSocket 进行通信,使用 CDP(Chrome DevTools Protocol) 协议约定数据的内容。在我们展开 Console 面板中的对象时,Node 会向 V8 查询对象的信息,然后展示,这也是为什么 Node 程序需要阻塞的原因。

我们可以打开 Protocol monitor 面板查看通信中的信息。Protocol monitor 是一项实验性功能,需要先启用。

然后对 Console 面板中的对象进行展开查看。

以上只是最基本的介绍,具体的调试原理可以查看:

常见开发场景的调试方法

监听文件变动重启服务

现在 Node 实验性支持 watch 功能,官方文档

sh 复制代码
node --watch server.js

使用方法3打开 Devtools for Node.js

Typescript

使用 tsx 包。

tsx 是对 node 的封装,支持所有 node 的命令行参数。tsx 会先用 esbuild 编译 ts,然后再交给 node 执行,并支持 watch 功能。缺点就是重启的时候,Devtools 捕获有点慢。

sh 复制代码
npm i tsx -g

tsx --inspect server.ts

调试 Cli 程序

可以修改 node_modules/.bin 下对应的 cli 程序,例如修改 vite 的可执行文件。

思路是给 node 添加 --inspect 参数,不同操作系统可能不一样,拿 MacOS 举例,将 node_modules/.bin/vite 文件内容修改为(记得将源文件备份):

sh 复制代码
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
exec node --inspect  "$basedir/../vite/bin/vite.js" "$@"

然后正常运行 npm run dev,使用方法3打开 Devtools for Node.js。

相关推荐
DN金猿1 小时前
使用npm install或cnpm install报错解决
前端·npm·node.js
layman05282 小时前
node.js 实战——(Http 知识点学习)
http·node.js
2501_915373882 小时前
Node.js 学习入门指南
学习·node.js
~heart将心比心3 小时前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome
Bruce_Liuxiaowei4 小时前
使用Python脚本在Mac上彻底清除Chrome浏览历史:开发实战与隐私保护指南
chrome·python·macos
沐土Arvin6 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
浪裡遊13 小时前
Linux常用指令
linux·运维·服务器·chrome·功能测试
鸿蒙布道师17 小时前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚17 小时前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
神仙别闹19 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js