HTML5技术

详解Google Chrome浏览器(操作篇)(下) - Alan_beijing(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-16 13:00 我要评论( )

c.双击屏幕截图可查看放大版本。在屏幕截图处于放大状态时,使用键盘的向左和向右箭头可以在屏幕截图之间导航。 操作4:查看 DOMContentLoaded 和 load 事件信息 Network面板突出显示两种事件:DOMContentLoaded和L

Timeline 上的幻灯片叠加层

c.双击屏幕截图可查看放大版本。在屏幕截图处于放大状态时,使用键盘的向左和向右箭头可以在屏幕截图之间导航。

放大的幻灯片屏幕截图

 操作4:查看 DOMContentLoaded 和 load 事件信息

Network 面板突出显示两种事件:DOMContentLoaded和Load。

解析页面的初始标记时会触发 DOMContentLoaded。 此事件将在 Network 面板上的两个地方显示:

a.Overview 窗格中的蓝色竖线表示事件。

b.在 Summary 窗格中,您可以看到事件的确切时间。

Network 面板上的 DOMContentLoaded 事件

页面完全加载时将触发 load。此事件显示在三个地方:

a.Overview 窗格中的红色竖线表示事件。

b.Requests Table 中的红色竖线也表示事件。

c.在 Summary 窗格中,您可以看到事件的确切时间。

Network 面板上的 load 事件

操作5:查看单个资源的详细信息

点击资源名称(位于 Requests Table 的 Name 列下)可以查看与该资源有关的更多信息。

可用标签会因您所选择资源类型的不同而不同,但下面四个标签最常见:

查看单一资源的详情

操作6:查看网络耗时

点击 Timing 标签可以查看单个资源请求生命周期的精细分解。

生命周期按照以下类别显示花费的时间:

timing 标签

将鼠标悬停到 Timeline 图表内的资源上时,您也可以看到相同的信息。

Timeline 中一个资源的定时数据

操作7:查看 HTTP 标头

点击 Headers 可以显示该资源的标头。

Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外,该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数。

单一资源的 HTTP 标头

点击每一部分旁边的 view source 或 view parsed 链接,您能够以源格式或者解析格式查看响应标头、请求标头或者查询字符串参数。

查看标头源

您也可以点击相应部分旁边的 view URL encoded 或 view decoded 链接,以网址编码或解码格式查看查询字符串参数。

查看已编码网址

操作8:预览资源

点击 Preview 标签可以查看该资源的预览。Preview 标签可能显示一些有用的信息,也可能不显示,具体取决于您所选择资源的类型。

图像资源预览

操作9:查看 HTTP 响应内容

点击 Response 标签可以查看资源未格式化的 HTTP 响应内容。 Preview 标签可能包含一些有用的信息,也可能不包含,具体取决于您所选择资源的类型。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • vue.js 初体验— Chrome 插件开发实录 - 腾讯云技术社区

    vue.js 初体验— Chrome 插件开发实录 - 腾讯云技术社区

    2017-05-13 13:00

  • html5的localstorage详解 - 风雨后见彩虹

    html5的localstorage详解 - 风雨后见彩虹

    2017-05-09 13:00

  • html5的web存储详解 - Cythia-milk

    html5的web存储详解 - Cythia-milk

    2017-05-04 16:00

  • ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    ASP.NET Core MVC 源码学习:详解 Action 的激活 - Savorboard

    2017-04-14 13:04

网友点评