js说：你会在vscode中调试我吗？

暗夜本耶
1,234 阅读4分钟

js说：你会在vscode中调试我吗？(js said: can you debugger me in vscode)

兄弟姐妹们，您说这话谁听见，能忍住？

说在开头

最近正在刷题，需要在VS Code中调试js代码，调试也是选择了最简单的、最low的调试方式，但是这些方法感觉还是比较低效的，很浪费时间。

如果在vs code中更优雅的调试js，就可以解决掉这个问题。

下面我们先列举一下所有调试js的方式。

低效调试js的方式

下面列举的是低效的调试js的方式，而且仅限于想知道**「一段代码的执行结果」**

一、通过node执行某个文件

通过node xxx.js 我们可以执行这个文件，但是仅限于console.log，但是当你想看每段代码的具体的执行顺序以及执行时的变量，这时是无法实现的(当然可能有，但是我不知道，哈哈哈哈)

二、通过nodemon执行某个文件

nodemon是一个帮助nodejs开发者高效开发nodejs的工具，当检测到文件发生变化时会自动重新启动node程序，无需手动执行node xxx.js,有点类似于webpack的热重载.

那么nodemon该如何使用呢

  1. 安装nodemon

通过npm install -g nodemon进行安装

  1. 执行命令

在安装完毕之后，可以直接使用nodemon youDebuggerFiles, youDebuggerFiles可以是相对路径，可以是绝对路径。这样之后，nodemon就会自动监听文件的修改了，同时针对文件的修改做出响应

高效调试js的方式

高效调试js的方式肯定不仅仅是console某个变量了，同时还包含debugger调试。

一、通过html文件映射到浏览器调试

  1. 首先创建一个js文件，js文件内是我们要调试的代码
  2. 创建一个html文件，通过script标签将js文件引入 「(此时有一些小可爱就问了，为啥不直接在html中通过script标签写js代码呢，我只想说个人习惯问题，我习惯于将其分离，各司其职)。」
  3. 下面就是在vs code中将html文件打开了，这里有两种方式 一种是通过open in browser插件打开，二是通过Live Server打开(两者在vscode商店中直接搜索就可以了)，两者的区别在于更新代码后，前者需要手动刷新浏览器，后者会自动监听文件的变化从而做出响应。
  4. 如果是console的话，那么直接打开devTools就可以看到了，如果是代码中的debugger，那么就直接开始调试了，还有一种方式就是在**「source面板」**中找到对应的文件，然后在左侧打断点调试。

上面这种方法我们需要多生成一个HTML文件，然后到浏览器里面去调试，那么有什么方法可以直接在VS Code中不借助HTML文件调试呢，接下来就有请我们今天的主角出**「厂」**。

二、在vscode 内部调试

我们可以借助一个插件，来实现开发工具内调试，Debugger for Chrome，一个神奇的插件，可以帮助我们实现上述功能。当然我们这里只调试js，不调试vue和react和其他的代码

debugger for chrome的使用步骤

  1. 我们去vscode商店中找到这个插件下载
  2. 下载完毕后，我们可以看到在vscode左侧多出了一个小图标
  3. 点击小图标进去之后，我们点击配置按钮，进入到配置文件中(配置文件在当前vscode中打开目录下的 ./.vscode/launch.json 中)
  4. 在下面的文件中我们添加配置，我们可以输入代码添加配置，也可以点击**「右下角的添加配置按钮」**去添加
  5. 配置内容
{
  "type": "pwa-node",
  "request": "launch",
  "name": "debugger",
  "program": "${workspaceFolder}/ig/test/index.js"
},

* name：当前配置的名字，可以再配置的下拉列表中展示出来
* request: 请求类型，分为launch和attach
* type: 有node和chrome之分
* program: 是要调试的文件目录所在,注意${workspaceFolder}是当前的根目录

❝

一定要注意这里的program，这个配置很重要，只有配置了这个，才可以在vscode中调试js 只要配置了上述四个配置，那么就可以正常的调试文件了

❞

  1. 在要调试的文件的某一行最左侧点击一下，出现一个小红点

  1. 在debugger内点击绿色的小三角，开始调试
  2. 后续就可以欢快的进行调试了

最后介绍一下debugger几个按钮的作用

  1. 到下一个断点时停住
  2. 不管遇没遇到函数都直接执行下一步
  3. 没遇到函数时，进入下一步，遇到函数时，直接进入函数内部
  4. 跳出当前函数
  5. 重新运行debugger
  6. 结束调试

最后的最后

今天对于debugger for chrome的解释不够很清楚，因为也不是一时半会能讲完的，后续会针对该插件写一篇更加详细的事情方法，希望大家多多关注

avatar
文章
阅读
粉丝