序言
做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作。
一、环境准备
首先安装好VSCode,准备好一个JS项目,在VSCode中安装插件Debugger for Chrome (如下图操作搜索安装即可)。
![5d932d9c6392b64e62f22925b7fe4ed5.png](https://i-blog.csdnimg.cn/blog_migrate/2232d0c3cc64be04f7cc4cec6e0267cc.jpeg)
二、修改配置文件
1. 使用VSCode打开项目
没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试,如下:
![78ce7efec1503eba718509fd97a16e3b.png](https://i-blog.csdnimg.cn/blog_migrate/f071d5cfc2328df8cca7f1d4dfb51495.png)
然后,使用VSCode打开上述项目,如下:
![b60409f8b9805cb414a3e1cbffa3dc63.png](https://i-blog.csdnimg.cn/blog_migrate/8aae4b16186ea071d7d8217d4d5e7974.jpeg)
2. 设置断点
![fc9a5a4da5930067d5f8975e07f0be32.png](https://i-blog.csdnimg.cn/blog_migrate/cf81336d25d8841d92f6364b9bc1a10c.png)
按F5键,在弹出的下拉列表中选择Chrome。
![79d41ad97bcf2c28418aba6f9c6afa82.png](https://i-blog.csdnimg.cn/blog_migrate/dec2334795238ff47f5edf0c9a6da611.png)
然后打开launch.json配置文件如下:
![dd4c16a67e4e3926aa574d0ecc1edc73.png](https://i-blog.csdnimg.cn/blog_migrate/38402903195a40247f2f017340c2cc4d.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. `}`
添加后,内容如下:
![0315aae8d36444ca174c9c1d0ea138d2.png](https://i-blog.csdnimg.cn/blog_migrate/b236b73932537a2870635eb0507f0578.jpeg)
3. 更改调试方式
![94228a97a032edc5b018bff290241a45.png](https://i-blog.csdnimg.cn/blog_migrate/d5374cf15b2dbdfdfbe9ef3a1aa65677.png)
4. 调试
如下图,按F5,点击相应的按钮或按响应快捷键即可控制断点执行。
![ea7705dd22832a2e0f3133bd466b818d.png](https://i-blog.csdnimg.cn/blog_migrate/04b2686ed383dedf16d49fb90603a9f0.jpeg)
![933f8c10833cf543e696947fed427f98.png](https://i-blog.csdnimg.cn/blog_migrate/f14f68603ca616fb49f645cc090cc86b.jpeg)
最后
还有问题的朋友,欢迎在评论区给我留言。
![cb39f44dd90bacd770ae305664366aa2.png](https://i-blog.csdnimg.cn/blog_migrate/3735054c01a711cf5d44996eda88cb9f.png)
这里大家也可以关注一下我的个人专栏《博毅游戏栖息地》,每天都会给大家即时分享一个最新的游戏资讯,有优秀的开发技术内容,也欢迎大家分享在我的专栏。
博毅游戏栖息地zhuanlan.zhihu.com![c4a524a5761c57b2a902d157a52cc95e.png](https://i-blog.csdnimg.cn/blog_migrate/7d08a8b20e1e5746a1eca513b42fe993.jpeg)