5.4 常见问题与调试技巧

前端调试：Chrome DevTools

必会的调试工具

1. Elements 面板

查看和修改 DOM 结构
实时调整 CSS 样式
找到元素对应的代码

快捷键：

Ctrl + Shift + C (Windows) / Cmd + Shift + C (Mac)：选择元素
Ctrl + Shift + I / Cmd + Opt + I：打开 DevTools

2. Console 面板

查看 console.log 输出
查看报错信息
执行 JavaScript 代码

技巧：


// 不要只用 console.log，试试这些：
 
console.table([{name: '张三', age: 18}, {name: '李四', age: 20}]);
// 表格形式显示数据
 
console.error('这是一个错误');
// 红色显示错误
 
console.warn('这是一个警告');
// 黄色显示警告
 
console.time('计时器');
// ... 执行一些代码
console.timeEnd('计时器');
// 显示执行时间

3. Network 面板

查看所有网络请求
检查 API 请求和响应
分析加载速度

常见问题排查：


❌ API 返回 404
→ 检查 URL 是否正确
→ 检查服务器是否运行

❌ API 返回 500
→ 查看 Response 标签页的错误信息
→ 检查后端日志

❌ CORS 错误
→ 后端需要设置跨域头
→ 开发环境可以用代理

4. Sources 面板

设置断点调试
单步执行代码
查看变量值

使用步骤：

在代码行号点击，设置断点
刷新页面，代码执行到断点会暂停
鼠标悬停在变量上查看值
使用右侧按钮：
- ⏸ 继续执行
- ⤵️ 单步跳过
- ⤴️ 单步进入
- ⤴️ 单步跳出

后端调试：日志和断点

使用 console.log 调试

基础调试：


app.post('/api/todos', (req, res) => {
  console.log('收到请求，请求体:', req.body);
 
  const { title } = req.body;
  console.log('提取的标题:', title);
 
  if (!title) {
    console.log('❌ 标题为空');
    return res.status(400).json({ message: '标题不能为空' });
  }
 
  console.log('✅ 验证通过，创建待办');
  // ... 创建逻辑
});

使用 nodemon 自动重启

问题：每次修改代码都要手动重启服务器 ❌

解决：使用 nodemon ✅


# 安装
npm install -D nodemon
 
# 修改 package.json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  }
}
 
# 运行（自动监听文件变化并重启）
npm run dev

VSCode 断点调试

配置 launch.json：

点击左侧「运行和调试」图标
点击「创建 launch.json 文件」
选择「Node.js」


{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动服务器",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/server.js"
    }
  ]
}

在代码中点击行号设置断点
按 F5 启动调试

优势：

✅ 可视化查看所有变量
✅ 查看调用栈
✅ 条件断点（只在特定条件触发）

常见错误速查表

Node.js 常见错误

错误信息	原因	解决方法
`Cannot find module 'xxx'`	依赖未安装	`npm install xxx`
`Port 3000 is already in use`	端口被占用	换端口或杀掉占用进程
`SyntaxError: Unexpected token`	语法错误	检查括号、逗号、引号是否匹配
`TypeError: xxx is not a function`	调用了不存在的方法	检查拼写、检查对象类型
`ReferenceError: xxx is not defined`	变量未定义	检查变量名拼写、作用域

Chrome Extension 常见错误

错误信息	原因	解决方法
`Manifest version 2 is deprecated`	使用了旧版 manifest	改用 manifest v3
`Extension context invalidated`	插件重新加载后，旧页面仍持有引用	刷新页面
`Cannot access chrome.xxx API`	未声明权限	在 manifest.json 添加权限

API 调试技巧

问题：API 返回结果不符合预期

调试步骤：

确认请求 URL 是否正确
确认请求方法（GET/POST/PUT/DELETE）
确认请求头（Content-Type: application/json）
确认请求体格式（JSON 格式正确）
查看服务器日志
使用 Postman/Thunder Client 单独测试接口