背景
看@vant/weapp源码,发现源代码和发包的代码不是同一份,源代码会经过一系列的编译转成最后的发包文件夹dist和lib,想看一下编译过程,于是研究了开发工具的源码调试
vscode调试
看了执行npm run dev,是执行了build/compiler.js这个文件
- 打开compiler.js,快捷键
ctrl + shift + d出现一个弹框,选node.js:
新建一个
create a launch.json file,加入配置:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
{"name":"Python Debugger: Current File","type":"debugpy","request":"launch","program":"${file}","console":"integratedTerminal"},{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\build\\compiler.js"
}
]
}
然后点击如下图所示,就会进入断点
这个
create a launch.json在.vscode下面,可以打开修改
webstorm调试
run > Edit Configurations- 带那几左上角
+添加调试配置
- 选择
node.js
- 然后运行调试,出现如下界面就是配置成功了,需要手动连接:
Chrome 浏览器中输入
chrome://inspect,然后点击 "Configure...",添加手动连接,输入127.0.0.1:9230,然后点击 "Inspect" 尝试手动连接调试器
我这样操作确实进到调试界面了,但是断点乱跳,都不是我自己打的断点,不知道哪里有问题,
vscode是完全可以调试的