这几个 JavaScript 断点调试技能你有必要掌握!
The following article is from 大转转FE Author 陈亦涛
为什么要使用 debugger
这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前,需要问一个问题:为什么要使用断点来进行调试?
我们首先需要认可使用断点的是必要的,否则下文介绍的所有断点调试方法都会是废话。console.log
是前端开发最常用的调试手段,它简单直接解决一部分问题。但当遇到十分复杂的问题,console.log
就会变得不趁手。比如:
一个逻辑复杂的算法
如果你刷过 leetcode 一定深有体会,算法某个测试用例报错了,有时很难光靠目测找出有问题的那个方法。
一个复现步骤十分繁琐的bug。
花了10分钟好不容易复现了,但是只跟踪到某行代码,需要第二次添加 log 才能继续寻找问题。查看log -> 添加log -> 查看log... 这个过程重复几遍,今天剩下的砖就搬不完了。
一段运行流程冗长的代码
一段没有注释、起名随意的代码
server 端代码
有 nodejs 服务端开发经验的同学相信有过在 postman 和 ide 之间反复横跳的经历,如果光靠 log,对于一个巨大的复杂对象,控制台是不好查看全貌的。如果一个接口还涉及到数据库增删、第三方依赖,那么复原上一次请求造成的后果也是一件痛苦的事情。
Chrome debugger 基本用法 VS Code 调试 SPA 应用 Chrome 调试 Nodejs VS Code 调试 Nodejs
Chrome debugger 基本用法
debugger
,然后到浏览器中刷新页面,这时候浏览器就会在 debugger
语句那停止执行。index.html
和 index.js
,然后在 index.html
中引入 index.js
。index.js
内容如下:// 国际惯例,hello world。
const greet = () => {
const greeting = "hello debugger";
// 浏览器执行到这里将会暂停
debugger
console.log(greeting);
};
greet();
console.log("js evaluation done");
执行命令:
npm i -g serve
serve .
然后访问 http://localhost:5000
并打开开发者工具。
Page
一栏是指当前页面中的 JS 文件,Filesystem
会显示我们系统中的文件。通常我们使用 Page
。greet()
,点击按钮3就会进入 greet 方法中(也就是第2行)。如果不想再看 greet 方法了,就点击按钮4,跳出这个方法,回到第8行。debugger
是最简单粗暴的打断点方式,但是需要修改我们的代码。需要注意的是,上线前必须删除这些语句。也可以通过配置 webpack 来自动去除。不过终究还是有些不方便,所以我们来看下如何通过 vscode 来简化打断点的方式。VS Code 调试 SPA 应用
Vite
来创建一个 Vue
应用用于演示(React步骤类似)。# 创建 vut-ts 应用
npm init vite
cd hello-vite
npm install
# 调用 VS Code cli 打开项目,
# 或者手动在 VS Code 打开。
code .
npm run dev
.vscode/launch.json
,填入这些内容:{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Launch Vue project",
// 这里填入项目的访问地址
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
]
}
cmd+q
退出你正在运行的 Chrome(这步很重要,不能跳过),按 f5
启动 VS Code 的调试功能。VS Code 就会帮你启动一个 Chrome 窗口,并访问上述配置的中的 url
。这时候我们的断点就生效了,可以一步一步地控制代码的运行,找出 bug 来源。BREAKPOINTS
中,把 Uncaught Exceptions
勾上,这样在代码报错的地方,就会自动中断执行。当我们遇到一个报错时,采用这个方法可以省去定位问题代码的时间。launch
和 attach
。由于真正执行代码的是 Chrome 中的 JS 引擎,所以是否中断代码的控制权是在 Chrome 手里的。那为什么 VS Code 的断点可以控制代码的中断呢?是因为 VS Code 通过 devtools-protocol
向 Chrome 发起指令,告诉 Chrome 需要在哪一行代码暂停执行。attach
。而 launch
的过程包含 attach
,即先 launch(启动) 浏览器,然后 attach(附加) 断点信息。所以 attach
模式是 launch
模式的子集。launch
模式会更方便,为我们省去了手动启动浏览器的过程。但是这存在一个问题,如果同时开发多个前端工程会怎样?每个工程启动一个调试进程,就会打开多个浏览器,那么在多个浏览器之间切换就会显得很麻烦。我们可以使用 attach
模式解决这个问题。# 运行这条命令前需要cmd+q退出已运行的Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
# 如果看到这个输出,说明传参成功。
DevTools listening on ws://127.0.0.1:9222/devtools/browser/856a3533-ca5c-474f-a0cf-88b7ae94c75b
--remote-debugging-port
指定了 websocket 使用的端口。然后我们将 launch.json
文件修改成这样:{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "attach",
"name": "Vue Application",
// 项目访问的 url
"url": "http://localhost:3000",
// websocket 端口,需要与 --remote-debugging-port 参数保持一致。
"port": 9222,
"webRoot": "${workspaceFolder}"
},
]
}
url
字段要根据项目配置进行修改。Chrome 调试 Nodejs
const greeting = 'hello nodejs debugger'
debugger
console.log(greeting)
Debugger listening on ws://127.0.0.1:9229/b9a6d6bf-baaa-4ad5-8cc6-01eb69e99f0a
For help, see: https://nodejs.org/en/docs/inspector
--inspect-brk
表示运行这个 js 文件的同时,在文件的第一行打上断点。然后打开 Chrome,进入 Devtools。点击红框处的按钮,就会打开一个 nodejs 专用的调试窗口,并且代码在第一行中断了。node --inspect=9228 debug.js
Debugger listening on ws://127.0.0.1:9228/30f21d45-9806-47b8-8a0b-5fb97cf8bb87
For help, see: https://nodejs.org/en/docs/inspector
Configure
按钮,输入 127.0.0.1:9228
,然后点击 Done
。这时候 Remote Target 中就会出现 刚才启动的 node 进程,点击 inspect
就可以进入调试了。使用 VS Code 调试 Nodejs
launch.json
中输入这些:"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
// ${file} 的意思是,当我们启动调试的时候,调试的程序就是当前 focus 的文件。
"program": "${file}"
}
]
}
index.js
文件,按 f5
启动调试程序,当运行到第二行 debugger 语句的时候,就会自动暂停执行。也可以点击代码行数的左侧来打断点。TypeScript
的,我们只需要 index.js
重命名为 index.ts
,然后正常启动调试就行。Conditional Breakpoint 条件断点
console.log("i", i);
}
console.log
打了断点,那么这个断点总计会中断十次。这往往是我们不希望看到的,可能我们需要的仅仅是其中某一次循环而非所有。这时候可以右键点击并选择 Add Conditional Breakpoint
。i === 5
。总结
launch.json
只需要一次配置,后续都可以 f5
一键启动调试。launch.json
文件的配置,都可以使用 VS Code 自带的工具一键生成。只要打开 launch.json
,编辑器的右下角就会出现 Add Configuration
按钮,点击就可以选择自己需要添加的调试配置。- EOF -
觉得本文对你有帮助?请分享给更多人
推荐关注「前端大全」,提升前端技能
点赞和在看就是最大的支持❤️