Czy istnieje prosty sposób na sprawdzenie stopnia kompresji w Chrome?

33

Jestem zajęty sprawdzaniem, jak mój serwer działa z gzipem. Jestem pewien, że teraz gzip jest włączony, ponieważ chrome pokazuje kodowanie zawartości: nagłówek gzip.

Czy istnieje prosty sposób, aby sprawdzić, jak bardzo plik został skompresowany w narzędziach dla programistów Chrome?

Peter Smit
źródło
1
Jeśli istnieje wtyczka do przeglądania nagłówków HTTP, możesz po prostu porównać rozmiar dokumentu z Content-Lengthnagłówkiem.
Lèse majesté

Odpowiedzi:

32

Zaktualizowana odpowiedź na rok 2017 : Tak.

Kolumna rozmiaru na karcie Sieć w Narzędziach Chrome dla programistów ma zarówno rozmiar skompresowany, jak i nieskompresowany, dla gzip, brotli i wszystkiego, co będzie w przyszłości. Na przykład:

Tutaj rozmiar skompresowany wynosi 242 KB, rozmiar nieskompresowany wynosi 1,1 MB

Aby zobaczyć oba, upewnij się, że Devtools pokazują duże wiersze żądań . Jest to pierwsza ikona w opcjach „Widok” na pasku narzędzi sieci.

mikemaccana
źródło
7
Dzięki. Łatwo tego przegapić. Należy kliknąć „użyj dużych wierszy żądań”
ald.
Możesz także kliknąć nagłówki kolumn prawym przyciskiem myszy i wyświetlić nagłówek odpowiedzi „Kodowanie zawartości”. Po wykonaniu tej czynności możesz posortować według kolumny, aby uzyskać szybką listę wszystkich spakowanych odpowiedzi.
Thirdender
18

Zdecydowanie najłatwiejszą metodą jest użycie narzędzia online. GIDZipTest pokazuje wiele szczegółów: rozmiar oryginału, rozmiar skompresowany i procent kompresji.


Jest to jednak możliwe w Chrome przy odrobinie wysiłku. (Zaktualizowany do najnowszego Chrome, wrzesień 2011 r.)

W Narzędziach programisty przejdź do karty „Sieć” i ponownie załaduj stronę. Zobaczysz listę wszystkich plików pobranych w lewej kolumnie. Kliknij odpowiednią stronę / plik po lewej, a następnie kartę „Nagłówki” w prawym okienku.

W „Nagłówkach odpowiedzi” powinieneś zobaczyć „Content-Encoding: gzip”, a następnie nagłówek „Content-Length”. Jest to rozmiar skompresowanej zawartości.

Znalezienie nieskompresowanego rozmiaru jest trudniejsze. Jeśli podajesz pliki statyczne, możesz po prostu sprawdzić ich rozmiar. W przypadku treści dynamicznych musisz skopiować i wkleić kod HTML do edytora tekstowego i zapisać go, aby sprawdzić dokładny rozmiar.

DisgruntledGoat
źródło
gdzie jest „włączyć śledzenie zasobów”?
Pacerier 24.09.11
@Pacerier: nieco różni się w najnowszej wersji Chrome; Zaktualizowałem swoją odpowiedź o nowe instrukcje.
DisgruntledGoat
Zgrabne narzędzie. Nie mogłem zrozumieć, dlaczego odpowiedzi wysyłane przez moją aplikację Google App Engine nie wyświetlały skompresowanego rozmiaru. Odpowiedzi wysłane przez SDK (tj. Localhost) nie są kompresowane, podczas gdy odpowiedzi przychodzące z chmury. Okazuje się, że Chrome działa idealnie.
Evan Plaice
9

Aktualizacja na 2017 rok

Podczas korzystania z dużych ikon narzędzia deweloperów chrome wyświetlają przed i po kompresji rozmiar na kartach sieciowych.

Potwierdziłem to poprzez wyłączenie i włączenie gzip na moim serwerze internetowym.

Zrzut ekranu narzędzi programistycznych Chrome

wprowadź opis zdjęcia tutaj

CodeMonkey
źródło
5

Innym sposobem na osiągnięcie tego jest użycie cURL:

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

przeciw

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

Liczba pokazana po każdym poleceniu to liczba bajtów, które przekroczyły drut.

Stephen
źródło
2

Słyszałem, że ten w chrome jest wadliwy z powodu błędu w zestawie internetowym.

Powolne Plugin Y dla firefox robi wielką pracę. Po uruchomieniu przejdź do karty Składniki i rozwiń typ składnika, dla którego chcesz uzyskać wartości. Wyświetli oryginalny rozmiar i rozmiar gzip.

XOPJ
źródło
2

To nie jest narzędzie specjalnie dla Chrome, ale używam Fiddlera podczas sprawdzania ruchu HTTP / informacji nagłówka. To świetne narzędzie, działa na dowolnej przeglądarce i jest bezpłatne!

BradB
źródło
1
Teraz jest też wersja Fiddler z rozszerzeniem Chrome !
karlbecker_com
Dzięki za sugestię. Skrzypek nie pokazuje „nieskompresowanego rozmiaru”, ale pozwala dodawać kolumny dla „CompressionSavings” i „CompressionSavings%”. Dodaj je, klikając kolumny ==> „Dostosuj kolumny” ==> „Różne” ==> menu „Nazwa pola”.
JasonS
0

Dla każdego, kto wciąż tu przyjeżdża z ogólnej wyszukiwarki Google (tak jak ja), we współczesnych wersjach Firefoksa można zobaczyć rozmiar „raw” i gzip bezpośrednio z jego devtools, porównując kolumnę „Przeniesiony rozmiar” i kolumnę „Rozmiar”. „Rozmiar” to pierwotny rozmiar odpowiedzi, „Rozmiar przeniesiony” to rzeczywisty rozmiar danych przesłanych do odpowiedzi, który może być mniejszy niż rzeczywisty rozmiar w przypadku gzip, jak na poniższym obrazie, lub nawet 0 w sprawa została buforowana w kliencie.

firefox devtools gzipped rozmiar

LeartS
źródło