server vscode中的live_VSCODE 调试 Javascript

调试前端代码

1. console.log
2. 在代码中 debugger
3. 使用 chrome dev tools 打断点

1. watch 添加想要追踪的变量
2. 调用堆栈
3. 函数内局部变量
4. 这个 js 文件内的变量
5. 全局变量
6. 可以把自己本地的代码文件夹添加进来，这样在 chrome dev tools 里改动的代码会同步到本地的代码

4. 使用 vscode 的扩展 debugger for chrome

接下来详细说下这个扩展的用法，装好以后就可以在 vscode 里面调试代码了。

先看下我的文件结构

点开调试的虫子，再点打开 launch.json，就能看到如下界面

我配置了两种调试方式，上面的是配合 live-server 使用，下面的是使用文件协议打开。下面的直接点调试就可以了，上面的需要先打开 live-server，然后如果和我一样目录里有好几个 html文件的话，就把 url 那一行改成相应的地址就可以了。两种调试方式都是新开一个 chrome 窗口，还有一个调试方法是使用 attach 模式，不过不建议用这个，很麻烦，需要打开 chrome 的 remote debug 模式，这里不再赘述。

调试 node 代码

还是和前面的一样，不过这次我配置了三种调试方式，基本满足了日常的使用场景

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach by Process ID",
            "processId": "${command:PickProcess}",
            "skipFiles": [
                "<node_internals>/**"
            ]
        },
        {
            "type": "node",
            "request": "launch",
            "name": "启动程序",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}app.js"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Node: Nodemon",
            "processId": "${command:PickProcess}",
            "restart": true,
            "protocol": "inspector",
        }
    ]
}

上面的配置文件中频繁出现的 process 的意思是 当 node app.js时，会开一个进程，而 debug 的话，vscode 会帮你开一个 debug 的进程附加到 node 开的进程上。

第一种方式就是手动 node app.js，然后 debug，然后选择要附加的 node 进程即可。

这里选择 node 开头的，app.js那个。

第二种方式就是类似于 idea 或者 pycharm 的那种调试方式，点击调试自动帮你运行代码。

第三种方式是配合 nodemon 使用的。

先加上 deubg 的script：

然后在命令行里运行 npm run debug，然后再选择第三种调试方式，同样选择 node 开头 app.js 结尾的进程，就可以一边运行 nodemon 一边调试啦~这种调试方法的好处是可以随时改代码，并且会重新跑程序，这样很容易改掉错误。