你真的会degguger吗—— 最实用的Chrome 开发者工具使用

1. 设备模式

使用 Device Mode 可以大致了解您的页面在移动设备上呈现的外观和效果。

2. 元素面板

使用Chrome DevTools的Elements面板检查和实时编辑页面的 HTML 与 CSS

• 实时编辑 DOM 节点 —— 要实时编辑 DOM 节点，只需双击选定元素，然后进行更改
• 实时编辑样式 —— 在Styles 窗格中实时编辑样式属性名称和值。所有样式均可修改，除了灰色部分（与 User Agent 样式表一样）。点击要编辑名称或值进行更改，然后按Tab或Enter保存更改。
• 检查和编辑框模型参数 —— 使用 Computed 窗格检查和编辑当前元素的框模型参数。框模型中的所有值均可修改
• 拖拽页面元素 —— 在Elements 面板里，可以拖拽一个元素来随意调整它的位置
  通过元素面板进行的Dom和CSS修改不是永久的，重新加载页面时更改会丢失

3. 控制台面板

• 在控制台能显示浏览器的消息，其中消息分为info，verbose（长消息），error，warning四个等级；
• 会显示当前页面的错误信息，根据错误信息位置去定位问题
• 可以在控制台执行代码段，chrome浏览器内置了一些函数可以使用

4. 源代码面板 Sources

• 在这里可以看到一些源文件；
• 类似元素面板中设置断点，这里也可以在每一行代码前设置断点，利用这些断点使代码运行到适当的时候或位置停下来，以便查看特定时刻的变量值、调用堆栈、样式等；
• 不过这里的断点设置比前面的更强，可以自定义断点条件，运行到这行代码表达式为true就会停下来；
• 中间部分左下角有一个{}大括号图标，可以将压缩的代码格式化
• 右边部分也是关于断点的，可以在这里查看所有的断点，选择一系列事件断点，比如动画，键盘，Load事件，XHR事件等等；

使用断点暂停 javascript 代码：

5. 网络面板

• 区域① --> Controls 控制Network的外观和功能。
• 区域② --> Filters 控制Requests Table具体显示哪些内容。
• 区域③ --> Overview 显示获取到资源的时间轴信息。
• 区域④ --> Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可查看资源的详细息
• 区域⑤ --> Summary 显示总的请求数、数据传输量、加载时间信息

• Name 资源名称，点击名称可以查看资源的详情情况，
• 包括Headers、Preview、Response、Cookies、Timing。
• Method 请求的方法类型
• Status HTTP状态码。
• Remote Address 远程地址
• Type 请求的资源MIME类型。
• Cookie 当前请求附带的cookie数量
• Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from disk cache)
• Time 请求或下载的时间，从发起Request到获取到Response所用的总时间。
• Waterfull 显示所有网络请求的可视化瀑布流(时间状态轴)，点击时间轴，可以查看该请求的详细信息

6. 性能面板 Performance

• 1：操作区域：包含录制，刷新页面分析，清除结果等一系列操作
• 2：overview总览图：高度概括随时间线的变动，包括FPS，CPU，NET
• 3：详情区域：从不同的角度分析框选区域 。例如：Network，Frames, Interactions, Main等
• 4：总结区域：精确到毫秒级的分析，以及按调用层级，事件分类的整理
  
• 1、FPS。每秒帧数。绿色竖线越高，FPS 越高。 FPS 图表上的红色块表示长时间帧，很可能会出现卡顿
• 2、CPU。 CPU 资源。此面积图指示消耗 CPU 资源的事件类型，不同颜色代表不同资源。
  蓝色(Loading)：网络通信和HTML解析，
  黄色(Scripting)：JavaScript执行，
  紫色(Rendering)：重排，
  绿色(Painting)：重绘，
  灰色(other)：其它事件花费的时间，
  白色(Idle)：空闲时间，
• 3、NET。有两条蓝色的长条，深蓝代表优先级比较高的请求，浅蓝代表优先级比较低的请求
• 4、屏幕快照。可以把鼠标放到总览图区域会有一个屏幕快照的弹框图
• 5、HEAP。这就是通常说的内存
  
• 第三个窗格是火焰图。 CPU 堆叠追踪的可视化。
• 可以在火焰图上看到一到三条垂直的虚线。蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。 红线代表 load 事件。
• 开始记录前，不要开启Disable JS samples复选框，以便在时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后，火焰图会显示调用的每个 JavaScript 函数。
• 火焰图可以用鼠标滚轮调整大小；
• 第四个是Details窗格。选择事件后，此窗格会显示与该事件有关的更多信息。 未选择事件时，此窗格会显示选定时间范围的相关信息。

7. 内存面板 Memory

• Shallow size: 栈存储
• Retained size: 堆存储

8. 应用面板 Application

• 可以从 Local Storage 窗格和Session Storage窗格中检查、修改和删除键值对（KVP）；
• 使用 IndexedDB 窗格可以检查、修改和删除 IndexedDB 数据。
• 展开 IndexedDB 窗格时，IndexedDB 下的第一个级别是数据库。 如果存在多个活动的数据库，会看到多个条目。 在下面的屏幕截图中，页面只有一个活动的数据库。
• 点击数据库的名称可以查看该数据库的安全源、名称和版本。
• 展开数据库可以查看其键值对 (KVP)。
  
• 在添加、修改或删除值时，这些更改不会实时更新。 点击 refresh 按钮 可以更新数据库。
• 点击 Clear Object Store 按钮 可以删除数据库中的所有数据。 从 Clear storage 窗格中，点击一次按钮注销服务工作线程并移除其他存储与缓存也可以实现此目标。
• 使用 Web SQL 窗格可以查询和修改 Web SQL 数据库：
• 点击数据库名称可以打开该数据库的控制台。从这里，可以对数据库
  
• 点击数据库表可以查看该表的数据。
• 无法从这里更新值，但是可以通过数据库控制台（参见上文）更新。
• 点击列标题可以按该列排序表格。
• 在 Visibile columns 文本字段中输入一个由空格分隔或逗号分隔的列名称列表可以仅显示列表中包含的列。
• 使用 Application Cache 窗格可以检查通过 Application Cache API （HTML5中新加的API）创建的资源和规则
• 每一行表示一个资源。
• Type 列的值为以下值之一：
• Master。资源上指示此缓存为其主文件的 manifest 属性。
• Explicit。此资源在清单中明确列出。
• Network。指定此资源的清单必须来自网络。
• Fallback。Resource 列中的网址作为另一个网址（未在 DevTools 中显示）的回退网址形式列出。
• 表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态：
• IDLE。缓存没有新更改。
• CHECKING。正在提取清单并检查有无更新。
• DOWNLOADING。正在将资源添加到缓存中。
• UPDATEREADY。存在新版本的缓存。
• OBSOLETE。正在删除缓存

9. 安全面板

• 使用 Security Overview 可以一目了然的查看当前页面是否安全。
• 点击 View certificate 检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
• Security 面板可以区分两种非安全页面。
• 如果请求的页面通过 HTTP 提供，则主源会被标记为不安全。
• 如果请求的页面通过 HTTPS 检索，但页面会继续使用 HTTP 检索其他源的内容，然后页面仍然会被标记为不安全。这称为混合内容页面。 混合内容页面仅受部分保护，因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击。
• 使用左侧面板可以检查各个安全或非安全源。点击安全源查看该源的连接和证书详情。

这篇好文章是转载于：学新通技术网