🛠️ 调试高手之路
30章 · 从入门到实战
📘 友好色系
01
调试哲学：为什么需要调试？调试的本质是什么？调试的黄金三原则（复现、隔离、修复）。
理解调试的底层逻辑，掌握复现→隔离→修复的黄金工作流。
02
浏览器开发者工具（Chrome DevTools）入门：Elements、Console、Sources、Network、Performance、Application 面板概览。
快速熟悉六大核心面板，建立调试仪表盘全局观。
03
Console 面板精通：console.log 的进阶用法（占位符、分组、表格、计时），console.warn、console.error、console.assert 的使用场景。
从基础log到专业级控制台输出，让日志成为你的第二双眼睛。
04
Sources 面板与断点调试：设置断点（行断点、条件断点、DOM断点、XHR断点），单步执行（Step Over、Step Into、Step Out），Call Stack 与 Scope 变量的观察。
断点调试核心技能，逐行追踪代码状态与调用链。
05
Network 面板与网络请求分析：请求列表、请求头/响应头、预览与响应、时间线（Timing）、发起者（Initiator）分析。
网络请求全流程透视，定位接口延迟与数据异常。
06
Performance 面板与性能瓶颈定位：录制性能快照、FPS/CPU/Net 图表解读、Main 线程火焰图分析、长任务（Long Task）识别。
性能分析利器，发现卡顿根源与渲染瓶颈。
07
Application 面板与存储调试：LocalStorage、SessionStorage、IndexedDB、Cookies 的查看与修改，Service Workers 与 Cache Storage 管理。
客户端存储与缓存调试，掌控离线与持久化数据。
08
Elements 面板与样式调试：实时编辑 CSS、盒模型可视化、Computed 样式查看、伪类状态（:hover/:active）模拟。
样式调试零距离，盒模型与动态伪类一目了然。
09
JavaScript 错误类型与异常捕获：SyntaxError、ReferenceError、TypeError、RangeError 等常见错误，try...catch 与 finally 的使用，全局错误监听（window.onerror、window.addEventListener('error')）。
全面掌握JS异常体系与捕获策略，构建稳健错误边界。
10
Promise 与异步错误处理：Promise 链中的错误捕获（.catch）、async/await 中的 try...catch、unhandledrejection 事件监听。
异步编程的防崩溃指南，彻底告别未捕获的Promise异常。
11
Source Map 与压缩代码调试：Source Map 的原理、如何生成与配置（Webpack/Vite）、在 DevTools 中启用 Source Map。
生产环境代码调试利器，映射回源码轻松定位。
12
React 开发者工具（React DevTools）：组件树查看、Props/State 实时编辑、Profiler 性能分析、组件重新渲染原因追踪。
React 应用调试必备，组件状态与渲染性能尽在掌握。
13
Vue 开发者工具（Vue DevTools）：组件树、Vuex/Pinia 状态管理、事件追踪、性能分析。
Vue 生态调试中心，状态管理与事件流可视化。
14
Redux DevTools：Action 历史回放、State 快照对比、Time Travel Debugging（时间旅行调试）。
Redux 时间旅行调试，回溯每一次状态变更。
15
移动端调试：Chrome DevTools 远程调试（USB/无线）、vConsole 与 Eruda 内嵌调试工具、Safari Web Inspector 调试 iOS 页面。
移动端多平台调试方案，真机与模拟器全覆盖。
16
跨域问题（CORS）调试：CORS 错误信息解读、预检请求（OPTIONS）、代理服务器配置、JSONP 与 PostMessage 的适用场景。
跨域调试实战，从错误提示到完美解决方案。
17
内存泄漏排查：Performance 面板的 Memory 视图、Heap Snapshot 对比、Detached DOM 节点查找、闭包导致的内存泄漏案例。
内存泄漏侦探，堆快照与分离DOM分析。
18
网络请求错误调试：404/500/502 状态码含义、超时与重试策略、请求拦截与响应拦截（Axios 拦截器）。
HTTP状态码深度解读与请求重试拦截机制。
19
Webpack/Vite 构建错误调试：Loader 与 Plugin 错误定位、Module not found 解决、Tree Shaking 问题排查、HMR 失效原因。
构建工具链排错，从模块查找到热更新修复。
20
TypeScript 类型错误调试：常见类型错误（类型不兼容、缺少属性、泛型约束）、tsconfig.json 配置优化、类型守卫与断言的使用。
TypeScript 类型体操调试，配置与守卫双管齐下。
21
CSS 布局问题调试：Flexbox 与 Grid 布局的常见问题（溢出、对齐、换行）、z-index 层叠上下文、BFC（块级格式化上下文）的理解。
现代布局调试核心，层叠上下文与BFC深入浅出。
22
事件处理与冒泡/捕获调试：事件流（捕获阶段、目标阶段、冒泡阶段）、event.stopPropagation() 与 event.preventDefault() 的区别、事件委托的坑。
事件机制完全掌握，冒泡捕获与委托避坑指南。
23
WebSocket 与实时通信调试：WebSocket 连接状态监控、消息帧查看、重连机制调试、Socket.IO 的调试工具。
实时通信调试，帧级别监控与重连策略验证。
24
前端安全漏洞调试：XSS（跨站脚本攻击）的检测与防御、CSRF（跨站请求伪造）的 Token 验证、CSP（内容安全策略）配置调试。
安全调试实战，XSS/CSRF/CSP配置与验证。
25
自动化测试中的调试：Jest 与 Vitest 的调试配置（--inspect）、Cypress 的 Time Travel 调试、Playwright 的 Trace Viewer。
测试框架调试技巧，时间旅行与追踪查看器。
26
Node.js 后端调试：Node.js 内置调试器（node inspect）、VS Code 调试配置（launch.json）、ndb 调试工具。
Node.js 调试全攻略，从命令行到IDE集成。
27
微前端架构调试：Module Federation 的远程模块加载错误、qiankun 的生命周期调试、沙箱隔离问题排查。
微前端调试进阶，模块联邦与沙箱隔离排错。
28
性能优化调试：Lighthouse 审计报告解读、Core Web Vitals（LCP/FID/CLS）的测量与优化、Bundle 体积分析（webpack-bundle-analyzer）。
性能审计与核心指标优化，打包体积可视化分析。
29
日志系统与监控告警：前端日志分级（debug/info/warn/error）、Sentry 接入与 Source Map 上传、自定义错误上报与告警规则。
生产级日志监控，Sentry集成与自定义告警。
30
综合实战：一个完整的调试案例——从用户报障到定位修复的全流程演练（包含网络、性能、内存、逻辑错误的排查）。
全流程实战，串联所有调试技能解决真实问题。