学习笔记：VSCode 前端调试工具

学习JavaScript，中间少不了折腾，走冤枉路。

在找调试工具的过程中，知道了VSCode的lanuch.json的配置文件，弄清了前端调试、后端调试（冤枉路没少走）

对于前端调试，一个可行的方法是VSCode + Debugger for Chrome.

 

Debugger for Chrome需要是一个VSCode的扩展插件，自行安装，安装后重启VSCode

 

需要配置，lanuch.json

远程调试的内容如下：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome", //调试类型 
            "request": "launch", //调试启动方式 launch:每次重新加载  attach:附加到已有浏览窗口
            "name": "前端Chrome", //自定义的名字
            "url": "http://localhost:8000/",  //本地需要开启服务 开启服务方式如 npm start等
            "webRoot": "${workspaceFolder}/src"    //本地资源路径 按照工程自行设置
        }
    ]
}

本地调试的内容如下

"configurations": [
        {
            "type": "chrome", //调试类型 
            "request": "launch", //调试启动方式 launch:每次重新加载  attach:附加到已有浏览窗口
            "name": "前端Chrome", //自定义的名字
            "file": "${workspaceFolder}/test.html" //浏览器需要加载的本地文件
        }
    ]

 

配置好之后，就可以在VSCode的编辑器里面，直接给js添加断点了