这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
一、本堂课重点内容：
- 本堂课的知识要点有哪些？
- Elements
- Console
- Source
- Performance
- Network
- 真机调试
- 代理调试
- 常用工具
二、详细知识点介绍：
- 本堂课介绍了哪些知识点？
PC端：Chrome devTools
前端debug的特点：多平台、多环境、多工具、多技巧
打开:F12/检查
elements 元素和样式
支持动态修改
点击.cls动态修改class，选中元素点右键：force state，可以选伪类，或者在:hov里选
computed里可以搜索样式
右键选中某个元素如body，选截屏可以自动保存截屏
console 控制台
常用日志技巧：
- console.log白、warn黄、error红、info深蓝、debug白？
- 可以输出指定样式
console.log("%o %c%s",{name:'tom',age:18},'font-size:30px;color:green','try')占位符：%s字符串 %c样式 %d数字 %o对象 - 自带的颜色区分可以区别类型（数字/字符串，蓝/红）
console.table可以具象化展示json和tableconsole.dir可以文件树的形式展示div的属性
source 源代码
左中右分别是目录树、代码预览、debug工具栏（右上）、断点调试器（右下）
debug工具包括暂停、单步跳入、进入函数、跳出函数、单步执行、激活/关闭所有断点、代码执行异常处自动
加断点：在代码中写debugger/在source点击行号，结合console.log使用，鼠标放在变量上/右边的watch就可以观测变量的值
scope：作用域，包含闭包。local、closure、global
call stack：调用栈
XHR网络请求断点、DOM变化时断点……
压缩后的代码如何调试？用sourcemap映射回源码进行调试（webpackc config ：devtool：sourcemap）。实际生产过程中，打包好的sourcemap被移出，放在另一个错误监控平台上
network 网络
展示站点请求的资源，filter行可以对资源进行过滤，注意最下方有请求数量和时间的统计。
瀑布图对应开发时的串并行
第二行可以模拟各种网速
headers完整的请求
application 浏览器存储相关
local/session storage, indexedDB, webSQL, cookie
clear site data可以清除网页本地存储
performance 性能
从上到下：控制面板、概览、线程、统计
概览：FPS每秒帧数、CPU：处理各个任务所需时间、NET：网络请求所需时间
线程：frames帧线程、main主线程（执行js，解析html/css，绘制页面），raster线程负责完成某个layer或者某些块tile的绘制
页面卡顿 - 看FPS指标 - 寻找性能瓶颈 - 优化代码
main里会显示每个任务执行的时间，看每个帧的详情。（重绘和重排造成页面卡顿，offsetTop/存储dom位置）去官网案例学习！
lighthouse 核心web指标
LCP 最大内容绘制，测量加载性能，2.5s内
FID 首次输入延迟，测量交互性，100ms内
CLS 累积布局偏移，测量视觉稳定性，0.1及以下
lighthouse给出评分并给出优化手段
移动端
真机调试
数据线连真机调试/云真机
VConsole
注入组件，类似chrome
代理工具调试
charles小花瓶、fidder等
nodejs调试
inspector protocol+chrome devtool
命令：node --inspect=8888 index.js,在浏览器里打开配置之后就可以用devtools调试node程序
inspector protocol+vs code
大同小异，在vs code里debug
常用前端开发技巧
线上修改及时override
source里选中override，可以覆盖样式的即时修改，并且在more tools/changes里可以看到修改的记录
已经逐渐被热更新取代
代理解决跨域问题
开发：可以配置代理转发，或者webpack的loader帮忙
线上：nginx等代理转发请求
启动本地source map
map local把远程的代理到本地
使用代理工具mock数据
选mock local
小黄鸭
……给小黄鸭解释你的代码，大佬做法
三、实践练习例子：
- 有什么实践举例帮助理解知识点？
- 跟着老师过了一些调试的案例
四、课后个人总结：
- 本章有什么知识点不容易掌握？
- Charles调试，之前没用过
- 什么地方容易与其他内容混淆？
五、引用参考：
- 我参考了哪些外部博客/笔记/文章？
- 文章中有什么地方是我参考引用了外部博客/笔记/文章的？
