chrome开发者工具概览

一 设备模式

  构建完全响应式（设备大小），移动优先的网络（网速等环境），以及模拟手机传感器（定位、摇摆等）。

二 元素面板（Element）

  自由操作DOM和CSS，从而迭代布局和设计页面。

  使用Element功能

三 源代码面板（Sources）

    断点调试

  使用开发者工具的Workspaces（工作区）进行持久化保存。sources里的文件映射到本地工作区

四 网络面板（Network）

    使用网络面板了解请求和下载的资源文件并优化网页加载性能。

网络面板基础

了解资源时间轴

网络带宽限制

五 性能面板（Performance）

使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。

如何查看性能

分析运行时性能

诊断强制的同步布局

查看Loading 、 Scripting、 Rendering等所消耗时间

六 内存面板（Memory）

    JavaScript CPU分析器

  内存堆区分析器

使用 CPU 分析器准确地记录调用了哪些函数和每个函数花费的时间。(火焰图可视化)

内存泄漏（页面越来越慢）

内存膨胀（跟硬件设备相关，一直很慢）

页面出现延迟或者经常暂停。 这可能是频繁垃圾回收的症状。

七 应用面板（Application）

（一）application 资源

manifest

service workers (worker线程管理)

clear storage(达到隐身窗口的刷新效果一般，可以选择性地注销服务工作线程、存储和缓存)

（二）Storage 资源

1 本地存储Local Storage 和 会话存储Session Storage  KVP

2 IndexeDB

3 Web SQL （标准已经废弃）

4 cookies

（三）Cache应用缓存

Type 列的值为以下值之一：

Master。资源上指示此缓存为其主文件的 manifest 属性。

Explicit。此资源在清单中明确列出。

Network。指定此资源的清单必须来自网络。

Fallback。Resource 列中的网址作为另一个网址（未在 DevTools 中显示）的回退网址形式列出。

表格底部拥有指示网络连接和应用缓存状态的状态图标。 应用缓存可能拥有以下状态：

IDLE。缓存没有新更改。

CHECKING。正在提取清单并检查有无更新。

DOWNLOADING。正在将资源添加到缓存中。

UPDATEREADY。存在新版本的缓存。

OBSOLETE。正在删除缓存。

另外，在application下可以看到网站的各个文件资源

八 安全面板

    https，哪些资源是不安全的（不携带https）

    检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）