vscode调试代码，效率提升20%你信不信

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

前言

无论是在工作中还是调试源码，调试工作都是必不可少的，找到正确的调试方法，能让我们的工作效率提升至少20%，那样我们又可以多出20%的时间去摸鱼了，摸鱼使我快乐(^▽^)

从此让我们抛弃console.log老破车，换debugger跑车

调试初始化

先举个例子，比如我们要调试lerna源码

因为我们调试源码要在终端调试，所以选择node

初始的终端调试配置如下

常用属性详解

必需属性

修改的比较多的应该是name了, 另两个在node中, 一般都不会修改.

属性名	含义	属性值示例
type	调试器类型, 也可以认为是调试的语言	`node => pwa-node`, `chrome => pwa-chrome`
request	启动`debug`的模式的请求类型,只有两个值	`launch`:启动(常用), `attach`:附加
name	此个启动配置的名称, 用于用户自己区分	自定义, 自己理解就行, 给你自己用的

其他常用属性

属性	含义
outFiles	指定`Source maps`文件所在路径
skipFiles	指定单步跳过的文件, 就是`debugger`不跟进去看的源代码
program(只有launch才有的属性)	启动项目的入口文件地址(就是要执行的`js`的路径，一定要精确到`js`)
webRoot(只有launch才有的属性)	路径为代码的根目录
url(只有launch才有的属性)	要监听的服务器地址

Notice: 有时候不能很好的命中断点就是因为program和webRoot配置的不对

这里面最主要的属性就是program(program的中文是程序的意思，在这里指要运行的程序文件路径)了，调试源码一定要找到入口文件，而这个program就指向入口文件，lerna的入口文件地址为 lerna/core/lerna/cli.js,所以我们要让program指向这个地址，此时我们的launch.json如下

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Lerna源码调试",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/core/lerna/cli.js"
    }
  ]
}

调试流程

在源码中打上断点

点击vscode左侧的debug工具
然后选择我们配置的调试文件
点击绿色调试按键，开始debugger

此时命中了我们的断点

我们可以在这里输入要查询的参数

左侧会出现变量，执行栈，breakpoint等信息

VSCode Debug按钮功能介绍

按钮从左到右功能依次为：

按钮1：运行/继续 F5，直接跳转到下一断点；
按钮2：单步跳过(又叫逐过程) F10，按语句单步执行。当有函数时，不会进入函数；
按钮3：单步调试（又叫逐语句） F11：当有函数时，点击这个按钮，会进入这个函数内；
按钮4：单步跳出 ⇧F11:如果有循环，点击该按钮，会执行到循环外面的语句；
按钮5：重启 ⇧⌘F5；
按钮6：停止 ⇧F5。

node 文件调试

在根目录新建一个node文件，命名为node.js

按照上面调试流程创建launch.json文件, 如下

{

  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-node",     // type主要分为chrome和node，因为我们调试node代码，所以这里是node
      "request": "launch",  // 这个可以理解为固定的，启动
      "name": "Launch Program",    // 启动的名称，用于和其他launch区分
      "skipFiles": [
        "<node_internals>/**"
      ],
      "program": "${workspaceFolder}/node.js"  
    }
  ]
}

program的文件地址指向我们创建的node.js文件

notice: 如果发现断点无效，那么原因有可能是包含断点的函数你没有调用，一定要调用才能生效

接下来按照调试流程操作就可以了

node的debugger模式

就是有时候我们要使用命令行去启动一个文件，希望这时候也能触发我们的断点，该怎么做呢

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

chrome 调试

在根目录下新建一个html文件，命名为index.html

在launch.json中新添加一个configurations

  {
      "name": "Launch Chrome",  
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:8088",  //liveServer服务器地址
      "webRoot": "${workspaceFolder}"   // 路径为代码的根目录
    },

react

使用create-react-app生成react代码，并新建myapp文件目录

  {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/myapp"
    },