1 Element 元素
- 如何单独选中页面上的元素：在页面上 右键——>检查 即可。
element-style：网页的元素和样式.cls：动态修改类名- 动态修改样式：直接在 style 里点击具体的样式值就可以修改
- 伪类是选择器的一种，它用于选择处于特定状态的元素。强制激活伪类:
- 选中具有伪类的元素，点击
:hover - DOM树右键 ——> Force State（强制执行状态）
element-conputed（计算样式）中点击样式里的箭头就可以跳转到styles中的css规则。
- 还发现一种很简单的截屏方法！
2 Console 控制台
console.logconsole.warn / console.error / console.debug / console.infoconsole.table(dataArray)用表格的形式具象化地展开JSON和数组数据console.dir通过类似文件树的方式展示对象的属性console.time- 占位符：给日志添加样式，可以突出重要的信息。
%s字符串占位符，%o对象占位符；%c样式占位符；%d数字占位符
3 Source 源代码
3.1 断点调试
在需要设置断点的地方写上debugge，或者在编辑器里点一下行号就行。
在调试的状态下，只要把鼠标移到想要观察值的变量上，就能够实时看到变量的值。
还可以在右侧的debug面板查看。
下面几个功能分别是：作用域列表、调用栈、网络请求断点、HTML元素变化时断点...
3.2 源映射（Source Map）
当我们使用工具（如Webpack）对源代码进行转换（如压缩、合并、编译等）时，生成的结果可能会难以理解和调试。
源映射（Source Map） 文件，提供了一种将压缩、混淆或转换后的代码映射回原始源代码的方法，以便在调试时能够准确定位到源代码的位置。
Webpack 在进行打包时，默认会生成源映射文件（通常命名为 bundle.js.map），可以通过配置 devtool 选项来指定要生成的源映射类型。如 inline-source-map、cheap-module-source-map、eval-source-map 。
点击报错点就会跳到源码（红色波浪线），如下图：
既然sourcemap可以映射源码，那么上线后不就又不安全了吗？
生成映射文件后，一般会将其单独上传至监控程序，工程中则先删掉映射文件再部署上线。等监控平台监控到错误后，只在开发环境中启用源映射。
4 Network 网络
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：Request Table面板
- 区域5：总结面板
- 区域6：请求详情面板
4.1 网速模拟
4.2 与后端联调中查看接口信息
5 Application 应用
与本地存储有关的信息
6 Performance 性能
6.1 FPS 指标
页面卡顿——查看FPS指标——寻找性能瓶颈——优化代码。
正常页面的FPS是 60，要是小于 60 说明页面会卡顿。
如下图所示，右上角的红色小三角表示可能遇到性能瓶颈，通过查看下面的面板可以定位到可能导致性能差的代码位置。
6.2 lighthouse
Lighthouse 是一种开源的自动化工具，由 Google 开发，并作为 Chrome 浏览器的一部分提供。
Lighthouse 可以模拟真实用户的浏览器行为，并在运行期间对网页进行分析和评估。它会执行一系列的审查规则，包括加载性能、渲染效果、无障碍性、可用性和安全性等方面的标准。通过这些规则的评估，Lighthouse 生成一个详细的报告，其中包含了各个方面的得分、建议优化措施以及问题修复的步骤。
6.3 核心Web指标
Largest Contentful Paint (LCP)最大内容绘制，测量加载性能。为了提供艮好的用内户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。First Input Delay (FID)首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID 应为 100 毫秒或更短。Cumulative Layout Shift (CLS)累积布局偏移，测量视觉稳定性。为了提供良好的用布户体验，页面的CLS应保持在 0.1 或更少。
