这是我参与「第四届青训营 」笔记创作活动的第6天
前端的特点
1、多平台
2、多环境（本地开发环境，线上环境）
3、多工具
4、多技巧
Chrome DevTools
打开浏览器，右击，点击检查
Elements
显示出来的是网页的里面的元素的样式：
点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号，颜色，宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到styles面板中的css规则
Console
控制台，可以输入内容
左侧可以选择等级，对日志进行分类查看
console.table 具象化的展示，JSON和数组数据
console.dir 通过类似文件树的方式展示对象的属性
占位符 给日志添加样式，可以突出重要的信息
%s：字符串占位符 %o 对象占位符 %c 样式占位符 %d 数字占位符
Sources
可以查看源代码
左边：页面资源文件目录树
中间：代码预览区域
右边；Debug工具栏 （可以使用断电调试）
从左到右依次为： 暂停（继续），单步跳过，进入函数，跳出函数，单步执行，激活（关闭）所有断电，代码执行异常处自动
Scope与Call Stack
展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javaScript代码的调用栈
Source Map
mappings字段存储了源文件和Soure Map的映射
英文，表示源码及压缩代码的位置关联，
逗号，分隔一行代码中的内容
分号，代表换行
NetWork
在栈加载时候，所用到的各种各样的属性 从上往下，从左到右，分别是：控制面板，过滤面板，概览区域，RequestTable面板总结面板 请求详情面板
Application
面板展示与本地存储相关信息
Local Storage
Session Storage
IndexedDB
Web SQL
Cookie
Performance
从上往下： 控制面板
概览面板 FPS：每秒帧数 CPU：处理各个任务花费的时间 NET：各个请求花费时间
线程面板 Frames:帧线程 Main:主线程，负责执行javascript,解析HTML/css,完成绘制 Raster:Raster线程，负责完成某个layer或者某些块（tile)的绘制
统计面板
核心Web指标
LCP最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
FID 首次输入延迟，测量交互性，为了提供良好的用户体验，页面的FID应为100毫秒或更短
CLS 累积布局偏移，测量视觉稳定性，为了提供良好的用户体验，页面的CLS应保持在0.1或更少
