Can't you debug it in 2023?

作为一名程序员，就算你拥有大圣的 72 变，依然逃脱不了观音的紧箍咒；程序出 Bug 已是家常便饭，但解决问题的能力更加凸现你在公司的地位。本文结合自身实战经验，梳理日常开发中神一般的调试技巧。希望对各位大佬有所参考和借鉴，如有错误的地方，还请指正。

author introduces

Hello everyone, I am an old front-end at a corner of the river. I am usually busy with work and articles are not published often. I also hope that every time I sort out I can bring help to friends from all walks of life.

Front-end Xiaobai

我曾出过不少课程，学生群也有十几个了，我遇到太多的学生了，一遇到问题，就在群里直接@我：我页面出不来了，快帮我看看 我代码跟你一样，就是不行 控制台报错，怎么办？ 怎么打断点 代码怎么调试？

To be honest, I am very helpless. I can also understand them very much. They have just graduated and are like a blank sheet of paper. They have no work experience. Their understanding of this industry is still at a low level. Therefore, whenever they encounter problems, on the one hand, it is to help them investigate problems, and on the other hand, I also hope to help them gradually develop their ability and methods to solve problems independently.

Front-end rookie

console law

这个大家肯定不陌生了，遇到问题，可以通过 console 来输出日志，分析问题。

1. console.log()

Ordinary log output is also the most frequently used printing method on the front end

function Person() {
  this.name = "jack";
  this.age = 30;
}

let person = new Person();

// 查看person对象都有哪些属性和方法
console.log(person);

// 可以同时姓名和年龄
console.log(person.name, person.age);

// 也可以使用占位符进行输出

console.log("姓名：%s，年龄：%d", person.name, person.age);

The output is as follows:

Template strings are definitely simpler than placeholders and will not be discussed here.

2. console.warn()

用于控制台输出警告信息。同console.log用法一样，只是样式显示不同，通过 warn 方法输出，前面会显示黄色警告标志。

The output is as follows:

3. console.info()

用于控制台输出说明信息。同 console.log 用法一样，样式也相同。

The output is as follows:

4. console.error()

用于控制台输出错误信息。同console.log用法一样，只是样式显示不同，通过 error 方法输出，前面会显示错误图标。

The output is as follows:

5. console.time()

如果想要获取一段代码执行时间，可使用 console.time() 进行计时，使用 console.timeEnd() 结束计时。

// 计时开始
console.time();

for (let i = 0; i < 1000; i++) {
  // to-do
}

// 计时结束
console.timeEnd();

The output is as follows:

注意：console.timeEnd() 不可以单独使用，必须先定义 console.time() 否则，会提示：VM578:1 Timer 'default' does not exist

6. console.count()

如果想要获取代码执行次数，可使用 console.count()。

for (let i = 0; i < 5; i++) {
  // 次数统计
  console.count();
}

The output is as follows:

You can also pass in a parameter and mark it, such as: console. count ('times:')

以上是关于通过 console 打印来做调试的比较常用的几个方法，当然还有不少，比较冷门和低频的就不一一列举了。

debugger

除了 console 日志打印外，比较常用的就是 debugger 了，当程序出错或者找不到问题时，我们需要在代码中直接定义 debugger 来暂停程序执行，进而分析问题。 js copy code let list =[{name:'jack', age: 30, info: {score: 70}},{name:' tom', age: 28}]

for (let item of list) {
  debugger;
  if (item.info.score > 60) {
    console.log(`恭喜你：${item.name}`);
  }
}

上述代码很明显会报错，如果程序再复杂一些，就需要我们断点调试了。通过 debugger，我们可以调试得知 item.info 为 null 导致程序报错。

Debugging is as follows:

chrome breakpoint

无论是在代码中写 console.log 还是 debugger 都是一种侵入式断点，解决问题以后，还需要手工清除，殊不知，浏览器本身也可以打断点？

以 Vue3 为例，我们打开控制台，找到源代码，通过 ctrl + p 搜索用户管理菜单文件 User.vue ，在想要断点的地方，直接点击即可生成断点。

