建站问题排查-编程学习之家

写代码 30% 时间在写功能，70% 时间在排查问题。能否快速定位 bug，是新手与资深工程师的重要分水岭。本教程系统讲解浏览器开发者工具（DevTools）的使用方法与常见问题的排查思路。

1. DevTools 概览

Chrome DevTools 是前端调试的瑞士军刀，按下 F12 或 Cmd+Opt+I 即可打开。常用面板包括：

Elements：查看与修改 HTML/CSS，实时预览效果
Console：运行 JS 代码、查看日志与报错
Sources：源代码查看、断点调试
Network：网络请求监控与分析
Performance：性能分析（火焰图）
Application：存储（Cookie、LocalStorage、IndexedDB）
Lighthouse：网站性能/SEO/可访问性评分

2. Console 调试

Console 是最常用的调试面板，可以输出日志、执行代码、查看报错。

// 不同级别的日志输出
console.log("普通日志");        // 灰色
console.info("信息");           // 蓝色
console.warn("警告");           // 黄色
console.error("错误");          // 红色，带堆栈

// 打印对象（推荐 dir 而非 log）
const user = { name: "张三", age: 25 };
console.log(user);    // 输出对象树
console.dir(user);    // 显示属性列表

// 计时
console.time("loop");
for (let i = 0; i < 100000; i++) {}
console.timeEnd("loop");   // 输出耗时

// 分组
console.group("用户信息");
console.log("姓名：张三");
console.log("年龄：25");
console.groupEnd();

生产环境务必移除或封装 console.log，避免泄露内部数据并影响性能。可用 webpack/vite 插件自动剔除。

3. Network 网络分析

Network 面板记录所有网络请求，是排查"接口慢、404、500、跨域"等问题的利器。

排查清单：
1. 请求是否发出（看列表是否有该请求）
2. 请求 URL 是否正确（拼写、参数、协议）
3. 请求方法与状态码：
   200  成功
   301/302  重定向
   304  缓存命中
   400  参数错误
   401  未登录
   403  无权限
   404  资源不存在
   500  服务器内部错误
   502/503  网关错误
4. 请求头（Headers）：Content-Type、Authorization 是否正确
5. 请求体（Payload）：发送的数据是否符合后端要求
6. 响应体（Response）：返回的内容是否预期
7. Timing：各阶段耗时（DNS、连接、传输）

排查跨域问题：在 Network 中找到报错请求，查看 Response Headers 是否包含 Access-Control-Allow-Origin，以及是否发起了 OPTIONS 预检请求。

4. Elements 元素检查

Elements 面板让你像"X 光"一样查看页面结构，并实时修改 HTML/CSS，所见即所得。

点击左上角"箭头"图标，移到页面任意元素即可定位到对应 HTML
双击 HTML 标签可编辑内容，回车即时生效
右侧 Styles 面板可临时增删 CSS 属性，调试样式超方便
勾选 :hov 可强制触发 :hover、:focus 等伪类
Computed 面板可查看最终生效的样式值与来源

常见样式问题排查：
- 元素不显示？检查 display、visibility、opacity、z-index
- 元素超出父容器？检查 width、overflow、box-sizing
- 文字溢出？检查 white-space、overflow、text-overflow
- 居中失败？检查父元素 display:flex、子元素 margin:0 auto

5. Sources 断点调试

当 Console 不够用时，断点调试是定位复杂逻辑问题的最佳手段。在 Sources 面板可以逐行执行代码、查看变量值。

// 1. 代码中加 debugger 自动断点
function calcTotal(items) {
  let total = 0;
  for (const item of items) {
    debugger;  // 浏览器会在这里暂停
    total += item.price;
  }
  return total;
}

// 2. Sources 面板手动设置：点击行号添加蓝色断点
// 3. 调试控制：
//    F8   继续执行到下一个断点
//    F10  单步跳过（不进入函数）
//    F11  单步进入函数
//    Shift+F11  跳出当前函数

Watch 面板可添加要监控的变量；Call Stack 显示调用栈；Scope 显示当前作用域所有变量值。

6. 移动端调试

响应式问题需要真机调试。DevTools 内置设备模拟器，支持各种手机型号与自定义分辨率。

步骤：
1. 打开 DevTools
2. 点击工具栏"手机"图标，或按 Cmd+Shift+M
3. 顶部选择设备型号（iPhone 14、Pixel 7 等）
4. 可旋转屏幕、模拟触控、调整网络限速
5. 真机调试：手机开启 USB 调试，连接电脑
   - Android：chrome://inspect
   - iOS：Safari 开发菜单

网络限速测试：在 Network 面板切换为 "Slow 3G"，模拟弱网环境，验证加载体验。

7. 常见错误排查

整理前端开发最常见的几类错误及排查方法：

// 1. Uncaught TypeError: Cannot read property 'x' of undefined
//    原因：访问 undefined/null 的属性
//    排查：用 console.log 打印变量，加 ? 判断
const name = user?.name || "匿名";

// 2. Uncaught ReferenceError: xxx is not defined
//    原因：变量未声明或作用域错误
//    排查：检查拼写、import/require 是否齐全

// 3. CORS 错误：blocked by CORS policy
//    原因：跨域请求未被服务器允许
//    排查：后端需设置 Access-Control-Allow-Origin

// 4. Mixed Content 警告
//    原因：HTTPS 页面引入 HTTP 资源
//    排查：将所有资源引用改为 https://

// 5. 404 资源加载失败
//    原因：路径错误或文件不存在
//    排查：Network 面板查看请求 URL，对照实际路径

8. 调试思路总结

调试是科学方法的应用：观察现象 → 形成假设 → 验证假设 → 缩小范围。建议遵循以下流程：

复现问题：稳定复现是排查的前提
查看报错：Console 红色错误、Network 红色请求，按图索骥
定位代码：根据报错堆栈找到对应源文件与行号
打日志/断点：在关键节点输出变量值，验证是否符合预期
二分查找：注释掉一半代码看是否还报错，快速锁定范围
搜索引擎：把报错信息原样贴到 Google/Stack Overflow

调试小技巧

$0 在 Console 中引用 Elements 最后选中的元素
copy($0) 复制元素 outerHTML 到剪贴板
document.querySelectorAll("selector") 快速查询 DOM
monitorEvents($0, "click") 监听元素事件
Console 设置 Preserve log，刷新页面后日志不丢失
Network 设置 Disable cache，DevTools 打开时不读缓存

调试高手并非"什么都会"，而是"什么都能查出来"。掌握工具与思路，遇到陌生问题也能从容应对。建议遇到一个 bug 就记录"现象→原因→解决"，长期积累形成自己的排查手册。

建站问题排查

建站问题排查：用 DevTools 像侦探一样调试