Есть ли простой способ увидеть степень сжатия в Chrome?

33

Я занят проверкой, как мой веб-сервер делает gzip. Теперь я уверен, что gzip включен, поскольку chrome показывает кодировку содержимого: заголовок gzip.

Есть ли простой способ узнать, насколько файл был сжат в инструментах разработчика Chrome?

Питер Смит
источник
1
Если есть плагин для просмотра заголовков HTTP, то вы можете просто сравнить размер документа с Content-Lengthзаголовком.
Lèse Majesté

Ответы:

32

Обновленный ответ на 2017 год : Да.

Столбец размера на вкладке «Сеть» в Chrome Developer Tools имеет как сжатый, так и несжатый размер для gzip, brotli и всего, что будет в будущем. Например:

Здесь сжатый размер 242 КБ, несжатый размер 1,1 МБ

Чтобы увидеть и то, и другое, убедитесь, что Devtools показывает большие строки запросов . Это первый значок в параметрах «Вид» на панели инструментов для конкретных сетей.

mikemaccana
источник
7
Спасибо. Легко пропустить это. Нужно нажать «использовать большие строки запроса»
alds
Также вы можете щелкнуть правой кнопкой мыши заголовки столбцов и показать заголовок ответа «Кодировка содержимого». После этого вы можете отсортировать по столбцу, чтобы получить быстрый список всех сжатых ответов.
Тридцать
18

Безусловно, самый простой способ - использовать онлайн-инструмент. GIDZipTest показывает вам множество деталей: оригинальный размер, сжатый размер и процент сжатия.


Тем не менее, это возможно в Chrome с небольшим усилием. (Обновлено для последней версии Chrome, сентябрь 2011 г.)

В инструментах разработчика перейдите на вкладку «Сеть» и перезагрузите страницу. Вы увидите список всех файлов, выбранных в левой колонке. Нажмите соответствующую страницу / файл слева, затем вкладку «Заголовки» на правой панели.

Под заголовком ответа вы должны увидеть «Content-Encoding: gzip», за которым следует заголовок «Content-Length». Это размер сжатого содержимого.

Найти несжатый размер сложнее. Если вы обслуживаете статические файлы, вы можете просто проверить их размер. Для динамического содержимого вам нужно будет скопировать и вставить HTML-код в текстовый редактор и сохранить его, чтобы проверить точный размер.

DisgruntledGoat
источник
где находится «включить отслеживание ресурсов»?
Pacerier
@Pacerier: в последней версии Chrome он немного отличается; Я обновил свой ответ новыми инструкциями.
Рассерженная шлюха
Аккуратный инструмент. Я не мог понять, почему ответы, отправляемые моим приложением Google App Engine, не отображали сжатый размер. Ответы, отправляемые SDK (т. Е. Localhost), не сжимаются, а ответы, поступающие из облака. Оказывается, Chrome работает отлично.
Эван Плейс
9

Обновление на 2017 год

При использовании больших значков инструменты разработчика Chrome показывают размер сжатия до и после на вкладках сети.

Я подтвердил, выключив и включив gzip на моем веб-сервере.

Скриншот Chrome Dev Tools

введите описание изображения здесь

CodeMonkey
источник
5

Еще один способ сделать это с помощью cURL:

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

против

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

Число, показанное после каждой команды, представляет собой число байтов, которые пересекли провод.

Стивен
источник
2

Я слышал, что в Chrome есть ошибки из-за ошибки в webkit.

Y Медленная Плагин для Firefox делает большую работу. При запуске перейдите на вкладку Компоненты и разверните тип компонента, значения которого вы хотите. Он покажет оригинальный размер и размер gzip.

XOPJ
источник
2

Это не инструмент специально для Chrome, но я использую Fiddler при проверке HTTP-трафика / информации заголовка. Это отличный инструмент, работает в любом браузере, и это бесплатно!

BradB
источник
1
Также существует расширенная версия Chrome для Fiddler !
karlbecker_com
Спасибо, что предложили это. Fiddler не показывает «несжатый размер», но позволяет добавлять столбцы для «CompressionSavings» и «CompressionSavings%». Добавьте их, щелкнув правой кнопкой мыши столбцы ==> «Настроить столбцы» ==> «Разное» ==> Раскрывающийся список «Имя поля».
JasonS
0

Для тех, кто все еще прибывает сюда из общего поиска Google (как я сделал), в современных версиях Firefox можно увидеть «сырой» и gzip-размер непосредственно из его devtools, сравнив столбец «Transferred Size» и «Size». «Размер» - это необработанный размер ответа, «Переданный размер» - это фактический размер данных, передаваемых для ответа, который может быть меньше, чем фактический размер в случае gzip, как на рисунке ниже, или даже 0 в Если ответ был кэширован в клиенте.

Firefox Devtools Размер Gzip

LeartS
источник