这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
Web的devtool（F12）
今天学了调试器。以前也会用F12来看，但是一直没有系统的学，基本上也就只会element和console，其它的东西都是畏难，没学，今天正好学
element
显示元素的种类和样式
左边是html。右边可以看细节，甚至可以修改一些style属性，
左上角的剪头可以选中
computed
在computed里面可以搜索想调试的类名
console
可以打印出日志。一般有 log error warn info debug 五种方法，其打印出来的颜色不一样
console.dir 打开文件树，可以查找更多属性
source
左边有个page，可以在下面的文件下看到项目源代码
右边有个断点调试的显示，可以看不同的项目，展示的东西不同。scope可以看各个变量的值，call stack看执行栈。XHR可以制造请求时断点，发生请求就断下来
可以在中间的主界面打断点——手动打断点就是往代码里加debugger，执行到断点时就暂停，右边会显示此时的相关状态
一般还是console来调
压缩后的代码怎么调试——前端代码天生具有 “开源”属性，出于安全考虑，上线之前 JavaScript 代码通常会被压缩，压缩后的代码只有一行，变量使用‘a‘、‘b‘等替换
可以用source-map：当有错误的时候，可以在console里面点击，就回原来的代码了
network
展示站点请求的各种资源
瀑布图会看是并行还是串行
可以模拟在弱网络下运行
application
左边分栏展示各种存储相关的本地存储信息
performance
先点左上方按钮录制5秒
可以对各个部分的耗时进行统计
可以控制生成一个慢网速、慢硬件的场景来调试
lighthouse
点击性能分析
