赞
踩
报错和Bug,是贯穿程序员整个编程生涯中,无法回避的问题。而调试,就是帮助程序员定位问题、解决问题的重要手段,因此调试是每个程序员必备技能。
调试本身可分为两个过程: 定位问题 和 解决问题(靠开发的基本功)。
调试快速定位:
1.掌握调试工具的基本使用
2调试基本流程
3.通过案例定位Bug,修复Bug。
文章学习内容:
1.掌握Chrome调试工具的基本使用
2.认识常见Js4种报错姿势
3.能够在报错中提取关键信息
4.能够通过调试工具、二分注释排除法,准确定位代码Bug位置。
学习目标:
1.常见Bug,1分钟内找出Bug位置。
2.隐藏Bug,二分注释法,准确找出Bug位置。
调试工具的面板有很多,需要掌握做常用的4个:
Chrome DevTool 调试工具
两种打开方式:
1右击网页-选择”检查
2.快捷键F12或Fn+F12
作用:快速调试样式
⭕注意:刷新会丢失
技巧:
1.调试样式上下方向键可以快速微调
2.存储为全局变量,快速获取 dom 元素
例:选中文本框中的输入值并且设置为全局变量,此后将控制台的变量获取value值
作用: 输出浏览器运行过程中产生的信息
技巧:
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)
断点: 代码会在断点处停住,给开发者观察的机会
需要掌握的操作按钮如下:
控制执行的按钮分别是:
浏览器与服务器通过HTTP协议通信流程
游览器发的请求信息展示:
HTTP状态码
(1)成功(2XX)
状态码 | 原因短语 | 说明 |
200 | OK | 表示从客户端发来的请求,在服务器端被正确处理 |
201 | Created | 请求已经被实现,而且有一个新的资源已经依据请求的需要而建立 通常是在POST请求,或是某些PUT请求之后创建了内容,进行的返回的响应 |
204 | No content | 表示请求成功,但响应报文不含实体的主体部分 (后端不返回任何内容) |
(2)客户端错误(4XX)
状态码 | 原因短语 | 说明 |
400 | Bad Request | 请求报文存在语法错误(《传参格式不正确) |
401 | UnAuthorized | 权限认证未通过(没有权限) |
404 | Not Found | 表示在服务器上没有找到请求的资源 |
405 | Method Not Allowed | 请求的方法不对 |
(5)服务端错误(5XX)
状态码 | 原因短语 | 说明 |
500 | Internal Sever Error | 表示服务器端在执行请求时发生了错误 |
503 | Service Unavailable | 表明服务器暂时处于超负载或正在停机维护,无法处理请求 |
核心原则: 精确定位BUG位置,分析原因、解决问题
报错可简单分两大类:
1.JS 常见错误
2.类库兼容问题
程序员问题,掌握报错查看技巧,快速解决。类库兼容问题,面向百度、Github 、 Google 编程
1.SyntaxError (语法错误)
2.ReferenceError (引用错误)
3.TypeError(类型错误)
4.RangeError(死循环)
小结
常见报错类型-4类
报错中需要关注的三类信息:
小技巧:
1.从左向右、从上向下阅读报错
2.点击报错文件,Chrome调试工具,自动定位到报错位置。
目前前端工程化、模块化开发,一个项目中会使用到大量的第三方库,而不同的库升级速度之间存在差异,会导致前端出现大量的兼容报错。
如何确定是第三方库的问题?
报错信息中无源码文件提示,无常见错误提示。如下图
如何解决此类问题?
目标: 前后端分离开发方式普及,前后端先各自开发,再联调。因此,前端开发工程师,需要熟练使用 Network 面试调试
如何确定前后端通信出现问题?
HTTP状态码: 出现4xx、5xx
目标: 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 面板
目标:5XX一般为后台问题,把关键信息给后端,通知后端参与处理。
建议一次性发给后端的数据 :
程序员最头疼的Bug,没有报错,没有任何提示。
步骤:
总结
应该具备以下能力:
1.掌握Chrome调试工具的基本使用
2.认识常见报错的种类
3.能够在报错中提取关键信息
4.能够通过调试工具、二分注释排除法,准确定位代码Bug位置
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。