debugger调试工具配置

一、编码工具

Visual Studio Code 

二、安装扩展工具

Debugger for Chrome(最新的Vscode版本已废弃)

Code Debugger

三、创建lauch.json文件

lauch.json文件是vscode用于调试的配置文件，比如指定调试语言环境、指定调试类型等。其中type、request、name是必须要配置的。

我们有两种方法打开这个lauch.json文件。

方式1：找到.vscode文件夹，从中找到lauch.json文件，打开它。

方式2：步骤如图示

点击“创建lauch.json文件”---》Node.js

 

//lauch.json
{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

Chrome浏览器配置

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "Chrome",
            "request": "launch",
            "name": "vuejs:chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true，
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*" 
            }
        }
    ]
}

四、调试

然后就能在需要打断点的地方加上debugger啦~

直接在代码区打印变量值的功能是在较新版本的chrome浏览器才新增的功能，此时将鼠标移动到变量名上短暂的停顿会出现变量值。或者也可以鼠标选中变量名称，然后右键“add to watch”在watch面板中查看，此方法同样适用于表达式。

此外我们还可以在断点情况下切换到console面板，直接在控制台输入变量名称，回车查看变量信息。