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

一、背景

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

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

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

vscode的script里书写HTML,VSCode调试Html中的脚本_第1张图片

vscode的script里书写HTML,VSCode调试Html中的脚本_第2张图片

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

vscode的script里书写HTML,VSCode调试Html中的脚本_第3张图片

三、Chrome调试问题

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

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

2812d646fabca817f423039dd494477f.png

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

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

vscode的script里书写HTML,VSCode调试Html中的脚本_第4张图片

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

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

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

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

4.重新整理后

vscode的script里书写HTML,VSCode调试Html中的脚本_第5张图片

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

vscode的script里书写HTML,VSCode调试Html中的脚本_第6张图片

四、总结

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

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

你可能感兴趣的:(vscode的script里书写HTML,VSCode调试Html中的脚本)