vscode调试webpack项目的方法

- 日理万妓 2023-10-16 13:48 33阅读 0赞

**首先安装vscode插件Javascript Debugger**

![4849443aeba346e38a4d7745fcaeab7c.png][]

这个插件的介绍也写清楚了： 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目录下：**

![36ea6dc4a2b34dbeb74a44004a799afa.png][]

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

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

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

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

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

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

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

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

![8b4f0031a22e4393bc41ccbafd59ad67.png][]

[4849443aeba346e38a4d7745fcaeab7c.png]: https://img-blog.csdnimg.cn/4849443aeba346e38a4d7745fcaeab7c.png
[36ea6dc4a2b34dbeb74a44004a799afa.png]: https://img-blog.csdnimg.cn/36ea6dc4a2b34dbeb74a44004a799afa.png
[8b4f0031a22e4393bc41ccbafd59ad67.png]: https://img-blog.csdnimg.cn/8b4f0031a22e4393bc41ccbafd59ad67.png