这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
一、Bug
前端Debug的特点：多平台、多环节、多工具、多技巧
二、Chrome DevTools
1、Elements：
- 在这里可以动态修改元素和样式：
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值可以进行编辑并在浏览器内容区域实时浏览
- computed下面点击样式里面的箭头可以跳转到styles面板中的css规则。
2、console：
共五种方法：
- console.log
- console.warn
- console.error
- console.debug
- console.info
console.log中的元素可以添加样式，通过占位符和样式可以展示出不同的效果。
console.tabel:可以具象化的展示json和数组数据
console.dir可以通过文件树的方式展示对象的属性
3、Sources
里面有页面资源文件目录树，还有代码预览区域，Debug工具栏与断点调试器。
- 使用关键字debugger或者行号可以设置断点，执行到断点时代码暂停执行，暂停情况下可以查看变量的值，也可以在调试器watch添加对变量的监控，查看该变量的值。
- 展开Scopr可以查看作用域列表（包括闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
- 使用source Map可以对压缩后的代码进行调试
4、Network
在 Request Table面板中，可以在 出现问题时可以查看相应的请求，可以拿到相关的详细信息。
5、Application
在这个面板中展示了与本地存储相关的信息。 比如Local Storage、Session Storage、IndexedDB、Web SQL、Cookie 在里面还可以在Storage中一键清除缓存。
6、Performance
统计面板可以看到在加载时各部分的耗时，可以通过这个功能去查看各部分的性能并对其进行优化。
7、Lighthouse
在这里会显示许多核心的Web指标。
- Largest Contentful Paint：可以进行最大内容绘制，可以测量加载性能
- First Input Delay：首次输入延迟，可以测量交互性
- Cumulative Layout Shift：累计布局偏移，可以测量视觉稳定性。
