前端调试技巧

本文档介绍前端开发中常用的调试技巧，涵盖 Console、VSCode Debug 和 Chrome Debugger 的使用方法。

一. Console

Console 是前端开发中最基础也是最常用的调试工具 console.log()、console.info()、console.warn()、console.error() 这些都是比较基础的输出功能，这里不再赘述～

console.table()

非常适合用于输出结构化数据（对象、数组等） 对于接口返回用这种输出方法非常好，还能点击表头排序

1// 输出数组
2const users = [
3  { id: 1, name: 'Alice', age: 25 },
4  { id: 2, name: 'Bob', age: 30 },
5  { id: 3, name: 'Charlie', age: 35 }
6];
7console.table(users);
8
9// 输出对象
10const user = {
11  name: 'John',
12  email: '[email protected]',
13  age: 30,
14  address: {
15    city: 'Beijing',
16    country: 'China'
17  }
18};
19console.table(user);
20

console.time() / console.timeEnd()

用于测量代码执行时间。

1console.time('API 请求耗时');
2fetch('/api/data')
3  .then(response => response.json())
4  .then(data => {
5    console.timeEnd('API 请求耗时'); // API 请求耗时: 234.567ms
6  });
7

二. VSCode Debug

VSCode 提供了强大的调试功能，可以直接在编辑器中设置断点、单步调试、监控变量值等。 VSCode 系的编辑器操作方法都一样，如 Cursor～

2.1 配置调试环境

VSCode 侧边栏选择 Run and Debug 并创建 launch.json 文件 创建 launch.json 时选择自己对应的浏览器即可（Chrome or Edge）

1{
2  "version": "0.2.0",
3  "configurations": [
4    {
5      "type": "chrome",
6      "request": "launch",
7      "name": "Launch Chrome against localhost",
8      "url": "http://localhost:8080", // 这里改成自己本地开发的 url
9      "webRoot": "${workspaceFolder}",
10      "skipFiles": [
11        "${workspaceFolder}/node_modules/**" // debug 时忽略 node_modules，只有我们业务代码进行 Debug 建议加上
12      ]
13    }
14  ]
15}
16

配置好后，点击菜单栏的 Launch 按钮，会重新打开一个 chrome 的窗口

2.2 调试控制

此时在对应代码行数前端点击一下，出现红点时即 打断点 成功，此时刷新页面即可看到代码停在这里，可以鼠标 Hover 查看对应变量值，也可以选择 Step Over (F10) 代码一步一步执行，可以看到代码详细的执行逻辑。

调试时，上面的基本按钮功能：

• 继续 (F5): 继续执行到下一个断点
• 单步跳过 (F10): 执行当前行，不进入函数内部
• 单步进入 (F11): 进入函数内部
• 单步跳出 (Shift + F11): 跳出当前函数
• 重启 (Ctrl + Shift + F5): 重新开始调试
• 停止 (Shift + F5): 停止调试

3.2 变量监视及错误捕获

变量监视

可以在变量监视的面板中监听某个变量，在调试过程中实时看到变量变化

错误捕获

在断点面板中开启Caught Exceptions，即可在有异常时，自动断点到错误代码行处～

三. Chrome Debugger

Chrome Debugger 是指在代码中使用 debugger 语句进行调试的方法。当代码执行到 debugger 语句时，如果浏览器 DevTools 已打开，程序会自动暂停，此时可以查看变量值、调用堆栈等信息。

3.1 debugger 语句基础

什么是 debugger 语句

debugger 是 JavaScript 的一个关键字，当浏览器 DevTools 打开时，执行到该语句会自动暂停程序执行。

1function myFunction() {
2  const data = { name: 'John', age: 30 };
3  debugger; // 程序会在这里暂停
4  console.log(data);
5}
6

使用前提

1. 必须打开 Chrome DevTools：如果 DevTools 未打开，debugger 语句会被忽略
2. 确保 Source Maps 启用：开发环境通常默认启用，生产环境需要配置
3. 代码必须被执行：只有执行到的 debugger 才会生效

3.2 基础使用场景

调试函数执行

在函数开始或关键位置添加 debugger：

1// lib/utils/format-number.ts
2export const formatNumber = (num: number) => {
3  debugger; // 查看传入的参数
4  const formatted = num.toLocaleString('en-US');
5  debugger; // 查看格式化后的结果
6  return formatted;
7};
8

调试条件分支

在条件判断处添加 debugger，查看条件值和执行路径：

1function processUser(user: User) {
2  debugger; // 查看 user 对象
3  if (user.age >= 18) {
4    debugger; // 进入此分支
5    return handleAdult(user);
6  } else {
7    debugger; // 进入此分支
8    return handleMinor(user);
9  }
10}
11

调试循环

在循环中添加 debugger，可以逐步查看每次迭代：

1function processItems(items: Item[]) {
2  for (let i = 0; i < items.length; i++) {
3    debugger; // 每次循环都会暂停，可以查看 i 和 items[i]
4    const item = items[i];
5    processItem(item);
6  }
7}
8
9// 或者只在特定条件下暂停
10function processItems(items: Item[]) {
11  for (let i = 0; i < items.length; i++) {
12    if (items[i].status === 'error') {
13      debugger; // 只在遇到错误状态时暂停
14    }
15    processItem(items[i]);
16  }
17}
18

调试 React 组件

在组件函数体中添加 debugger，查看每次渲染时的 props 和 state：

1// components/UserProfile.tsx
2export const UserProfile: React.FC<Props> = ({ userId }) => {
3  const [user, setUser] = useState<User | null>(null);
4  const [loading, setLoading] = useState(false);
5  
6  debugger; // 查看组件渲染时的 props 和初始 state
7  
8  useEffect(() => {
9    debugger; // 查看 useEffect 执行时的 userId
10    setLoading(true);
11    fetchUser(userId).then(data => {
12      debugger; // 查看获取到的用户数据
13      setUser(data);
14      setLoading(false);
15    });
16  }, [userId]);
17  
18  debugger; // 查看渲染时的最终状态
19  return <div>{user?.name}</div>;
20};
21

3.3 Chrome DevTools 断点调试面板

暂停后的操作

当 debugger 暂停程序后，可以在 DevTools 中：

查看变量值

• 在 Sources 面板的 Scope 区域查看局部变量
• 将鼠标悬停在代码中的变量上查看值
• 在 Console 中输入变量名查看值

监视变量

• 在 Watch 面板添加要监视的变量
• 即可在调试过程中实时插件变量值的变化

单步调试

暂停后可以使用单步调试：

• F8 (Resume): 继续执行到下一个 debugger
• F10 (Step over): 单步跳过，不进入函数内部
• F11 (Step into): 单步进入，进入函数内部
• Shift + F11 (Step out): 单步跳出，跳出当前函数

参考资料

• MDN Console API
• MDN debugger 语句
• VSCode Debugging
• Chrome DevTools
• Chrome DevTools 调试 JavaScript
• Next.js Debugging

《前端调试技巧》 是转载文章，点击查看原文。