轻松玩转VSCode中Debugger调试

一诺滚雪球
2,510 阅读4分钟

前言

对于前端来说，vscode调试是我们必须要掌握的技能包。可能我们会简单的调试，但是不知道调试有哪些方式，也不清楚调试中launch.json配置的作用。

本文介绍下在vscode中调试的几种方式，使用launch.json配置文件中两种模式的区别。

主要内容如下图所示：

image.png

1. 终端调试

终端调试：主要在终端中运行程序命令，从而进入调试模式。

有两种方式：

  1. JavaScript Debug Terminal(debug 终端)
  2. 默认终端+设置smart模式

下面一一介绍:

1.1 使用JavaScript Debug Terminal(debug 终端)

直接启动一个debug模式的终端, 在里面启动的node都会进入debug模式。

具体步骤：

  1. 打开一个新终端，下拉选择JavaScript Debug Terminal

image.png

  1. 运行程序命令 node index.js

image.png

上面的方式，是每次都需要切换到JavaScript Debug Terminal终端，有没有不用切换特定的终端，也可以直接进入调试。

答案是有的，接下来看Auto Attach。

1.2 Auto Attach: Smart

上面的方式每次都需要开一个额外的终端进行调试，Auto Attach 的特性，它可以在不切换 shell 的方式直接调试 node.js。

具体步骤如下：

  1. 使用快捷命令ctrl + shift + p,输入Toggle Auto Attach,选择 Smart。

image.png

  1. 新建普通终端运行node index.js直接进入调试模式

image.png

可在 vscode 的设置中，可以找到关于 Smart 模式下允许执行的脚本列表。

image.png

2. 侧边栏Debug调试

vscode中的默认debug栏，可以默认或者使用配置文件启动。

2.1 无launch.json

无配置文件，直接点击Run and Debug，默认是调试当前文件。

image.png

会进入当前文件的调试

image.png

2.2 有launch.json配置文件

启动配置是以一种配置文件的方式去设置如何启动debug模式的方式, 提供更加配置化去满足运行调试需求。

具体步骤：

  1. 正常初次调试，点击debug的右侧侧边栏，点击create a launch.json file。

image.png

  1. 选择运行的环境，不同的语言选择不同

image.png

  1. 选择node.js,根目录下的会创建.vscode/launch.json文件

image.png

默认内容如下

image.png

其中有三个通用参数：

  • type: 运行环境
  • request：launch 或 attach
  • name：调试启动的名称

可以配置是一个数组，提供下拉列表供调试使用。

下面主要说明（launch和attach）两种调试方式的区别：

先写一段js程序,用原生node写一个简易服务器

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('Hello World\n');
})

server.listen(3000, () => {
    console.log(`Server running at http://localhost:3000`);
})

2.2.1 launch

定义launch方式，点击生成，默认如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}\\index.js"
        }
    ]
}

点击调试

image.png

访问http://localhost:3000

image.png

程序中加断点，然后刷新3000页面，就进入调试模式

image.png

launch模式是一个未启动的程序，但是当程序已经启动，不用重新启动，如何添加断点，就使用attach。

2.2.2 attach

需要配置一个attach模式，使用快捷方式，如下图所示：

image.png

会多出来一条配置

{
    "name": "Attach by Process ID",
    "processId": "${command:PickProcess}",
    "request": "attach",
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "node"
},

具体调试步骤：

  1. 先运行node程序

image.png

  1. 启动debug

image.png

  1. 选择进程id

image.png

  1. 此时终端会添加debugger attached，默认给程序添加调试器

image.png

  1. 刷新页面

image.png

至此就完成了不用重新断开程序就完成调试。

2.3 两种调试方式总结

总结launchattach
作用vscode负责启动程序并给程序搭建一个调试器为一个已经在运行且暂不支持调试的程序（通常是一个正在运行的web应用程序）加一个调试器
需要几方合作12
使用场景日常开发远程调试、本地开发的一些特殊情况

2.4 vscode快捷方式调式

正常快捷方式f5即Start Debugging调试,会默认读取launch.json的配置文件，进入调试。而Run Without Debugging是不添加调试器，相当于没有添加调试器去启动命令。

如下图所示：

image.png

3. 总结

主要介绍在 VSCode 中如何进行 JavaScript 的调试：

  • 终端方式
    • JavaScript Debug Terminal：通过特定的 debug 终端启动的程序都能够进入调试模式。
    • Auto Attach Smart：这种方式更加方便，不用切换终端的情况下，直接进入调试模式。
  • 侧边栏调试方式
    • 无 launch.json 配置：在没有配置文件的情况下，VSCode 会默认调试当前打开的文件。
    • 有 launch.json 配置文件：用户可以通过配置 launch.json 文件来定制调试行为
  • 两种调试方式的区别：
    • Launch：适用于启动新的程序进行调试。通过 launch.json 配置文件启动程序并进入调试模式。
    • Attach：适用于已经运行的程序进行调试。它通过附加调试器到正在运行的 Node.js 进程来进行调试。

如有错误，请指正O^O!

可以接着看：

轻松使用VSCode调试(TS、C/C++、Python、Rust)

轻松使用VSCode调试vue项目

参考文档

官方debug文档

avatar
文章
阅读
粉丝