序言做前端开发的朋友经常需要使用Visual Studio Code编辑代码,很多朋友就想在VSCode调试JS代码,下面我们就介绍下如何配置操作 。
一、环境准备首先安装好VSCode,准备好一个JS项目,在VSCode中安装插件Debugger for Chrome (如下图操作搜索安装即可) 。

文章插图
二、修改配置文件1. 使用VSCode打开项目没有可以测试项目的可以使用HBuilder等工具新建一个Web项目进行测试,如下:

文章插图
【如何使用VSCode调试JS?】
然后,使用VSCode打开上述项目,如下:

文章插图
2. 设置断点

文章插图
按F5键,在弹出的下拉列表中选择Chrome 。

文章插图
然后打开launch.json配置文件如下:

文章插图
在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)\google\Chrome\Application\chrome.exe", // 改成您的 Chrome 安装路径`8.`"sourceMaps": true,`9.`"webRoot": "${workspaceRoot}",`10.`//"preLaunchTask":"build",`11.`"userDataDir":"${tmpdir}",`12.`"port":5433`13.`}`
添加后,内容如下:
文章插图
3. 更改调试方式

文章插图
4. 调试如下图,按F5,点击相应的按钮或按响应快捷键即可控制断点执行 。

文章插图

文章插图
最后
还有问题的朋友,欢迎在评论区给我留言 。
推荐阅读
- 如何下载IOS系统固件
- 有关Google使用Go的新案例研究
- 精准营销的三维度,如何引起消费者共鸣
- 黄山毛峰的品质特点,如何辨别黄山毛峰的好坏
- 手机上如何把多个视频合成一个?拼视频的技巧安利
- 在命令行中使用 nmcli 来管理网络连接
- 嵌入式使用emWin进行GUI图形设计教程
- 客厅电视墙如何设计
- 客厅电视背景墙要如何装修
- 如何对竞争对手分析