If you accidentally make a bunch of breakpoints, how to clear them quickly?

After entering the breakpoint, hover the mouse over the variable and the value of the variable will be displayed. If hover over the object, the properties and methods under the object will be displayed. The right panel contains: monitoring area, breakpoint, scope, call stack and other sections.

chrome adds conditional breakpoints

If the code we debug is a loop, we may have to execute it one by one until the conditions are met before we can check the corresponding variable values. But this is a waste of time and a stupid method?

• Find the code fragment to debug

• Right-click to select the conditional breakpoint

• The breakpoint is triggered only when userId == 1000002

• The breakpoint is triggered only when the condition is true

Conditional breakpoints are so easy to use, awesome

Front-end king

request retransmission

When debugging with the backend interface, the page request was too fast, and the backend didn't have time to read the log, so the backend would ask the front-end: ** Send the request again, I'll debug it **, so we foolishly refreshed the page, but I didn't know that ** The browser comes with a request to resend **?

Operation steps:

1. open the console
2. Select Network (called Network in Chinese)
3. Find the interface to retransmit
4. Right click and select Replay XHR (in Chinese, it is called Replay XHR)

So you see an amazing scene, the request is sent again...

Before requesting playback:

After requesting playback:

Console sends request

If parameters need to be modified when requesting retransmission, what should I do?

1. open the console
2. Select Network (called Network in Chinese)
3. Find the interface whose parameters you want to modify
4. Right click and select Copy-> Copy as fetch (in Chinese, it is called copy in fetch format)
5. On the console interface, paste
6. Modify the request parameters and enter directly

• replication request

• Modify paging parameters to page 2:

• carriage return send request

HTML node copying

当页面布局出问题时，我们往往需要通过审查元素进行分析，同时也会在控制台通过 DOM API 来进行读写调试，但是 DOM API 操作起来过于麻烦，殊不知浏览器已自带 api 功能？

• 当选中要查看的 html 节点时，会自动生成 $0 变量

• 控制台直接写 $0 便会打印选中的节点

• 用 $ 或 $$ 代替 docuement.querySelector()

这简直太好用了，如果你还不知道，真的就 out 了，chrome 太懂前端了

JavaScript object copying

有时候我们通过 console.log 打印了一个比较复杂的对象，但是需要一层一层展开进行查看，非常不方便，有什么好办法？

function Person() {
  this.name = "jack";
  this.age = 30;
}

let person = new Person();

// 查看person对象都有哪些属性和方法
console.log(person);

浏览器自带 copy 函数

1. 输入 copy(person)`

2. directly stuck

The console will directly format the print and change object, and no longer need to expand it layer by layer. Is it convenient?

More useful variables are as follows:

• $ // 简单理解就是 document.querySelector 而已。
• $$ // 简单理解就是 document.querySelectorAll 而已。
• $_ // 是上一个表达式的值
• $0-$4 // 是最近 5 个 Elements 面板选中的 DOM 元素，待会会讲。
• dir // 其实就是 console.dir
• keys // 取对象的键名, 返回键名组成的数组
• values // 取对象的值, 返回值组成的数组

Local file replacement remote

我曾经遇到过一种场景，有一个项目已经部署到服务器上了，但是本地没有仓库代码，服务器全部是压缩的代码，我们要调试变得很困难，普通的做法就是下载服务器的压缩包到本地，通过 nginx 运行，进行本地调试，最后修改压缩包再重新部署到服务器。殊不知浏览器已经提供了 overrides 功能？

1. open the console

2. Select the source code and click Replace

3. Click + to select a folder (you can create any file on the desktop)

4. Click Agree

5. refresh the page

6. 选择网络，选择要修改的文件(css或js)，右键选择：保存并覆盖

7. At this time, you can see that the remote file has been downloaded to the corresponding local folder

8. Modify the code directly in the file, and the page will be modified synchronously

9. After modification, save directly

10. Just redeploy local files to the remote server.

The above are the various debugging capabilities compiled for you this time. I hope you like them. I am a corner of the river.