Chrome 开发者工具面板
面板上包含了 Elements 面板, Console 面板, Sources 面板, Network 面板, Timeline 面板, Profiles 面板, Application 面板, Security 面板, Audits 面板这些功能面板.
这些按钮的功能点如下:
Elements: 查找网页源代码 html 中的任一元素, 手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈.
Console: 记录开发者开发过程中的日志信息, 且可以作为与 JS 进行交互的命令行 Shell.
Sources: 断点调试 JS.
Network: 从发起网页页面请求 Request 后分析 HTTP 请求后得到的各个请求资源信息(包括状态, 资源类型, 大小, 所用时间等), 可以根据这个进行网络性能优化.
Timeline: 记录并分析在网站的生命周期内所发生的各类事件, 以此可以提高网页的运行时间的性能.
Profiles: 如果你需要 Timeline 所能提供的更多信息时, 可以尝试一下 Profiles, 比如记录 JS CPU 执行时间细节, 显示 JS 对象和相关的 DOM 节点的内存消耗, 记录内存的分配细节.
Application: 记录网站加载的所有资源信息, 包括存储数据(Local Storage,Session Storage,IndexedDB,web SQL,Cookies), 缓存数据, 字体, 图片, 脚本, 样式表等.
Security: 判断当前网页是否安全.
Audits: 对当前网页进行网络利用情况, 网页性能方面的诊断, 并给出一些优化建议. 比如列出所有没有用到的 CSS 文件等.
Network 面板
概述
Network 面板可以记录页面上的网络请求的详情信息, 从发起网页页面请求 Request 后分析 HTTP 请求后得到的各个请求资源信息(包括状态, 资源类型, 大小, 所用时间, Request 和 Response 等), 可以根据这个进行网络性能优化.
我把 Google 官方网站上介绍 Network 面板的图贴到这里, 该面板主要包括 5 大块窗格(Pane):
1,Controls 控制 Network 的外观和功能.
2,Filters 控制 Requests Table 具体显示哪些内容.
3,Overview 显示获取到资源的时间轴信息.
4,Requests Table 按资源获取的前后顺序显示所有获取到的资源信息, 点击资源名可以查看该资源的详细信息.
5,Summary 显示总的请求数, 数据传输量, 加载时间信息.
其中 Requests Table 显示如下信息列:
Name 资源名称, 点击名称可以查看资源的详情情况, 包括 Headers,Preview,Response,Cookies,Timing.
StatusHTTP 状态码.
Type 请求的资源 MIME 类型.
Initiator 标记请求是由哪个对象或进程发起的(请求源).
Parser: 请求由 Chrome 的 HTML 解析器时发起的.
Redirect: 请求是由 HTTP 页面重定向发起的.
Script: 请求是由 Script 脚本发起的.
Other: 请求是由其他进程发起的, 比如用户点击一个链接跳转到另一个页面或者在地址栏输入 URL 地址.
Size 从服务器下载的文件和请求的资源大小. 如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间, 从发起 Request 到获取到 Response 所用的总时间.
Timeline 显示所有网络请求的可视化瀑布流(时间状态轴), 点击时间轴, 可以查看该请求的详细信息, 点击列头则可以根据指定的字段可以排序.
捕获屏幕
Controls 窗格包括的功能有网络日志录制, 日志清理, 捕获屏幕, 过滤器, 视图切换, 保留日志开关, Cache 开关, 网络连接开关, 网速阀值.
以捕获屏幕为例, 点击摄像机按钮(捕获屏幕), 重新加载页面即可捕获屏幕.
双击其中的截屏可以放大显示, 在放大的图下方可以点击跳转到上一帧或者下一帧.
单击则可以查看该帧被捕获时的网络请求信息, 并且在 Overview 上会有一条黄色竖线以标记该帧被捕获的具体时间点.
查看 DOMContentLoaded 和 load 事件信息
DOMContentLoaded 和 load 这两个事件会高亮显示.
DOMContentLoaded 事件会在页面上 DOM 完全加载并解析完毕之后触发, 不会等待 CSS, 图片, 子框架加载完成. load 事件会在页面上所有 DOM,CSS,JS, 图片完全加载完毕之后触发.
DOMContentLoaded 事件在 Overview 上用一条蓝色竖线标记, 并且在 Summary 以蓝色文字显示确切的时间.
load 事件同样会在 Overview 和 Requests Table 上用一条红色竖线标记, 在 Summary 也会以红色文字显示确切的时间.
查看具体资源的详情
通过点击某个资源的 Name 可以查看该资源的详细信息, 根据选择的资源类型显示的信息也不太一样, 可能包括如下 Tab 信息:
Headers 该资源的 HTTP 头信息.
Preview 根据你所选择的资源类型 (JSON, 图片, 文本) 显示相应的预览.
Response 显示 HTTP 的 Response 信息.
Cookies 显示资源 HTTP 的 Request 和 Response 过程中的 Cookies 信息.
Timing 显示资源在整个请求生命周期过程中各部分花费的时间.
针对上面 4 个 Tab 进行详细讲解一下各个功能:
1 查看资源 HTTP 头信息
在 Headers 标签里面可以看到 HTTP Request URL,HTTP Method,Status Code,Remote Address 等基本信息和详细的 Response Headers ,Request Headers 以及 Query String Parameters 或者 Form Data 等信息.
2 查看资源预览信息
在 Preview 标签里面可根据选择的资源类型 (JSON, 图片, 文本, JS,CSS) 显示相应的预览信息. 下图显示的是当选择的资源是 JSON 格式时的预览信息.
3 查看资源 HTTP 的 Response 信息
在 Response 标签里面可根据选择的资源类型 (JSON, 图片, 文本, JS,CSS) 显示相应资源的 Response 响应内容. 下图显示的是当选择的资源是 CSS 格式时的响应内容.
4 查看资源 Cookies 信息
如果选择的资源在 Request 和 Response 过程中存在 Cookies 信息, 则 Cookies 标签会自动显示出来, 在里面可以查看所有的 Cookies 信息.
5 分析资源在请求的生命周期内各部分时间花费信息
在 Timing 标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息, 可能会涉及到如下过程的时间花费情况:
Queuing 排队的时间花费. 可能由于该请求被渲染引擎认为是优先级比较低的资源(图片), 服务器不可用, 超过浏览器的并发请求的最大连接数(Chrome 的最大并发连接数为 6).
Stalled 从 HTTP 连接建立到请求能够被发出送出去 (真正传输数据) 之间的时间花费. 包含用于处理代理的时间, 如果有已经建立好的连接, 这个时间还包括等待已建立连接被复用的时间.
Proxy Negotiation 与代理服务器连接的时间花费.
DNS Lookup 执行 DNS 查询的时间. 网页上每一个新的域名都要经过一个 DNS 查询. 第二次访问浏览器有缓存的话, 则这个时间为 0.
Initial Connection / Connecting 建立连接的时间花费, 包含了 TCP 握手及重试时间.
SSL 完成 SSL 握手的时间花费.
Request sent 发起请求的时间.
Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间, 它包含了 TCP 连接时间, 发送 HTTP 请求时间和获得响应消息第一个字节的时间.
Content Download 获取 Response 响应数据的时间花费.
TTFB 这个部分的时间花费如果超过 200ms, 则应该考虑对网络进行性能优化了, 可以参见网络性能优化方案及里面的相关参考文档.
查看资源的发起者 (请求源) 和依赖项
通过按住 Shift 并且把光标移到资源名称上, 可以查看该资源是由哪个对象或进程发起的 (请求源) 和对该资源的请求过程中引发了哪些资源(依赖资源).
在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源), 有可能会有第二个标记为绿色的资源是该资源的发起者的发起者, 以此类推.
在该资源的下方标记为红色的资源是该资源的依赖资源.
ps: 最后一条 "查看资源发起者和依赖项" 我并没有找到操作方法, 请知道的大神指导下, 谢谢~~~
其他相关连接:
Chrome 开发者工具详解(1):Elements,Console,Sources 面板:
Chrome 开发者工具详解(2):Network 面板:
Chrome 开发者工具详解(3):Timeline 面板:
Chrome 开发者工具详解(4):Profiles 面板:
Chrome 开发者工具详解 (5):Application,Security,Audits 面板:
来源: http://www.qdfuns.com/article/21564/4c0671ed897b363916598a2638394133.html