JavaScript 断点调试技巧

为什么要使用 debugger

这篇文章将介绍如何使用断点来进行 JavaScript 调试。在读这篇文章之前，需要问一个问题：为什么要使用断点来进行调试？

我们首先需要认可使用断点的是必要的，否则下文介绍的所有断点调试方法都会是废话。console.log 是前端开发最常用的调试手段，它简单直接解决一部分问题。但当遇到十分复杂的问题，console.log 就会变得不趁手。比如：

• 一个逻辑复杂的算法

  如果你刷过 leetcode 一定深有体会，算法某个测试用例报错了，有时很难光靠目测找出有问题的那个方法。

• 一个复现步骤十分繁琐的bug。

  花了10分钟好不容易复现了，但是只跟踪到某行代码，需要第二次添加 log 才能继续寻找问题。查看log -> 添加log -> 查看log... 这个过程重复几遍，今天剩下的砖就搬不完了。

• 一段运行流程冗长的代码

• 一段没有注释、起名随意的代码

• server 端代码

  有 nodejs 服务端开发经验的同学相信有过在 postman 和 ide 之间反复横跳的经历，如果光靠 log，对于一个巨大的复杂对象，控制台是不好查看全貌的。如果一个接口还涉及到数据库增删、第三方依赖，那么复原上一次请求造成的后果也是一件痛苦的事情。

在这些情况下，断点调试是非常有价值的，将 debug 的时间复杂度从 O(n) 降到 O(1)，让搬砖更快乐。

这是文章的内容大纲：

• 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并打开开发者工具。

这时候我们的 hello world 断点就打上了，就像这样：

d8090eb4-4a1f-4dfb-bf30-c08c762d66ad

图中分为四个区域，蓝色区域用于文件选择，Page 一栏是指当前页面中的 JS 文件，Filesystem 会显示我们系统中的文件。