调试入门秘籍
学习目标
报错和Bug,是贯穿程序员整个编程生涯中,无法回避的问题。而调试,就是帮助程序员定位问题、解决问题的重要手段,因此,调试是每个程序员必备技能。
调试本身可分为两个过程:定位问题 和 解决问题。
本课程将集中讨论如何快速发现 和 定位问题,解决问题本身就是开发的基本功,具体办法涉及框架,这里不深入探讨。我们将从以下几点开始:
- 掌握调试工具的基本使用
- 调试基本流程
- 通过案例定位Bug,修复Bug。
学完今天的内容:
- 掌握Chrome调试工具的基本使用
- 认识常见
JS
4种报错姿势 - 能够在报错中提取关键信息
- 能够通过调试工具、二分注释排除法,准确定位代码Bug位置。
验证效果:
- 常见Bug,1分钟内找出Bug位置。
- 隐藏Bug,二分注释法,准确找出Bug位置。
Chrome DevTool调试工具
两种打开方式:
- 右击网页-选择"检查"
- 快捷键
F12
或Fn
+F12
调试工具的基本功能介绍
调试工具的面板有很多,先掌握做常用的4个:
- 元素(Element)
- 控制台(Console)
- 源代码(Sources)
- 网络(Network)
元素 (Element)
**作用:**快速调试样式
**注意:**刷新会丢失
**实用小技巧:**🔔🔔
- 调试样式 上 下 方向键可以快速微调
- 存储为全局变量,快速获取
dom
元素
控制台(Console)
**作用:**输出浏览器运行过程中产生的信息
**实用小技巧:**🔔🔔
- 可以当做计算器
- 可以运行代码
如何打印不同的颜色?
console.error('这是一条红色的文字');
console.log('这是一条黑色的文字');
console.warn('这是一条黄色的文字');
如何打印一个DOM元素?
const h1Node = document.querySelector('h1')
// JS中万物皆对象
// dir专门打印对象
console.dir(h1Node)
function hello() { }
console.dir(hello)
源代码 (Source)
断点:代码会在断点处停住,给开发者观察的机会
需要掌握的操作按钮:
上面有几个控制执行的按钮,分别是
- 恢复执行
- 跳过下一个函数的执行过程
- 进入函数调用
- 跳出函数调用
- 单步执行
- 让断点失效
网络 (NetWork)
知识补充:浏览器与服务器通过HTTP协议通信流程
访问示例网站(http://geek.itheima.net/),观察请求信息:
浏览器发的请求信息展示
服务端响应的信息展示:
了解的HTTP状态码有哪些?
扩展:完整的状态码
成功(2XX)
状态码 | 原因短语 | 说明 |
---|---|---|
200 | OK | 表示从客户端发来的请求,在服务器端被正确处理 |
201 | Created | 请求已经被实现,⽽且有⼀个新的资源已经依据请求的需要⽽建⽴ 通常是在POST请求,或是某些PUT请求之后创建了内容, 进行的返回的响应 |
204 | No content | 表示请求成功,但响应报⽂不含实体的主体部分(后端不返回任何内容) |
客户端错误(4XX)
状态码 | 原因短语 | 说明 |
---|---|---|
400 | Bad Request | 请求报⽂存在语法错误((传参格式不正确) - |
401 | UnAuthorized | 权限认证未通过(没有权限) |
404 | Not Found | 表示在服务器上没有找到请求的资源 |
405 | Method Not Allowed | 请求的方法不对 |
服务端错误(5XX)
状态码 | 原因短语 | 说明 |
---|---|---|
500 | Internal Sever Error | 表示服务器端在执⾏请求时发⽣了错误 |
503 | Service Unavailable | 表明服务器暂时处于超负载或正在停机维护,⽆法处理请求 |
调试基本流程
核心原则:精确定位bug位置,分析原因、解决问题。
整体流程:
- 有报错:查看控制台,定位是否为语法问题、类库兼容问题。
- 通信不成功:查看网络,定位前端问题,或是后端问题。
- 无报错,或报错且无有效信息-二分注释排查法。
控制台报错:💥💥💥💥💥
程序报错是编程中,设计的辅助开发机制,报错是要把关键信息,给程序员查看。
因此,看见报错不要慌,看见英文不要慌。掌握以下几个关键点,不会英文,也能吊打报错。
报错不可怕,可怕的是不报错。
报错可简单分两大类:
JS
常见错误- 类库兼容问题
程序员问题,掌握报错查看技巧,快速解决。类库兼容问题,面向百度、Github
、Google
编程。
认识-JS常见错误
思考:是否留意过控制台报错,有几种类型?各自代表什么?
参考:来自1000个大型JS项目中的报错
常见错误有3~4类:
SyntaxError
(语法错误)
2. ReferenceError
(引用错误)
3. TypeError
(类型错误)
4. RangeError
(死循环)
小结:
- 常见报错类型-4类:
SyntaxError
- 语法错误ReferenceError
- 引用错误,通常是变量或方法没有声明,直接使用TypeError
- 类型错误,通常是在错误的数据类型上,访问某个方法或属性RangeError
- 死循环
- 报错中需要关注的三类信息
- 报错信息:错误类型、提示文字
- 报错文件
- 报错行数
如何解决此类问题?
- 面向百度编程、面向Google编程。
- 经验积累,看得多,了解的多。
前后端通信问题
目标:前后端分离开发方式普及,前后端先各自开发,再联调。因此,前端开发工程师,需要熟练使用
NetWork
面试调试。
如何确定前后端通信出现问题?
HTTP状态码:出现
4XX、5XX
4XX
:根据状态码和接口报错信息,修复代码。
5XX
:提供调用数据,通知后台查看。
2XX
:以预期数据与实际数据一致为准。
状态码4XX
目标:
4XX
大概率是前端调用API出现问题,需要熟练结合Console
和NetWork
面板处理。
出现4XX,结合状态码快速分析原因:
400:请求体传递参数不对。
- NetWork查看请求体
- 比对接口文档,
- 数据格式,是否一致。
- 属性名,是否一致。
401:token失效,请求头没有携带token。
- 查看请求头,是否有token
- 重新登录,验证token过期。
404:没有该接口(通常是url路径写的有问题)
- 查看请求头上的url路径
- 核对接口文档的url路径
405:请求方式不对(通常是get 、post、put等方式写错)
- 查看请求头中的method字段
- 核对接口文档的method字段
快速修复技巧
目标:原因已经确定,如果快速定位代码?
可以通过善用Source面板。
状态码5XX
目标:5XX一般为后台问题,可以把关键信息发送给后端,通知后端参与处理。
想想如下对话:
前端:“老哥,你的接口报500,你帮忙看看?”
后台:“哪个接口报错?”
前端:“xxx接口报错”
…10分钟…
后台:“你调接口,传了什么参数?”
… 这个时候你可能忘了10分钟前调用接口传了什么参数
前端:“稍等,我复现一下”.
…这个时候你不得不听下手头工作,去复现报错,再发给后台
…10分钟后…
后台:“没测出来啊,响应有什么报错提示吗?”
建议一次性发给后端的数据:
请求路径
请求方式
状态码
请求体(载荷):数据
响应体(预览)
二分注释法
目标:Bug是编码错误导致的。
推导1:删除掉所有的代码,应该不会有Bug存在。
推导2:删除掉错误的代码,应该不会有Bug存在。
程序员最头疼的Bug,没有报错,没有任何提示。
步骤:
- 通过不断注释代码,观察程序是否恢复正常
- 注释掉部分代码后,程序正常,证明该部分代码有Bug
- 在Bug部分,继续小部分的注释,观察程序是否正常。
- 持续1-3步骤,定位出Bug位置。
总结
学完本节课程,应该具备以下能力:
- 掌握Chrome调试工具的基本使用
- 认识常见报错的种类
- 能够在报错中提取关键信息
- 能够通过调试工具、二分注释排除法,准确定位代码Bug位置。