我们在学习npm源码时，如果直接一行行读，比较费劲，这里主要通过Chrome浏览器和vscode来讲述调试npm包的技巧

1. 通过Chrome浏览器调试

举个例子，我这里想要学习webpack打包流程，该如何做呢？我们可以在package.json的scripts中配置如下脚本： debug: node --inspect-brk ./node_modules/webpack-cli/bin/cli.js --config ./config/webpack.prod.js(--inspect-brk，表示在代码的第一行打断点，便于直接进入源码调试，也可以直接在源码中添加debugger，看个人习惯)

配置好之后，就可以在终端中输入npm run debug运行了。在终端中输入以上命令后，可打开Chrome浏览器，打开浏览器的调试模式，可看到如下图标：

点击红框中node图标，即可看到源码，进入调试，提示模式跟前端js代码完全相同：

提示，有时候我们在调试后，忘了关掉调试窗口，然后在终端终端调试后，再次调试时，新开一个浏览器标签，这时候我们是看不到node的图标的，只要重新打开原调试窗口就可以

2. 通过vscode的debug模式调试

点击vscode的左边栏的debug按钮，出现如下界面：

如果直接点击“运行和调试”，则会出现以下提示，我们点击取消。

继续看第一张图的“创建launch.json”，点击该按钮，然后选择Node.js。我们回到资源管理器，看到该文件夹下多出现一个文件夹.vscode，该文件夹下多出一个文件launch.json。根据个人需要运行的文件，进行配置即可。

配置好后，点击debug，点击“启动程序”，即可进入调试模式。

本来想要调试webpack的，但是出现了两个问题：1. 由于配置的webpack.config.js文件不在根目录下，所以需要指定webpack-cli运行时的配置文件不知道如何配置，后来看到lacunch.json文件中可配置args，配置了之后webpack运行报错 2. 将webpack.config.js文件挪到根目录下后，还是报错，看起来是运行时的上下文有问题

vscode的配置参考文档：code.visualstudio.com/docs/editor…