本文档介绍前端开发中常用的调试技巧，涵盖 Console、VSCode Debug 和 Chrome Debugger 的使用方法。
一. Console
Console 是前端开发中最基础也是最常用的调试工具 console.log()、console.info()、console.warn()、console.error() 这些都是比较基础的输出功能，这里不再赘述～
console.table()
非常适合用于输出结构化数据（对象、数组等） 对于接口返回用这种输出方法非常好，还能点击表头排序
javascript
// 输出数组
const users = [
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 35 }
];
console.table(users);
// 输出对象
const user = {
name: 'John',
email: 'john@example.com',
age: 30,
address: {
city: 'Beijing',
country: 'China'
}
};
console.table(user);
console.time() / console.timeEnd()
用于测量代码执行时间。
javascript
console.time('API 请求耗时');
fetch('/api/data')
.then(response => response.json())
.then(data => {
console.timeEnd('API 请求耗时'); // API 请求耗时: 234.567ms
});二. VSCode Debug
VSCode 提供了强大的调试功能，可以直接在编辑器中设置断点、单步调试、监控变量值等。 VSCode 系的编辑器操作方法都一样，如 Cursor～
2.1 配置调试环境
VSCode 侧边栏选择 Run and Debug 并创建 launch.json 文件 创建 launch.json 时选择自己对应的浏览器即可（Chrome or Edge）
json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080", // 这里改成自己本地开发的 url
"webRoot": "${workspaceFolder}",
"skipFiles": [
"${workspaceFolder}/node_modules/**" // debug 时忽略 node_modules，只有我们业务代码进行 Debug 建议加上
]
}
]
}配置好后，点击菜单栏的 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 打开时，执行到该语句会自动暂停程序执行。
javascript
function myFunction() {
const data = { name: 'John', age: 30 };
debugger; // 程序会在这里暂停
console.log(data);
}使用前提
- 必须打开 Chrome DevTools ：如果 DevTools 未打开，
debugger语句会被忽略 - 确保 Source Maps 启用：开发环境通常默认启用，生产环境需要配置
- 代码必须被执行 ：只有执行到的
debugger才会生效
3.2 基础使用场景
调试函数执行
在函数开始或关键位置添加 debugger：
typescript
// lib/utils/format-number.ts
export const formatNumber = (num: number) => {
debugger; // 查看传入的参数
const formatted = num.toLocaleString('en-US');
debugger; // 查看格式化后的结果
return formatted;
};调试条件分支
在条件判断处添加 debugger，查看条件值和执行路径：
typescript
function processUser(user: User) {
debugger; // 查看 user 对象
if (user.age >= 18) {
debugger; // 进入此分支
return handleAdult(user);
} else {
debugger; // 进入此分支
return handleMinor(user);
}
}调试循环
在循环中添加 debugger，可以逐步查看每次迭代：
typescript
function processItems(items: Item[]) {
for (let i = 0; i < items.length; i++) {
debugger; // 每次循环都会暂停，可以查看 i 和 items[i]
const item = items[i];
processItem(item);
}
}
// 或者只在特定条件下暂停
function processItems(items: Item[]) {
for (let i = 0; i < items.length; i++) {
if (items[i].status === 'error') {
debugger; // 只在遇到错误状态时暂停
}
processItem(items[i]);
}
}调试 React 组件
在组件函数体中添加 debugger，查看每次渲染时的 props 和 state：
typescript
// components/UserProfile.tsx
export const UserProfile: React.FC<Props> = ({ userId }) => {
const [user, setUser] = useState<User | null>(null);
const [loading, setLoading] = useState(false);
debugger; // 查看组件渲染时的 props 和初始 state
useEffect(() => {
debugger; // 查看 useEffect 执行时的 userId
setLoading(true);
fetchUser(userId).then(data => {
debugger; // 查看获取到的用户数据
setUser(data);
setLoading(false);
});
}, [userId]);
debugger; // 查看渲染时的最终状态
return <div>{user?.name}</div>;
};3.3 Chrome DevTools 断点调试面板
暂停后的操作
当 debugger 暂停程序后，可以在 DevTools 中：
查看变量值
- 在 Sources 面板的 Scope 区域查看局部变量
- 将鼠标悬停在代码中的变量上查看值
- 在 Console 中输入变量名查看值
监视变量
- 在 Watch 面板添加要监视的变量
- 即可在调试过程中实时插件变量值的变化
单步调试
暂停后可以使用单步调试：
- F8 (Resume) : 继续执行到下一个
debugger - F10 (Step over): 单步跳过，不进入函数内部
- F11 (Step into): 单步进入，进入函数内部
- Shift + F11 (Step out): 单步跳出，跳出当前函数
