初学者必看，前端 Debugger 调试学习

1.文章简介：

报错和Bug，是贯穿程序员整个编程生涯中，无法回避的问题。而调试，就是帮助程序员定位问题、解决问题的重要手段，因此调试是每个程序员必备技能。

调试本身可分为两个过程:  定位问题 和 解决问题（靠开发的基本功）。

调试快速定位：

1.掌握调试工具的基本使用
2调试基本流程
3.通过案例定位Bug，修复Bug。

文章学习内容：

1.掌握Chrome调试工具的基本使用
2.认识常见Js4种报错姿势
3.能够在报错中提取关键信息
4.能够通过调试工具、二分注释排除法，准确定位代码Bug位置。

学习目标：

1.常见Bug，1分钟内找出Bug位置。
2.隐藏Bug，二分注释法，准确找出Bug位置。

---

2.调试工具的基本功能介绍

调试工具的面板有很多，需要掌握做常用的4个：

• 元素(Element)
• 控制台 (Console)
• 源代码 (Sources)
• 网络 (Network)

Chrome DevTool 调试工具 

两种打开方式:
1右击网页-选择”检查
2.快捷键F12或Fn+F12 

2.1 元素(Element)

作用：快速调试样式
⭕注意：刷新会丢失

技巧：

1.调试样式上下方向键可以快速微调

2.存储为全局变量，快速获取 dom 元素

例：选中文本框中的输入值并且设置为全局变量，此后将控制台的变量获取value值

---

2.2 控制台（Console）

作用: 输出浏览器运行过程中产生的信息

技巧:
1.可以当做计算器
2.可以运行代码

console.log('这是一个普通颜色的信息',);
console.warn('这是一个黄色颜色的信息，警告开发者',);
console.error('这是一个红色颜色的信息，显示报错信息',);
 
console.dir(h1);
 
const fn = ();
console.dir(fn);

打印一个DOM元素

const hINode = document.queryselector('h1')
// Js中万物皆对象
// dir专门打印对象
console.dir(hlNode)
function he11o() { }
console.dir(he11o)

---

2.3 源代码（Source）

断点: 代码会在断点处停住，给开发者观察的机会

需要掌握的操作按钮如下：

控制执行的按钮分别是：

---

2.4 网络(NetWork) 

浏览器与服务器通过HTTP协议通信流程 

 游览器发的请求信息展示：

---

HTTP状态码

HTTP 状态码 | 菜鸟教程HTTP 状态码 当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。 HTTP 状态码的英文为 HTTP Status Code。。 下面是常见的 HTTP 状态码： 200 - 请求成功 301 - 资源（网页等）被永久转移到其它URL 404 - 请求的资源（网页等）不存在..https://www.runoob.com/http/http-status-codes.html

（1）成功(2XX)

 （2）客户端错误(4XX)

 （5）服务端错误(5XX)

---

3. 调试基本流程

核心原则: 精确定位BUG位置，分析原因、解决问题

 3.1 整体流程

1. 有报错: 查看控制台，定位是否为语法问题、类库兼容问题
2. 通信不成功: 查看网络，定位前端问题，或是后端问题
3. 无报错，或报错且无有效信息-二分注释排查法

3.2 控制台报错

报错可简单分两大类：
1.JS 常见错误
2.类库兼容问题
程序员问题，掌握报错查看技巧，快速解决。类库兼容问题，面向百度、Github 、 Google 编程 

 （1）JS 常见错误

1.SyntaxError (语法错误)

2.ReferenceError (引用错误)

3.TypeError(类型错误)

4.RangeError(死循环) 

小结
常见报错类型-4类

• syntaxError-语法错误
• ReferenceError-引用错误，通常是变量或方法没有声明，直接使用。
• TypeError-类型错误，通常是在错误的数据类型上，访问某个方法或属性
• RangeError-死循环

报错中需要关注的三类信息：

• 报错信息: 错误类型、提示文字
• 报错文件
• 报错行数 

小技巧：
1.从左向右、从上向下阅读报错
2.点击报错文件，Chrome调试工具，自动定位到报错位置。

---

（2）认识-类库兼容问题

目前前端工程化、模块化开发，一个项目中会使用到大量的第三方库，而不同的库升级速度之间存在差异，会导致前端出现大量的兼容报错。

• 如何界定是第三方库的问题?
• 如何解决此类问题?

如何确定是第三方库的问题?
报错信息中无源码文件提示，无常见错误提示。如下图

如何解决此类问题?

• 面向百度编程、面向Google编程。
• 经验积累，看得多，了解的多 

---

3.3 前后端通信问题

目标:  前后端分离开发方式普及，前后端先各自开发，再联调。因此，前端开发工程师，需要熟练使用 Network 面试调试

如何确定前后端通信出现问题?
HTTP状态码:  出现4xx、5xx

• 4xx: 根据状态码和接口报错信息，修复代码
• 5xx: 提供调用数据，通知后台查看
• 2xx: 以预期数据与实际数据一致为准

 

（1）状态码 4XX

目标:  4xx大概率是前端调用API出现问题，需要熟练结合 console 和 Network 面板处理。

出现4XX，结合状态码快速分析原因
（1）400:请求体传递参数不对
1.NetWork查看请求体
2.比对接口文档
        1.数据格式，是否一致。
        2.属性名，是否一致。
（2）401:token失效，请求头没有携带token。
        1.查看请求头，是否有token
        2.重新登录，验证token过期.
（3）404:没有该接口(通常是url路径写的有问题)
        1.查看请求头上的url路径
        2.核对接口文档的url路径
（4）405:请求方式不对(通常是get 、post、put等方式写错)
        1查看请求头中的method字段
        2.核对接口文档的method字段

快速修复：通过 Source 面板

---

（2）状态码 5XX

目标：5XX一般为后台问题，把关键信息给后端，通知后端参与处理。

建议一次性发给后端的数据 : 

1. 请求路径
2. 请求方式
3. 状态码
4. 请求体(载荷):数据
5. 响应体(预览)

 

---

（3）状态码 2XX

• 目标: 2XX一般代表成功，但也不绝对。
• 定位: 以预期数据与实际数据，是否相符合为准。

 

 

---

3.4 二分注释法

1. 目标: Bug是编码错误导致的。
2. 推导1: 删除掉所有的代码，应该不会有Bug存在。
3. 推导2: 删除掉错误的代码，应该不会有Bug存在

程序员最头疼的Bug，没有报错，没有任何提示。

步骤:

1. 通过不断注释代码，观察程序是否恢复正常
2. 注释掉部分代码后，程序正常，证明该部分代码有Bug
3. 在Bug部分，继续小部分的注释，观察程序是否正常
4. 持续1-3步骤，定位出Bug位置 

总结
应该具备以下能力:

1.掌握Chrome调试工具的基本使用
2.认识常见报错的种类
3.能够在报错中提取关键信息
4.能够通过调试工具、二分注释排除法，准确定位代码Bug位置