有没有简单的方法可以查看Chrome中的压缩量？

33

我正忙着检查我的网络服务器的gzip压缩情况。现在我有信心gzip会启用，因为chrome会显示content-encoding：gzip标头。

有没有一种简单的方法可以查看Chrome开发人员工具中压缩了多少文件？

gzip compression google-chrome

— 彼得·史密斯
source

1

如果有一个用于查看HTTP标头的插件，则可以将文档大小与Content-Length标头进行比较。

— 冒犯君主

32

2017年更新答案：是。

Chrome开发者工具的[网络]标签中的[大小]列包含gzip，brotli和以后使用的压缩大小和未压缩大小。例如：

此处的压缩大小为242 KB，未压缩大小为1.1 MB

要同时看到两者，请确保您的Devtools显示大的请求行。它是特定于网络的工具栏的“查看”选项中的第一个图标。

— 迈克马卡纳
source

7

谢谢。很容易错过。必须点击“使用大请求行”

— alds，

您也可以右键单击列标题，并显示“ Content-Encoding”响应标题。完成此操作后，您可以按该列进行排序，以获取所有压缩后响应的快速列表。

— 第三方

18

到目前为止，最简单的方法是使用在线工具。GIDZipTest向您显示了大量细节：原始大小，压缩大小和压缩百分比。

但是，只要稍加努力，Chrome就可以实现。（已更新为最新的Chrome，2011年9月。）

在开发人员工具中，转到“网络”标签，然后重新加载页面。您会在左列看到所有提取的文件的列表。单击左侧的相应页面/文件，然后单击右侧窗格中的“标题”选项卡。

在“响应标题”下，您应该看到“ Content-Encoding：gzip”，后跟“ Content-Length”标题。这是压缩内容的大小。

找到未压缩的大小更加困难。如果您要提供静态文件，则只需检查其大小即可。对于动态内容，您必须将HTML复制粘贴到文本编辑器中，然后保存以检查确切的大小。

— 心怀不满的山羊
source

“启用资源跟踪”在哪里？

— Pacerier's

@Pacerier：在最新版本的Chrome中稍有不同；我已经用新的说明更新了答案。

— DisgruntledGoat

整洁的工具。我不知道为什么我的Google App Engine应用发送的响应没有显示压缩后的大小。SDK（即localhost）发送的响应不会被压缩，而来自云的响应会被压缩。事实证明，Chrome浏览器运行良好。

— Evan Plaice 2012年

9

2017年更新

使用大图标时，Chrome开发工具会在网络标签中显示压缩前后的大小。

我通过在Web服务器上打开和关闭gzip来确认。

— CodeMonkey
source

5

实现此目的的另一种方法是使用cURL：

curl -i -H "Accept-Encoding: gzip" http://someurl.com | wc -c

与

curl -i http://someurl.com | wc -c

每个命令后显示的数字是越过导线的字节数。

— 史提芬
source

2

我听说chrome中的一个由于webkit中的错误而存在缺陷。

Firefox 的Y慢插件非常出色。运行它时，转到“组件”选项卡，然后展开要为其指定值的组件的类型。它将显示原始大小和gzip大小。

— XOPJ
source

2

这不是专门用于Chrome的工具，但是我在检查HTTP流量/标头信息时使用了Fiddler。这是一个很棒的工具，可以在任何浏览器上使用，并且是免费的！

— 布拉德
source

1

现在也有Fiddler的Chrome扩展版本！

— karlbecker_com 2014年

感谢您提出建议。Fiddler不会显示“未压缩的大小”，但是可以为“ CompressionSavings”和“ CompressionSavings％”添加列。通过右键单击列==>“ Customize Colums” ==>“ Miscellaneous” ==>“字段名称”下拉列表来添加它们。

— JasonS，2016年

0

对于仍通过常规google搜索到达此处的任何人（像我一样），在现代版本的Firefox中，可以通过比较“已传输大小”列和“大小”列直接从其devtools中看到“原始”和gzip压缩的大小。“大小”是响应的原始大小，“传输大小”是为响应传输的数据的实际大小，对于gzip，它可能小于实际大小，如下图所示，甚至是0如果响应已缓存在客户端中。

— 乐思
source