一、背景
作为前端工程师，无论是开发还是线上环境。移动端或者 PC 端，经常会遇到一些 bug，那么如何在浏览器快速定位和解决问题呢。
调试本身可以分为两个过程，定位问题 和 解决问题 。而更重要的显然是如何快速的定位问题。本文将集中讨论如何 快速发现 并 调试问题方面。
二、调试工具
现代浏览器（如 Chrome、Firefox、Edge 等）都内置了强大的开发者工具（DevTools），这是前端调试的核心工具。
1. 主要功能面板
- Elements：查看和编辑 HTML 和 CSS，实时调试样式。
- Console：查看 JavaScript 错误、输出调试信息、执行 JavaScript 代码。
- Sources：调试 JavaScript 代码，设置断点、单步执行、查看调用栈等。
- Network：查看网络请求，分析请求头、响应头、响应内容等。
- Performance：分析页面性能，查找性能瓶颈。
- Application：查看和操作本地存储、Cookie、缓存等。
2. Elements
Elements 面板会显示目前网页中的 DOM、CSS 状态，且可以修改页面上的 DOM 和 CSS，即时看到结果，省去了在编辑器修改、储存、浏览器查看结果的流程。
$n
开启 Elements 面板时，标记的元素后方总会有个 == $0
选中一个元素后再到 Console 面板输入$0，会发现刚刚选中的元素出现在 Console 中,如果再多点几个元素，还可以用$1、$2、$3、$4（到此为止）来拿到前几次选到的元素。
另外在 Console 中对元素按下右键，选择 Reveal in Elements Panel 可以跳到该元素在 Elements 面板中的位置，对 Elements 面板的元素按下右键则有 Scroll to view 可以把视野滚到能看见元素的地方。
想要在 Console 面板中用 JavaScript 操作元素时，$0就非常方便，另外也可以搭配 console.dir($0) 来观察元素的各个属性，如果在 Console 直接输入 $0 或是 console.log($0) 只会显示元素自身。
3. Console
console 是 JavaScript 中最常用的调试工具之一。除了 console.log()，还有其他有用的方法：
console.table() 可用于打印 obj/arr 成表格
console.trace() 可用于 debugger 堆栈调试，方便查看代码的执行逻辑，也可以帮助我们看一些库的源码
console.count会印出这个标签被执行了几次，预设值是default，可以用在快速的计数。
4. Sources
在 Sources 面板中，可以设置断点来暂停代码执行，逐步检查代码的运行状态。
-
普通断点：在想断住的那一行左侧单击一下就可以添加一个断点，运行到该处就会断住。
-
条件断点：右键单击代码所在的行左侧，会出现一个下拉框，可以添加一个条件断点。输入条件表达式，当运行到这一行代码并且表达式的值为真时就会断住。
- DOM 断点：在 Chrome Devtools 的 Elements 面板的对应元素上右键，选择 break on，可以添加一个 dom 断点，也就是当子树有变动、属性有变动、节点移除这三种情况的时候会断住。可以用来调试导致 dom 变化的代码。
-
Event Listeners 打断点：在 Chrome Devtools 的 Elements 面板上找到你想排查的 dom 节点，右侧面板 Event Listeners 中会有当前阶节点，可以当前节点打断点调试。
-
异常断点：在 Debugger 面板勾选 Uncaught Exceptions 和 Caught Exceptions 可以添加异常断点，在抛出异常未被捕获或者被捕获时断柱。用来调试一些发生异常的代码时很有用。
5. Network
在 Network 面板中，可以查看所有网络请求的详细信息，包括请求头、响应头、状态码、响应时间等。
-
过滤请求
- 使用过滤器快速找到特定的请求类型（如 XHR、JS、CSS 等）。
- 使用搜索框查找特定的请求 URL 或响应内容。
-
分析请求问题
- 检查请求状态码（如 404、500 等）以确定问题。
- 查看请求参数和响应内容，确保数据正确。
6. Application
Application 面板可以查看和操作本地存储、Cookie、缓存等。
-
检查 LocalStorage 和 SessionStorage
- 查看存储的键值对，确保数据正确。
- 手动添加、编辑或删除存储项。
-
检查 Cookies
- 查看 Cookie 的详细信息，包括名称、值、过期时间等。
- 手动编辑或删除 Cookie。
本文参考文章地址：juejin.cn/post/705549...