参考：

一、介绍

有些时候，自己写一些js，但是想打断点调试的时候，却只能起一个html文件，然后放到浏览器里头打断点调试，感觉特别多余。所以这里介绍一种vscode调试HTML和JS文件的方法，四步就能学会，不过文中没有做太多延伸。

二、调试JS文件步骤如下：

首先是调试JS文件，有两种方法：

(一)安装Code Runner 插件，然后选中需要运行的JS代码，就可以直接运行，结果在输出窗口打印。

示例如下：

（二）第一种方法优点是安装简单，但是缺点是不能断点调试。所以以下主要介绍第二种方法。

第一步先找一个空白文件夹，写一个js文件，代码内容比如以下：
```
var a=1;
var b=2;

while (a<4){
    a++;
    console.log(a+b)
}
```
然后选择创建 launch.json 文件，选择Node.js，然后进行部分修改；

  {
      "version": "0.2.0",
      "configurations": [
          {
              "type": "node",   //用来启动js
              "request": "launch",  
              "name": "debugJS",    //  修改启动的名字
              "skipFiles": [
                  "<node_internals>/**"
              ],
              // "program": "${workspaceFolder}\\debug.js"  //默认生成的指向文件的地址
              "program":"${file}",  //表示此时打开的文件
          }
      ]
  }

对js文件打上断点，然后按下F5或者选择开始按钮进行调试：如图：
结果如下，表明JS文件代码调试完成。如图：

三、调试HTML文件步骤如下：

找一个文件夹创造一个HTML文件，比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>debugHTML</title>
</head>
<body>
    <div id="odiv">debugHTML</div>

    <script>
        var odiv=document.getElementById("odiv")
        var num=0;
        var timer=setInterval(() => {
            num++;
            console.log(num)
            odiv.innerHTML=num
            if(num===5){
                clearTimeout(timer)
            }
        }, 1000);
    </script>
</body>
</html>

安装一个debugger-for-chrome的插件呗；

在luanch.json文件中添加调试html文件的配置

        {   
            "type": "chrome",   //用来启动chrome浏览器
            "request": "launch",  
            "name": "debugHTML",    //  修改启动的名字
            "sourceMaps": true,
            "webRoot":"${workspaceFolder}",
            // "userDataDir": "${tmpdir}",    //会自动生成一个${tmpdir}文件名，如果报错可以开启这个选项
            "file":"${file}",  //更改属性名为"file"，属性值此时表示此时打开的文件，就不需要手动改文件路径了。
            // "port":8090
        }

在HTML文件中的js部分打上断点，选择该 debugHTML配置，按下F5或者选择开始按钮进行调试。如图：

四步学会VSCode调试JS与HTML文件

参考：

一、介绍

二、调试JS文件步骤如下：

(一)安装Code Runner 插件，然后选中需要运行的JS代码，就可以直接运行，结果在输出窗口打印。

（二）第一种方法优点是安装简单，但是缺点是不能断点调试。所以以下主要介绍第二种方法。

三、调试HTML文件步骤如下：