Loading...
墨滴

日尧

2021/10/23  阅读:35  主题:全栈蓝

啥年代了,还不会在vscode中调试js?

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的解释不够很清楚,因为也不是一时半会能讲完的,后续会针对该插件写一篇更加详细的事情方法,希望大家多多关注

日尧

2021/10/23  阅读:35  主题:全栈蓝

作者介绍

日尧