vscode断点调试工程化客户端文件

一、调试webpack配置文件

launch.json的配置如下，在webpack.dev.config.js文件中设置断点，开始调试。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "附加到端口",
            "address": "localhost",
            "port": 5858
        },
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "program": "${workspaceFolder}/build/webpack.dev.config.js"
        }
    ]
}

二、调试根文件或者jsx文件

1、launch.json的配置如下。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "启动一个独立的chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "监听一个已经启动调试模式的chrome",
            "port": 9222,
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

如果要调试源码（不是编译后的代码），需要加"sourceMaps": true。

2、先启动项目

npm run dev

3、在main.js文件或jsx文件中设置断点，启动调试。