vscode的script里书写HTML,VSCode调试Html中的脚本

一、背景

使用Visual Studio Code写了一个简单的Html页面，想调试下其中script标签里的javascript代码，网上查了一通，基本都是复制粘贴或者大同小异的文章，就是要安装Debugger for Chrome插件，修改launch.json配置信息，F5启动，这些都照做了，但是仍有两个问题，一个是Html文件里不能打断点，只能在js文件里面打，二是chrome打开后说连接不到localhost，下面分别讲讲是怎么解决。

二、Html文件中不能打断点问题

默认情况下，VSCode是不能在Html文件里打断点的，但是可以修改设置，依次打开：文件->首选项->设置，然后功能->调试->勾选上“允许在任何文件中设置断点”。

这样就可以在Html的script标签中打断点了，如果断点打在其他html标签上，VSCode会提示“未验证的断点”

三、Chrome调试问题

(1)请先打开一个文件夹以进行高级调试配置

一开始，我直接新建了一个html文件，然后运行那里显示没有配置，按齿轮图标提示：

查阅资料发现，要用VSCode打开文件所在的文件夹才能进行调试。

(2)Chrome运行后提示无法访问此网站

开始遇到这个问题，网上查了一圈没发现和我一样情况的，一开始以为是端口占用，改了也不行，看路径不对，手动补全，也不行，后来发现我用的是默认生成的launch.json，照着网上的方法添加了一段配置，就可以了，仔细看了下新加的配置，是可以简化的，下面说明下。

1.说是要更改调试方式，选择“使用本机 Chrome 调试”，我没找到这个选项，后来才知道这个是launch.json里面自己写的name。

2.file直接指向了具体的文件，那岂不是有多个文件我就要写多个配置？而我只是希望在哪个文件按的f5，就直接打开哪个页面就行了，所以设置为${file}即可。

3.有几个配置项其实用默认值就可以了。

4.重新整理后

另外还有个情况，如果开了两个VSCode，即使端口号设置不同，也不能同时运行调试，会报以下错误，不知道有没有解决办法：

四、总结

介绍了如何调试HTML文件中的脚本以及chrome调试遇到的问题。

如果只是要用浏览器打开，不需要断点调试的话，可以装另外一个插件：open in browser