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

前言

无论是在工作中还是调试源码，调试工作都是必不可少的，找到正确的调试方法，能让我们的工作效率提升至少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如下

{
  
  
  
  "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",     
      "request": "launch",  
      "name": "Launch Program",    
      "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",  
      "webRoot": "${workspaceFolder}"   
    },

react

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

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

vue调试

首先我们按照官网一步步创建项目

npm init vue@latest

按照下面的步骤创建launch.json文件

修改了launch.json的url属性，和本地启动的服务相对应

然后修改一下src下面的helloworld组件

添加一个点击方法

接着打上断点

接着点击launch按钮

点击我们的output方法绑定的元素

vscode会自动定位到打断点的地方

good, 小伙伴们，快按照上面的步骤试试吧，你的摸鱼时间+1