Chrome-Network

Google DevTools 开发者工具

打开网络面板

1. 打开 DevTools 控制台面板

2. 单击网络选项卡。将打开“网络”面板。

3. “网络”面板为空。这是因为DevTools仅在网络活动打开时记录日志，并且自您打开DevTools以来未发生任何网络活动。

4. 刷新页面

记录网络活动

1. 重新加载页面, “Network” 面板将所有网络活动记录在“ 网络日志”中

• 网络日志 (Web Log) 的每一行代表一个资源。默认情况下，资源按时间顺序列出。最重要的资源通常是主要的HTML文档。最底层的资源是最后请求的资源。(只要打开DevTools，它将在网络日志中记录网络活动。)
  
  

  1. name: 提示通过将鼠标悬停在“名称”列中的单元格上，可以查看资源的完整URL。
  2. Status : 状态 HTTP 响应代码
  3. Type : 资源类型
  4. Initiator : 单击“Initiator”列中的链接，将您带到引起资源请求的源代码 (网址)。
  5. Size : 请求大小
  6. Time : 请求花了多长时间
  7. Waterfall :请求不同阶段的图形表示。将鼠标悬停可以查看细目
  8. Domain: 右键单击“网络日志”表的标题，然后选择“Domain”。现在显示每个资源的域。

• (Throttling) 模拟较慢的网络连接 (用于构建站点的计算机的网络连接可能比用户的移动设备的网络连接快。
  通过限制页面，您可以更好地了解页面在移动设备上加载需要多长时间。)
  
  

  1. 单击“节流”下拉菜单，默认情况下将其设置为“Online”
  2. 选择 “Slow 3G”
  3. 长按重新加载 (Reload)，然后选择“清空缓存和硬重新加载 (Empty Cache And Hard Reload)”. (在重复访问时，浏览器通常会从其缓存中提供一些文件，从而加快了页面加载速度。空缓存和硬重载会强制浏览器访问所有资源的网络。当您想了解首次访问者如何体验页面加载时，这很有用。)
  4. 仅当打开DevTools时，“清空缓存和硬重装”工作流程才可用。

• 检查资源的详细信息 (单击资源以了解有关它的更多信息)
  

  1. 点击getstarted.html。显示“Headers”选项卡。使用此选项卡检查HTTP标头。
  2. 单击预览 (Preview) 选项卡。显示了HTML的基本呈现。 (当API以HTML返回错误代码并且比HTML源代码更容易阅读呈现的HTML或检查图像时，此选项卡非常有用)
  3. 单击响应 (Response) 选项卡。显示了HTML源代码。
  4. 缩小文件后，单击“响应”选项卡底部的“格式 (Format)”按钮会重新格式化文件的内容，以提高可读性。
  5. 单击时间 (Timing) 选项卡。显示了此资源的网络活动的细分。
  6. 单击关闭 (x) 以再次查看网络日志。

• (Search)搜索网络标题和响应 (当您需要在HTTP标头和所有资源的响应中搜索某个字符串或正则表达式时，请使用“搜索 (Search) ”窗格。)

  1. 点击搜索。搜索窗格将在网络日志的左侧/上侧打开。
  2. 单击结果以查看它。如果在标题 (headers) 中找到查询，则“标题”选项卡将打开。如果在内容 (content) 中找到查询，则“响应”选项卡将打开。

• 筛选 (Filter) 资源 (沙漏按钮, DevTools提供了许多工作流，用于过滤与手头任务无关的资源。按字符串，正则表达式或属性过滤)

  1. 在“过滤器”文本框中键入png。仅显示包含文本png的文件。在这种情况下，唯一与过滤器匹配的文件是PNG图像。
  2. 键入/.*.[cj]s+$/。DevTools会过滤出任何文件名不以j或c结尾且后跟1个或多个s字符的资源。
  3. 输入-main.css。DevTools过滤掉main.css。如果任何其他文件与该模式匹配，它们也将被过滤掉。
  4. 在“过滤器”文本框中键入domain：raw.githubusercontent.com。DevTools过滤出任何URL与此域不匹配的资源。
  5. 按资源类型过滤
     • 单击CSS。其他所有文件类型均被过滤掉。
     • 要同时查看脚本，请按住Control或Command（Mac），然后单击JS。
     • 单击全部删除过滤器，然后再次查看所有资源

• (Clear) 清空加载信息，刷新后重新加载

• (Stop recording network log) 暂时停止更新网络日志

• (Disable cache) : 禁用缓存

• (Preserve log) : 保留日志

• (Network Setting)

  1. Show overview : 显示总览，以时间轴来显示加载过程
  2. Capture screenshots : 截图
     • 截图 (屏幕快照使您可以看到页面在加载过程中的外观。)
       1. 点击 Capture Screenshots (屏幕快照)
       2. 通过“清空缓存和硬重装”工作流程再次重装页面。如果您需要有关如何执行此操作的提示，请参阅模拟较慢的连接。屏幕截图窗格提供了缩略图的缩略图，该缩略图显示了页面在加载过程中各个点的外观。
       3. 单击第一个缩略图。DevTools会向您显示当时正在发生的网络活动。
       4. 再次单击“ Capture Screenshots”以关闭“屏幕截图”窗格。
       5. 重新加载页面
  3. Use large request rows : 使用大图来显示 request 的 Web Log
  4. Group by frame : 按帧分组

• 阻止请求 (页面的某些资源不可用时，页面的外观和行为如何？它会完全失败，还是仍然有些功能？使用阻止请求以判断)
  
  

  1. 按Control + Shift + P或Command + Shift + P（Mac）打开“命令 (Command Menu)”菜单。
  2. 键入阻止 (>block)，选择显示请求阻止 (Show Request blocking)，然后按Enter
  3. 点击 Add Pattern
  4. 选择类 main.css
  5. 点击 Add
  6. 重新加载页面。正如预期的那样，页面的样式有些混乱，因为其主要样式表已被阻止。请注意网络日志中的main.css行。红色文本表示资源已被阻止。
  7. 取消选中启用请求阻止复选框