Devtools是Web测试时每天都要用的工具，它提供了很多调试功能，可以帮助我们更好的定位问题。作为高频使用的工具，掌握并善用它的功能，不仅可以提高调试效率，还能在与开发团队沟通时提供更详细、准确的问题描述。
1. 命令（Command） 菜单
在DevTools 中使用 Ctrl + Shift + P 打开“命令”菜单。这是一个非常常用的工具
2. 元素（Elements）面板
- 查看和修改DOM：实时查看和编辑网页的HTML结构。
- CSS样式调试：查看和修改元素的CSS属性，实时查看效果。
- 事件监听器：查看元素绑定的事件监听器，便于调试事件处理逻辑。
1. 修改DOM和CSS实时反馈
通过元素面板可以自由操作 DOM 和 CSS 来迭代布局和设计页面，修改后能立即在浏览器里面得到反馈。并且可以在在修改DOM或CSS后鼠标右键选择复制修改部分移入工作区代码中。
2. 在线调试伪类
让特定元素维持某一个状态
3. 手动抓取图片
4. 查看DOM子节点
Alt + click 打开或关闭该DOM节点下的所有子节点
5. 递增/递减 CSS 属性值
通过Elements面板修改CSS样式时，对于调整像素这种数值类会比较麻烦一点，如下：
这时就可以使用快捷键（windows）去帮你完成：
* 增量0.1 * Alt +向上和Alt +向下
* 增量1 * 向上+向下
* 增量10 * Shift+向上和Shift+向下
* 增量100 * Ctrl +向上和Ctrl +向下3. 控制（Console）面板
- 日志输出：记录JavaScript日志信息，包括错误、警告、信息等。
- 执行JavaScript：直接在控制台输入JavaScript代码并立即执行，用于快速测试代码片段。
1.控制台调试JS代码
使用 $_可以引用在控制台执行的前一步操作的返回值。这对于在控制台调试一些JS代码，且需要引用先前的返回值时，很有帮助
2. 编辑页面上的任何文本
在控制台输入document.body.contentEditable="true"或者document.designMode = 'on'就可以实现对网页上任易本文编辑。这可以用于测试一个DOM节点文字太长时，样式是否会混乱，或者要去直接修改页面元素去满足一些业务需求时。
3. 复制数据
copy()方法基本能拿到所有数据
4. 查看对象的键和值数组
功能和Object.keys()和Object.values()一样，不过某些时候更方便
5. 将对象数组记录为表格
4. 源代码（Sources）面板
- 代码查看：查看网页加载的所有JavaScript和CSS文件。
- 断点设置：在源代码中设置断点，进行逐行调试。
- 代码映射：如果使用了如Webpack这样的模块打包器，可以映射回原始源代码进行调试。
1. 源代码快速定位
源代码快速定位到某一行！ctrl + p
2. 代码片段
记录可能会常用于控制面板调试的代码片段
3. 查看CSS/JS 覆盖率
查看具体的覆盖情况（绿色的为用到的代码，红色表示没有用到的代码）
5. 网络（Network）面板
- 网络请求分析：查看网页发出的所有网络请求，包括请求头、响应头、响应体等。
- 性能分析：分析网络请求的耗时，识别性能瓶颈。
- 缓存控制：查看资源的缓存策略，确保资源被正确缓存。
1. 将图片复制为数据 URI
右键单击将其复制为数据URI（已编码为base 64）。
也可复制其URL用于下载不能直接在网页中保存的图片。
2. 查看响应
常用于接口联调失败时进行响应检查
3. 查看负载
查看前端是否有正确向后端传输数据
然后在控制面板检查接口报错信息
6. 应用（Application）面板
- 本地存储：查看和管理浏览器的本地存储（LocalStorage、SessionStorage）、Cookies、IndexedDB等。
- 缓存查看：查看浏览器缓存的资源，便于清理和管理。
- Manifest和服务工作者：查看Web应用的manifest文件和服务工作者（Service Workers）。
7. 性能分析（Performance）面板
- 性能分析：录制和分析网页加载和执行过程中的性能数据，包括CPU使用率、内存分配等。
- 火焰图：通过火焰图直观地展示函数调用栈和性能瓶颈。
8. 内存（Memory）面板
- 堆快照：记录和分析JavaScript堆内存的使用情况，找出内存泄漏。
- 分配时间线：跟踪内存分配和垃圾回收活动，分析内存使用趋势。
9. 其他面板
1. 媒体查询，仿真设备
通常用于响应式设计的调试
2. 动画面板
默认是关闭状态，它可以帮助我们可视化这些动画是如何工作的
默认情况下，DevTools 会“监听”动画。一旦触发，它们将被添加到列表中。你能看到这些动画块如何显示。在动画本身上，DevTools 会向我们展示哪些属性正在更改，例如 background-color 或 transform。
10. 扩展面板
除了上面介绍的这些常用的工具面板。还有许多功能多样的调试工具面板。
具体使用，可查看官方开发文档：
若有错误或描述不当的地方，烦请评论或私信指正，万分感谢 😃
