vscode调试webpack项目的方法

vscode调试webpack项目的方法

首先安装vscode插件Javascript Debugger

 这个插件的介绍也写清楚了： An extension for debugging Node.js programs and Chrome.

那就是用来调试Node.js和Chrome的vscode扩展插件，包括typescript.

然后按F5启动调试，此时会提示编辑launch.json文件，将下面的内容写进去：

{

    "version": "0.2.0",

    "configurations": [

        {

            "type": "pwa-chrome",

            "request": "launch",

            "name": "Launch Chrome against localhost",

            "url": "http://localhost:7002",   // webpack项目启动时的web访问地址和端口        

            "webRoot": "${workspaceFolder}/src",

            "sourceMapPathOverrides": {

                "webpack:///src/*": "${webRoot}/*",

                "webpack:///*": "${webRoot}/*"

            }

        }

    ]

}

注意： 上面url是指webpack项目启动以后的访问地址和端口。

launch.json文件位于当前项目的.vscode目录下：

然后重启vscode，这个很重要！

接着照常通过npm start/或者yarn start命令启动你的webpack项目（比如react）

然后按F5启动调试，并提前打好断点。

vscode会自动打开一个浏览器窗口，并访问上面指定的url地址。

注意：一定访问vscode打开的那个浏览器窗口，否则调试无效！

当你关闭这个浏览器窗口时，vscode调试模式也会自动终止！

当访问能触发该断点的浏览器链接/api接口时，vscode会自动跳到该断点，

而且鼠标悬停到某变量时，vscode就会自动显示该变量的值：