HTML5技术

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

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

操作10:查看 Cookie 点击Cookies标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时,此标签才可用。 下面是 Cookie 表中每一列的说明: 操作11:查看 WebSocket 框架 点击Frames

JSON 资源响应数据

操作10:查看 Cookie

点击 Cookies 标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时,此标签才可用。

下面是 Cookie 表中每一列的说明:

资源 Cookie

操作11:查看 WebSocket 框架

点击 Frames 标签可以查看WebSocket连接信息。

只有选定资源发起 WebSocket 连接时,此标签才会显示。

WebSocket 框架标签

下表对 Frames 标签上表格中的每一列进行了说明:

消息根据其类型进行彩色编码:

有关当前实现的说明:

  • 要在每条新消息到达后刷新 Frames 表,请点击左侧的资源名称。

  • Frames 表格仅保留最后 100 条 WebSocket 消息。

  • 操作12:查看资源发起者和依赖项

    按住 Shift 并将鼠标悬停在资源上,可以查看其发起者和依赖项。 本部分将您悬停的资源称为目标。

    目标上方的第一个绿色编码资源为目标的发起者。 如果上方存在第二个也是绿色编码的资源,那么该资源将是发起者的发起者。 目标下方红色编码的任何资源都是目标的依赖项。

    下方的屏幕截图中,目标是 dn/。此目标的发起者为以 rs=AA2Y 开头的脚本。 发起者 (rs=AA2Y) 的发起者为 google.com。 最后,dn.js 是目标 (dn/) 的依赖项。

    请记住,对于具有大量资源的页面,您可能无法看到所有的发起者或依赖项。

    操作13:排序请求

    默认情况下,Requests Table 中的资源按照每个请求的开始时间排序,最早的请求位于顶部。

    点击列标头可以按照该标头下每个资源的值对表格排序。 再次点击相同的标头可以将排序顺序更改为升序或降序。

    Timeline 列与其他列不同。点击此列时,它将显示一个由多个排序字段组成的菜单:

    Timeline 排序字段

    操作14:过滤请求

    Network 面板提供了多种方式来过滤要显示哪些资源。 点击 Filter 按钮 (

    Filter 按钮

    ) 可以隐藏或显示 Filters 窗格。

    使用内容类型按钮可以仅显示选定内容类型的资源。

    注:按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时启用多个过滤器。

    同时选择了多个内容类型过滤器

    Filter 文本字段看似非常强大。如果您在其中输入任意字符串,Network 面板仅会显示文件名与给定字符串匹配的资源。

    资源名称过滤

    Filter 文本字段还支持各种关键词,这样,您可以按照各种属性对资源排序,例如使用 larger-than 关键字按文件大小进行排序。

    下文列表说明了所有关键字。

    按文件大小过滤

    上面的一些关键字都提及自动填充下拉菜单。要触发自动填充菜单,请在键入关键字时后面加一个冒号。 例如,在下面的屏幕截图中,输入 domain: 触发了自动填充下拉菜单。

    过滤文本字段自动填充

    操作15:复制、保存和清除网络信息

    在 Requests Table 中点击右键可以复制、保存或删除网络信息。 某些选项取决于上下文,因此,如果您希望操作单个资源,则需要右键点击该资源所在的行。

    下面的列表说明了每一个选项。

     

    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

    网友点评
    =