这是我参与第四届青训营笔记创作活动的的第10天
前端必须知道的开发调试知识
Bug 和 Debug
bug的产生
关于软件中的缺陷被称为Bug，即虫子，这是有一段故事的。在早期的计算机中，常采用大量的继电器，用继电器的开合来表示二进制。马克二型计算机就是这样的。1945年9月9日，下午三点，马克二型计算机无法正常工作了，技术人员试了很多办法，最后定位到第70号继电器出错。负责人哈珀观察这个出错的继电器，发现一只飞蛾躺在中间，已经被继电器打死。她小心地用摄子将蛾子夹出来，用透明胶布帖到“事件记录本”中，并注明“第一个发现虫子的实例。”自此之后，引发软件失效的缺陷，便被称为Bug。
前端debug的特点
- 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用。。。
- 多环境：本地开发环境、线上环境
- 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole。。。。
- 多技巧：Console、BreakPoint、sourceMap、代理。。。。
Chrome DevTools
动态修改元素和样式
-
点击
.cls开启动态修改元素的class。 -
输入字符串可以动态的给元素添加类名。
-
勾选/取消类名可以动态的查看类名的生效效果。
-
点击具体的样式值（字号、颜色、宽高等）可以进行编辑，浏览器内容区域实时预览。
-
Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
可以通过以下2种方法强制激活伪类
- 选中具有伪类的元素，点击
:hovDOM树右键菜单，选择Force State
Console
右侧可以选择等级，对日志进行分类查看
console.logconsole.warnconsole.errorconsole.debugconsole.info
console.table //具体化的展示JSON和数组数据console.dir //通过类似文件树的方式展示对象的属性
占位符：给日志添加样式，可以突出重要的信息
- %s：字符串占位符；
- %o：对象占位符；
- %c：样式占位符；
- %d：数字占位符
Sorce Tab
Break Point 与 Watch
Scope 与 Call Stack
- 展开Scope可以查看作用域列表（包含闭包）。
- 展开Call Stack可以查看当前js代码的调用栈。
压缩后的代码如何调试?
前端代码天生具有“开源”属性，出于安全考虑，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a'、'b'等替换，整体变得不可阅读。那么压缩后的代码应该如何调试。
Source Map
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
思考题：既然Source Map可以映射源码，那压缩后的代码不就又不安全了吗？
我们可以把映射过的项目文件上传到监控平台，然后将映射文件删除的项目文件再上线，当上线的项目出现问题时，我们可以在监控平台上找到对应的问题。
NetWork
Application
Prformance
Prformance的运用和示例
示例网址：googlechrome.github.io/devtools-sa…
Lighthouse
移动端H5调试
真机调试
没有iPhone设备可以在Mac APP Store安装Xcode使用其内置的iOS模拟器
直接使用手机扫码查看，体验更加
