这是我参与「第四届青训营 」笔记创作活动的的第8天。
一、本堂课重点内容：
主要讲我们我们前端的调试方法和解决Bug的思路。
二、详细知识点介绍：
Chrome DevTools
Elements
- 通过
.cls动态添加删除修改元素类名以及样式! - 输入字符串可以动态给元素添加类名
- 勾选/取消类名可以动态的查看类名的生效效果
- 点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览器内容实时预览
- Computed 下点击样式里的箭头可以跳到 style 面板中的 css 规则
强制激活伪类的方式
1. 选中具有伪类的元素，点击 :hov
2. DOM树右键菜单，选择 Force State
Console
控制到输出日志
- 普通打印：
console.log - 效果同普通打印：
console.debug、console.info - 警告打印：
console.warn - 错误打印：
console.error占位符 %s：字符串占位符%o：对象占位符%c：样式占位符%d：数字占位符
Source
这个功能就是可以在浏览器中调试你的JS代码，功能很强大
- 在程序中输入
debugger（也可以点击代码旁的箭头,然后刷新页面）就可以暂停代码，看代码的流程 - 在调试器中
Watch右侧点击+添加变量，查看对应变量 DOM breakpoint，XHR/fetch breakpoint第一个是给DOM添加断点，后者是有请求发生的时候会触发断点Scope可以看到对应代码的作用域，CallStack是查看当前代码的执行栈Sourcemap映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件
Performane
- 控制面板
- 概览面板
- 线程面板
- 统计面板
Network
我们可以在Network面板中看到资源请求的情况（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
移动端 H5 调试
真机调试
真机调试需要数据线与电脑相连
代理调试
原理： 用电脑作为代理服务器，手机通过HTTP代理连接到电脑，这时手机上的请求都会经过代理服务器。
常用工具
Charles：适合查看、控制网络请求、分析数据Fiddler：与Charles类似，适用window平台spy-debugger：远程调试手机页面，抓包whistle：基于Node实现的跨平台Web调试代理工具
常用的开发技巧
- 打开
Sources面板下的Overrides - 点击
Select folders for Overrides。选择个本地的空文件夹目录。 - 允许授权
- 在
page中修改代码，修改完成后command十S保存 - 打开
devTools点击右上角的三个小点-> More tools -> Changes,就能看到所有修改了
三、课后个人总结：
说实话我自己浏览器调试也算是比较熟练了，哈哈哈。但是！听了老师的介绍我真的怀疑自己了，真是小巫见大巫了，浏览器很多的调试技巧不用还是容易忘记呀，还是要不停的输出。
