序言
做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作。
一、环境准备
首先安装好VSCode,准备好一个JS项目,在VSCode中安装插件Debugger for Chrome (如下图操作搜索安装即可)。
![b727d79f3230295e0301a34f8822ffcf.png](https://img-blog.csdnimg.cn/img_convert/b727d79f3230295e0301a34f8822ffcf.png)
二、修改配置文件
1. 使用VSCode打开项目
没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试,如下:
![ff26ac6dc5f871c9705cfc8ea37b471b.png](https://img-blog.csdnimg.cn/img_convert/ff26ac6dc5f871c9705cfc8ea37b471b.png)
然后,使用VSCode打开上述项目,如下:
![5fa89e48a014041f1b393c400b907832.png](https://img-blog.csdnimg.cn/img_convert/5fa89e48a014041f1b393c400b907832.png)
2. 设置断点
![ad5d65e17eb31bcc23a835ef19eda479.png](https://img-blog.csdnimg.cn/img_convert/ad5d65e17eb31bcc23a835ef19eda479.png)
按F5键,在弹出的下拉列表中选择Chrome。
![454d4a4767b476a6ab292888ab2fa1e0.png](https://img-blog.csdnimg.cn/img_convert/454d4a4767b476a6ab292888ab2fa1e0.png)
然后打开launch.json配置文件如下:
![d5a9ad332903740ee5d542d4932fddd9.png](https://img-blog.csdnimg.cn/img_convert/d5a9ad332903740ee5d542d4932fddd9.png)
在configurations内部添加如下内容:
1. `{`2. `"name": "使用本机 Chrome 调试",`3. `"type": "chrome",`4. `"request": "launch",`5. `"file": "${workspaceRoot}/index.html",`6. `// "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html`7. `"runtimeExecutable": "C:Program Files (x86)GoogleChromeApplicationchrome.exe", // 改成您的 Chrome 安装路径`8. `"sourceMaps": true,`9. `"webRoot": "${workspaceRoot}",`10. `// "preLaunchTask":"build",`11. `"userDataDir":"${tmpdir}",`12. `"port":5433`13. `}`
添加后,内容如下:
![ebac4f2be16e79c5752ce85b1e9517cc.png](https://img-blog.csdnimg.cn/img_convert/ebac4f2be16e79c5752ce85b1e9517cc.png)
3. 更改调试方式
![91fdc2ac6f61a37e292605443172063c.png](https://img-blog.csdnimg.cn/img_convert/91fdc2ac6f61a37e292605443172063c.png)
4. 调试
如下图,按F5,点击相应的按钮或按响应快捷键即可控制断点执行。
![6f84dc767914c77d6b28b2ef665bbd80.png](https://img-blog.csdnimg.cn/img_convert/6f84dc767914c77d6b28b2ef665bbd80.png)
![3a64cc612b367b91bd76c5af78665925.png](https://img-blog.csdnimg.cn/img_convert/3a64cc612b367b91bd76c5af78665925.png)
最后
还有问题的朋友,欢迎在评论区给我留言。
![168569a083a4439f85dd0d49bcf544d6.png](https://img-blog.csdnimg.cn/img_convert/168569a083a4439f85dd0d49bcf544d6.png)