这是我参与「第四届青训营 」笔记创作活动的的第四天
一、Bug、Debug
1、Bug的产生（可能的）原因
①.需求表述、理解、编写引起的错误。
②.系统设计架构引起的错误。
③.开发过程缺乏有效的沟通及监督，甚至没有沟通或监督。
④.程序员编程中产生的错误。 ⑤.软件开发工具本身隐藏的问题。
⑥.软件复杂度越来越高。
⑦.与用户需求不符，即使软件实现本身无缺陷。
⑧.外界应用环境或电磁辐射导致的缺陷。
上述情况都可能产生缺陷，常见的缺陷分为以下4种情况。
1.遗漏 规定或预期的需求未体现在产品中，可能在需求调研或分析阶段未能将用户规格全部分析实现，也可能在后续产品实现阶段，未能全面实现。通俗而言，一是根本没记录需求，需求本身就遗漏了客户的原始需求，二是需求是齐备完整的，但在设计开发阶段，遗漏了某些需求。
2.错误 需求是正确，但在实现阶段未将规格说明正确实现，可能在概要、详细设计时产生了错误，也可能是编码错误，即有此需求，但需求实现与用户期望不一致。例如，排序功能，用户期望的是按价格升序排列，实现时却是降序排列。
3.冗余 需求规格说明并未涉及的需求被实现，即用户未提及或无需的需求，在被测对象中得到了实现，如用户未提及查询结果分类显示，但在实际实现中，却以不同类别进行了显示。 一般而言，冗余功能从用户体验角度来看，如果不影响正常的功能使用，则可以保留，除非存在较大应用风险。
4.不满意 除3种常见缺陷类型外，用户对实现不满意亦可称为缺陷。例如，针对中老年人的系统在设计开发过程中，采用了时尚前卫的界面、细小隽秀的字体，导致终端用户不适应、看不清，即使所有需求都得到了实现，但不符用户使用习惯，也是一种缺陷。
2、Debug特点
①多平台 ②多环境 ③多工具 ④多技巧
二、Score Tab
区域1：页面资源文件目录树
区域2：代码预览区域
区域3：Debug工具栏 从左到右依次位：
①暂停（继续） ②单步跳过 ③进入函数 ④跳出函数 ⑤单步执行 ⑥激活（关闭）所有断点 ⑦代码执行异常处自动
区域4：断点调试器
三、NetWork
区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4：Request Table 面板
区域5：总结面板
区域6：请求详情面板
四、Application
Application面板展示与本地存储相关信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
五、Performance
- 区域1：控制面板
- 区域2：概览面板 ①FPS：每秒帧数 ②CPU：处理各个任务花费的时间 ③NET：各个请求花费时间
- 区域3：线程面板 ①Frames：帧线程 ②Main：主线程，负责执行Javascript，解析HTML/CSS，完成绘制 ③Raster：Raster线程，负责完成某个lyper或某些块（tile）的绘制
- 区域4：统计面板
六、真机调试
1、ios（在没有iPhone设备可在Mac App Store 安装Xcode使用其内置的ios模拟器）
①使用Lightning数据线将iphone与Mac 相连
②iphone开启Web检查器（设置 ->Safari ->高级 ->开启Web检查器）
③iPhone使用Safari浏览器打开要调试的页面
④Mac打开Safari浏览器调试（菜单栏 ->开发 ->iphone 设备名 ->选择调试页面）
⑤在弹出的Safari Developer Tools中调试
2、Android
①使用USB数据线将手机将电脑连接
②手机进入开发者模式，勾选USB调试，并允许调试
③电脑打开Chrome浏览器，在地址栏输入 ：chrome://inspect/#devices 并勾选Discover USB devices选项
④手机允许远程调试，并访问调试页面
⑤电脑点击inspect按钮 ⑥进入调试界面
七、线上即时修改Overrides
- 打开Sources面板下的Overrides
- 点击Select folders for Overrides 选择一个本地的空文件夹目录
- 允许授权
- 在page中修改代码，修改完成后command+s保存
- 打开devTools，点击右上角的三个小点 ->More tools ->Changes,就可以看到所有修改了
八、利用代理解决开发阶段的跨域问题
九、代理工具Mock数据
- 右键选中要mock数据的接口，选择save response，保存文件到本地
- 本地打开保存文件，编辑想mock的数据并保存
- 右键选中第一步的接口，选择Map Local ，Local Path选择第二步的文件
