开发工具调试源码

210 阅读1分钟

背景

@vant/weapp源码,发现源代码和发包的代码不是同一份,源代码会经过一系列的编译转成最后的发包文件夹dist和lib,想看一下编译过程,于是研究了开发工具的源码调试

vscode调试

看了执行npm run dev,是执行了build/compiler.js这个文件

  • 打开compiler.js,快捷键ctrl + shift + d 出现一个弹框,选node.js:

企业微信截图_17204324417715.png 新建一个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"
        }
    ]
}

然后点击如下图所示,就会进入断点

企业微信截图_17204327474940.png

这个create a launch.json.vscode下面,可以打开修改

webstorm调试

  • run > Edit Configurations
  • 带那几左上角+添加调试配置

企业微信截图_1720433230391.png

  • 选择node.js

企业微信截图_17204340176463.png

企业微信截图_17204340425804.png

  • 然后运行调试,出现如下界面就是配置成功了,需要手动连接: Chrome 浏览器中输入 chrome://inspect,然后点击 "Configure...",添加手动连接,输入 127.0.0.1:9230,然后点击 "Inspect" 尝试手动连接调试器

企业微信截图_17204341381855.png

我这样操作确实进到调试界面了,但是断点乱跳,都不是我自己打的断点,不知道哪里有问题,vscode 是完全可以调试的