Google DevTools（一）概览

环境
Mac 10.14.4
Google 版本 77.0.3865.120（正式版本） （64 位）

Chrome 开发者工具是一套内置于Google Chrome中的Web开发和调试工具，可用来对网站进行迭代、调试和分析

一、打开Chrome 开发者工具

• 在Chrome菜单中选择 更多工具 > 开发者工具
• 在页面元素上右键点击，选择 “检查”
• 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)
• 快捷键F12

二、了解面板

1. Device Mode设备模式。
   使用设备模式构建完全响应式，移动优先的网络体验。
2. Elements元素面板
   使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面.
3. Network网络面板
   使用网络面板了解请求和下载的资源文件并优化网页加载性能。
4. Console控制台面板
   在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell在页面上与JavaScript交互。
5. Sources源代码资源面板
   在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
6. Application应用面板
   使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。
7. Performance性能面板
   使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。
8. Memory内存面板
   如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏。
9. Security安全面板
   使用安全面板调试混合内容问题，证书问题等等。
10. Audis面板：使用Google Lighthouse辅助性能分析，给出优化建议

3、常用功能浏览

4、常见功能面板详解

1. Elements(元素)。

• 检查页面。查看页面元素和节点，滚动查看，搜索节点。
• 编辑样式。在style里面修改样式。
• 编辑DOM。可以编辑内容，编辑属性，编辑节点类型，重新排序，隐藏删除节点，打印节点
• 中断。属性修改，节点删除，子树修改
  [Elements详解] https://www.jianshu.com/p/8bd9304f5915

2. Console

• 日志信息。消息堆叠，历史记录保存，信息过滤，日志等级。
• 运行Javascript。运行代码中Javascript和运行与页面无关的任意JavaScript
• 控制台设置。查看讯息，刷选讯息，运行JavaScript，清空控制台
• 控制台API。console.dir(console)
• 实用程序API。$0,打印当前选中节点。
• 实时表达式。如果您发现自己在控制台中反复键入相同的JavaScript表达式，则可能会发现创建Live Expression更容易。使用实时表达式，您只需键入一次表达式，然后将其固定到控制台的顶部。表达式的值几乎实时更新

3. Source

• 各种断点。行断点，条件行断点，Dom断点，XHR/Fetch断点，事件侦听器断点，函数断点debug（）。
• 查找没有使用的Javascript代码。代码覆盖率
• 将预处理代码映射到源代码。（忽略）
• JS调试。
• JavaScript 代码块。
• 禁用JavaScript

4. Network

• 使用网络面板
• 网络问题指南