这是我参与「第四届青训营」笔记创作活动的第14天

一、本堂课重点内容

bug与debug
Chrome DevTools

二、知识点介绍

前端debug特点:

多平台：浏览器，Hybird,小程序，桌面应用....，
多环境:本地开发环境，线上环境，
多工具：devTools,Charles,Spy-Debugger,Whistle,vConsole....，
多技巧:console,BreakPoint,SourceMap....

chrome

1、动态修改元素和样式

点击.cls开启动态修改元素的class
输入字符可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览内容区域实时预览
Computed下点击样式里的箭头可以跳转到styles面板中的css规则 强制激活伪类：1、选中元素，点击.hov DOM数右键选择Forxe State

2、console

console.log()
console.warn()警告
console.error()报错
console.debug()
console.info()
console.table()具象化的展示JSON和数组数据
console.dir()通过类似文件树的方式展示对象的属性

占位符：给日志添加样式。例如：console.log('%s %o,%c%s','hello',{name='tom',age='18'},'font-size=24px;color:red','welcome')

3、sorce Tab

左侧页面：页面资源文件树
中间部分：代码预览区域
右上方区域：Debug工具栏，从左到右依次为暂停/继续，单步跳过，进入函数，跳出函数，单步执行，激活（关闭）所有断点，代码执行异常处自动
右下方区域：断点调试自动 3.1使用关键字debugger 或代码预览区域的行号设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断电列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值

3.2展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javaScript代码的调用栈

3.3Source Map mapping字段存储了源文件和Source Map 的映射

Network

区域有控制面板，过滤面板，概览区域，Request Table 面板，总结面板，请求详情面板

Application

Local Storage, Session Storage, indexedDB, web SQL, Cookie

Performance

控制面板
概览面板（FPS：每秒帧数，CPU：处理各个任务花费的时间，NET:各个请求花费时间）
线程面板（Frames：帧线程，Main:主线程，负责执行Javascript,解析HTML/CSS，完成绘制，Raster：Raster线程，负责完成某个layer或者某些块的绘制）

Lighthouse

LCP：加载性能 FID：测量交互性 CLS：测量视觉稳定性

前端开发调试|青训营笔记3