Bug & Debug
什么是Bug
- 产品说明书中规定要做的事情，而软件没有实现。
- 产品说明书中规定不要做的事情，而软件确实现了。
- 产品说明书中没有提到过的事情，而软件确实现了。
- 产品说明书中没有提到但是必须要做的事情，软件确没有实现。
- 软件很难理解，很难使用，速度超慢，测试人员站在最终用户的角度看到的问题是平常的但不是正确的。
前端Debug的特点
- 多平台 浏览器、Hybrid、 Nodels、 小程序、桌面应用等
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools. Charles、 Spy-Debugger、Whistle、vC onsole
- 多技巧 Console、BreakPoint sourceMap、 代理等
Chrome DevTools
动态修改元素和样式
- 输入字符串可以动态的给元素添加类名
- 点击.cls开启动态修改元素的class
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到style面板中的CSS规则
可以用以下2种方式强制激活伪类：
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console. error
- console.debug
- console .info
- console.table 具像化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息 %s:字符串占位符，%o:对象占位符，%c:样式占位符，%d:数字
Sorce Tab
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
Scope与Call Stack
- 展开Scope可以查看作用域列表(包含闭包)
- 展开Call Stack可以查看当前javaScript代码的调用栈
压缩后的代码如何调试
前端代码天生具有“开源"属性，出于安全考虑，上 线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、 'b' 等替换，整体变得不可阅读。那么压缩后的代码如何调试呢?
NetWork
- 控制面板
- 过滤面板
- 概览区域
- Request Table面板
- 总结面板
- 请求详情面板
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance
控制面板
概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascript,
- 解析HTML /CSS,完成绘制
- Raster: Raster线程， 负责完成某个
- layer或者某些块(ile)的绘制。
统计面板
使用代理工具调试
原理:
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例:
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
NodejS调试
- 执行命令node - -inspect= 8888 index.js
- chrome浏览器访问服务
- 点击绿色node图标打开node调试面板(在chrome://inspect/ #devices中配置network target)
- 在node调试面板中使用断点调试
常用开发调试技巧
线上即时修改Overrides
- 打开Sources面板下的的打开源面板下的的Overrides
- 点击Select folders for Overrides点击选择文件夹目录
- 3.允许授权
- 4.在page中修改代码，修改完成后command + S保存
- 5.打开devTools，点击右上角的三个小点 ==> More tools ==> Changes,就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地source map
使用代理工具Mock数据
- 右键选中要mock数据的接口，选择save response,保存文件到本地。
- 本地打开保存的文件，编辑想mock的数据并保存。
- 右键选中第一步的接口， 选择Map Local, Local Path选择第二步的文件。
小黄鸭调试大法
