这是我参与「第四届青训营 」笔记创作活动的第8天
了解Chrome DevTools
Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。
1.Elements面板
- 通过
.cls动态添加删除修改元素类名以及样式 - 右键某个元素在菜单选择
Force State可以选择锁定对应的伪类或者使用:hov锁定 Computed下可以搜索对应样式，然后跳转到styles面板中的css规则- 对
DOM结构也可以添加删除修改对应的节点或属性
2.Console面板
a.控制台输出日志
- 普通打印：
console.log - 效果同普通打印：
console.debug、console.info - 警告打印：
console.warn - 错误打印：
console.error
- 将数据以表格形式展示：
console.table - 打印节点树形结构：
console.dir
b.占位符
给日志添加css样式，可以突出重要的信息
%s：字符串占位符%o：对象占位符%c：样式占位符%d：数字占位符
如图：
3.Sources面板
你可以在这个面板里面调试你的JS代码，也可以在工作区打开你的本地文件。
- 在程序中输入
debugger可以在代码运行到对应的位置暂停 - 在代码预览区对应的行数旁点一下可以添加断点，跟
debugger行为一样 - 在调试器中
Watch右侧点击+添加变量，查看对应变量 DOM breakpoint，XHR/fetch breakpoint第一个是给DOM添加断点，后者是有请求发生的时候会触发断点Scope可以看到对应代码的作用域，CallStack是查看当前代码的执行栈Sourcemap映射了压缩后的代码对应的源文件，sourcemap文件和源文件只会上传到监控平台，真正上线只会上线源文件
4.Performance面板
监控性能相关的
区域1：控制面板
区域2：概览面板
FPS：每秒的帧数CPU：处理各个任务花费的时间NET：各个请求花费的时间
区域3：线程面板，
Frames：帧线程，Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制；Raster：Raster线程，负责完成某个layer或者某些块的绘制
区域4：统计面板
5.Network面板
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
6.Application面板
显示对应的本地储存数据
LocalStorageSessionStorageIndexedDBWebSQLCookie
点击左侧Application下的Stroage面板中的Clear Site Data可以清楚看到网页的本地存储数据
7.lighthouse面板
审计面板会对页面的加载进行分析，然后给出提高页面性能的建议，官网建议查看PageSpeed Insights来获得更多的页面加载建议。
8.Security面板
用于检测当面页面的安全性
9.Memory面板
Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况
H5 / 移动端调试
1.真机调试
2.使用代理工具调试
原理： 用电脑作为代理服务器，手机通过HTTP代理连接到电脑，这时手机上的请求都会经过代理服务器。
常用的代理工具：
Charles：****适合查看、控制网络请求、分析数据Fiddler：与Charles类似，适用window平台spy-debugger：远程调试手机页面，抓包whistle：基于Node实现的跨平台Web调试代理工具
常用开发调试技巧
1.线上即视修改Overrides
- 在
Source里面的overrides - 点击
Select folders for Overrides，选择一个本地的空文件目录 - 允许授权
- 在
page中修改代码，修改完成后保存 - 打开
devTools，点击右上角的··· -> More tools -> Changes，就能看到所有修改
2.用本地的sourcemap文件代理到远程，可以在本地看到对应的源代码的错误位置
