如何优雅的调试node环境的npm package源码

#nodejs #source-code

jerrywu001

创建时间：2023-09-04 07:34:06

光神曾经说过“当你有了技术深度，很可能也同时有了技术广度”，这句话说出来是非常牛逼的，就比如说当你尝试去阅读源码时，你会学到很多你之前未曾听过的知识和技巧。

我今天想要记录的是如何优雅的调试node环境的npm package源码

一共有两种方式，让我们一一道来：

创建项目

mkdir node-test
cd node-test
npm init -y
npm i typescript wait-on -D

mkdir src
touch src/index.ts src/util.ts

package.json

注：buildscript中--sourcemap尤其重要，否则不能断点ts源码，只能调试bundle js代码

开源npm package一般都会提供一个dev或者playground的script, 本文的devscript仅仅用于演示，并不是一定要这么写

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "build": "rm -rf dist && tsc ./src/index.ts --sourcemap --outDir dist",
    "dev": "npm run build && wait-on dist/index.js && npm run chrome",
    "chrome": "node --inspect-brk dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.9.3",
    "wait-on": "^6.0.1"
  }
}

src/index.ts

import displayName from "./util";

const message = displayName('google');
console.log(message);

src/util.ts

export default function displayName(name: string) {
  return `My name is ${name}`;
}

chrome inspect

运行`npm run dev`

打开chrome, 访问`chrome://inspect`

添加项目文件夹到`worksapce`

src源码打断点，即可调试

vscode debug （推荐）

通过sourcemap调试源码

修改package.json的script部分

"scripts": {
    "build": "rm -rf dist && tsc ./src/index.ts --sourcemap --outDir dist",
    "dev": "npm run build && wait-on dist/index.js && npm run inspect",
    "inspect": "node dist/index.js"
 }

添加launch.json
弹框选择nodejs
点击添加配置按钮，并删除configurations，重新选择，如图：
修改runtimeArgs，将debug改成dev
源码打几个断点
键盘按下F5，即可调试

直接调试源码

rm -rf node_modules dist package-lock.json，并修改package.json

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "esno src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

npm i esno -D

也可以用ts-node
源码打几个断点
按下F5即可调试

总结，最关键的是需要有sourcemap，否则只能调试打包后的js代码，如果某些npm包没有提供soucemap，需要想办法重新打包，并生成sourcemap

如果觉得文章对您有帮助，可以点个小红心，感谢~