在上篇博客中一文中主要讲解叻Chrome 搜索引擎使用、Chrome安装和基本操作、Chrome 基本架构、多线程等原理性问题,这篇将重点讲解Chro-me实操问题主要结合“Chrome
work 面板可以在页面加载期间捕捉屏幕截图。此功能称为幻灯片点击摄影机图标可以启用幻灯片。图标为灰色时幻灯片处于停用状态 ()。如果图标为蓝色则说明已启鼡 ()。
重新加载页面可以捕捉屏幕截图屏幕截图显示在概览上方。
最后, 将显示来自以 .com
结尾的所有域名的资源 DevTools 会使用它遇到的所有域填充自动填充下拉菜单。
has-response-header
显示包含指定 HTTP 响应标头的资源。 DevTools 会使用它遇到的所有响应标头填充自动填充下拉菜单
method
。显示通过指定 HTTP 方法类型检索的资源 DevTools 会使用它遇到的所有 HTTP 方法填充下拉菜单。
status-code
仅显示 HTTP 状态代码与指定代码匹配的资源。 DevTools 会使用它遇到的所有状态代码填充自動填充下拉菜单
上面的一些关键字都提及自动填充下拉菜单。要触发自动填充菜单请在键入关键字时后面加一个冒号。 例如在下面嘚屏幕截图中,输入 domain:
触发了自动填充下拉菜单
在 Requests Table 中点击右键可以复制、保存或删除网络信息。 某些选項取决于上下文因此,如果您希望操作单个资源则需要右键点击该资源所在的行。
下面的列表说明了每一个选项
cURL 是一种鼡于进行 HTTP 事务的命令行工具
当您复制全部时,过滤将被忽略(例如如果您过滤 Network 面板仅显示 CSS 资源,然后按 Copy All as cURL您将获取所有检测到的资源,而不只是 CSS)
大行可以让某些列显示两个文本字段:主要字段和次要字段。 列标头指示次要字段的含义
默认情况下,每当您重新加载當前页面或者加载不同的页面时网络活动记录会被丢弃。启用 Preserve log 复选框可以在这些情况下保存网络日志
要详细了解如何优化您的应用的網络性能,请参阅下面的资源:
。每条彩色横杠表示一种资源横杠越长,检索资源所需的时间越长 每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间)。
深色部分表示传输時间(下载第一个和最后一个字节之间的时间)
横杠按照以下方式进行彩色编码:
Linux)开始记录。记录时Record 按钮会变成红色。执行页面交互然后按 Record 按钮或再次键入键盘快捷键停止记录。完成记录后DevTools 会猜测哪一部分记录与您最相关,并自动缩放到那一个部分
在火焰图中选择事件时Details 窗格会显示与事件相关的其他信息。
一些标签(如 Summary)适用于所有事件类型其他标签则仅对特定事件类型可用。了解与每个记录类型相关的详细信息
Timeline 面板可以在页面加载时捕捉屏幕截图。此功能称为幻灯片
开始記录前,请启用 JS Profile 复选框以便在您的时间线记录中捕捉 JavaScript 堆栈。 启用 JS 分析器后您的火焰图会显示调用的每个 JavaScript 函数。
settings 访问渲染设置这些设置在调试绘制问题时非常有用。渲染设置会作为一个标签显示在 Console 抽屉式导航栏(如果隐藏请按 esc 显示抽屉式导航栏)旁边
查看事件时,您鈳能希望侧重于一种类型的事件例如,您可能需要查看每个 Parse HTML
事件的详细信息在 Timeline 处于焦
以打开一个查找工具栏。键入您想要检查的事件類型的名称如 Event
。工具
栏仅适用于当前选定的时间范围选定时间范围以外的任何事件都不会包含在结果中。利用上下箭头您可以按照時间顺序在结果中移动。
所以第一个结果表示选定时间范围内最早的事件,最后一个结果表示最后的事件每次按向上或向下箭头会选擇一个新事件,因此您可以
在 Details 窗格中查看其详细信息。按向上和向下箭头等同于在火焰图中点击事件
您可以放大显示一部分记录,以便简化分析使用 Overview 窗格可以放大显示一部分记录。 放大后火焰图会自动缩放以匹配同一部分。
要在 Timeline 部分上放大请执行以下操作:
您可以在 Overview 或火焰图窗格中点击右键并选择相关选项保存和打开记录。
b.使用资源面板检查加載的所有资源包括IndexedDB与Web SQL数据库,本地和会话存储cookie,应用程序缓存图像,字体和样式表
c.查看和修改本地存储与会话存储。
f.查看应用缓存和服务工作线程缓存
g.点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
如果您使用一种可以创建、删除或修改 KVP 的方式与页面交互则不会看到这些更改实时更新。 点击 refresh 按钮 () 可以查看您的更改
,您会看到多个条目 在下面的屏幕截图中,页面只有一个活动的数据库
b.点击数据库的名称可以查看该数据库的安全源、名称和版本。
c.展开数据库可以查看其键值对 (KVP)
d.使用 Start from key 文本字段旁的箭头按钮可以在 KVP 的页面之间移动。展开值并双击可以编辑该值在您添加、修改或删除徝时,这些更改不会实时更新
中的所有数据。 从Clear storage窗格中点击一次按钮注销服务工作线程并移除其他存储与缓存也可以实现此目标。
a.使鼡安全面板调试混合内容问题证书问题等等。
b.提供了重要的安全性和数据完整性
e.检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源)。
c.Security 面板可以区分两种非安全页面 如果请求的页面通过 HTTP 提供,则主源会被标记为不安全
d.如果请求的頁面通过 HTTPS 检索,但页面会继续使用 HTTP 检索其他源的内容然后页面仍然会被标记为不安全。这称为混合内容页面 混合内容页面仅受部分保護
,因为 HTTP 内容可以被嗅探器获取到且易受到中间人攻击
a.使用左侧面板可以检查各个安全或非安全源。点击安全源查看该源的连接和证书詳情
b.如果您点击非安全源,Security 面板会提供 Network 面板过滤视图的链接
c.点击链接可以查看具体是源的哪些请求通过 HTTP 提供。
到目前为止对Google的讲解基本结束了,若大家存在什么问题可以把问题通过邮件发送给我,也可以在博客下面提问题