Jak symulować wolne warunki sieciowe na krawędzi i analizować wszystko

Przetestuj witrynę internetową tak, jak zrobiłby to użytkownik ze słabym połączeniem Ważne jest, aby mieć pewność, że jakość korzystania z Internetu nie zostanie zakłócona, gdy sieć jest napięta. Microsoft Edge Masz do dyspozycji natywne narzędzia do emulowania wysokich opóźnień, niskiej przepustowości, utraty pakietów, a nawet sytuacji offline. Wszystko to bez instalowania dodatkowych elementów, bezpośrednio z poziomu DevTools.

W tym praktycznym przewodniku pokażę Ci, jak symulować wolne sieci w Edge z narzędziem „Warunki sieciowe” i kartą „Sieć”, a także wszystkim, czego potrzebujesz do inspekcji, filtrowania, sortowania i eksportowania żądań. Zobaczysz również, jak wyłączyć buforowanie, podszywać się pod agenta użytkownika, korzystać z protokołu WebSocket, tworzyć niestandardowe profile ograniczania przepustowości i generować czyste pliki HAR lub pliki zawierające poufne dane, nie pomijając żadnych danych.

Co oznacza symulowanie powolnych warunków sieciowych na krawędzi?

Symuluj powolną sieć Polega ona na zastosowaniu ograniczenia przepustowości połączenia przeglądarki w celu kontrolowania pobierania, wysyłania, opóźnień, strat i kolejności pakietów. Edge integruje tę funkcję z narzędziami DevTools, zarówno z głównego paska narzędzi sieciowych, jak i z sekcji „Warunki sieciowe” w panelu „Szybki podgląd”.

Edge pozwala również wyłączyć pamięć podręczną przeglądarki., zmień ciąg agenta użytkownika i skonfiguruj kodowanie zawartości akceptowane przez klienta (gzip, deflate, br), aby odtworzyć rzeczywiste scenariusze pierwszej wizyty lub zgodności.

Dlaczego to zrobić? Ponieważ połączenia są bardzo zróżnicowane: światłowód w domu to nie to samo, co publiczne Wi-Fi, ograniczona przepustowość 4G czy przeciążona sieć. Opóźnienie (TTFB) oraz negocjacje z serwerami proxy i Service Workerami również odgrywają rolę. Emulując różne sytuacje, będziesz wiedzieć, gdzie dostosować swoją witrynę.

Szybka notatka dotycząca zakresu- Ograniczanie ruchu w narzędziach DevTools wpływa na ruch przeglądarki w ramach danej sesji. Jeśli potrzebujesz ograniczyć ruch, Windows Ogólnie rzecz biorąc, do walidacji witryny można używać bardzo wolnych profili w przeglądarce Edge lub narzędzi systemowych/innych firm, których zakres wykracza poza zakres tego przewodnika.

Rozpoczęcie pracy: otwórz DevTools i rejestruj aktywność sieciową

Otwórz DevTools, klikając prawym przyciskiem myszy > Inspect na dowolnej stronie testowej. Przejdź do narzędzia Sieć. Gdy narzędzia DevTools są otwarte, wszystkie żądania będą rejestrowane w tabeli na karcie Sieć po ponownym załadowaniu strony.

• Niezbędne przyciski: Możesz zatrzymać lub wznowić rejestrowanie (Ctrl+E lub Cmd+E), wyczyścić żądania (Ctrl+L lub Cmd+K) i włączyć opcję Zachowaj rejestrowanie, aby uniknąć utraty historii pomiędzy ponownego ładowaniami.
• Zrzuty ekranu podczas ładowaniaZ ikony Ustawień sieciowych w prawym górnym rogu włącz opcję Przechwytuj zrzuty ekranu i odśwież ekran, naciskając Ctrl+F5. Będziesz mógł przeglądać miniatury, powiększać, filtrować według czasu i analizować, co użytkownik widział podczas napływu bajtów.
• Odtwórz XHR: Znajdź żądanie XHR, kliknij je prawym przyciskiem myszy i wybierz opcję „Odtwórz XHR” (lub naciśnij R). Jest to przydatne, aby powtórzyć żądanie bez dotykania interfejsu użytkownika strony i sprawdzić, jak wpływa ono na przepustowość z ograniczeniem lub bez.

Wyłącz pamięć podręczną przeglądarki i zmień zachowanie ładowania

1. Aby symulować pierwszą wizytę królewskąZaznacz opcję „Wyłącz pamięć podręczną” u góry karty Sieć. W ten sposób unikniesz odpowiedzi z pamięci podręcznej i uzyskasz pełne nagłówki sieciowe i czasy.
2. Z warunków sieciowych (Przycisk „Więcej warunków sieciowych” na karcie „Sieć”). Możesz również włączyć opcję „Wyłącz pamięć podręczną”, jeśli wolisz scentralizować ją wraz z funkcją ograniczania przepustowości i agentem użytkownika. To pole wyboru jest aktywne, gdy aktywne są Narzędzia programistyczne.
3. Ręczne kasowanie:W tabeli żądań kliknij prawym przyciskiem myszy i wybierz opcję Wyczyść pamięć podręczną przeglądarki lub Wyczyść pliki cookie przeglądarki, gdy będziesz musiał wyczyścić pamięć pomiędzy testami.
4. Zapisz żądania między przesłaniami: Włącz opcję „Keep Log”, aby zachować oś czasu żądania nawet podczas przeładowywania lub nawigowania między trasami. Bardzo przydatne do porównań A/B.

Ograniczenie sieci: brak połączenia, ustawienia wstępne 4G/3G i profile niestandardowe

1. Szybkie ograniczenie z górnego paskaOtwórz menu rozwijane „Dławienie” i wybierz ustawienie wstępne, takie jak „Szybkie 4G”, „Wolne 4G”, „3G” lub „Offline”. Na karcie „Sieć” pojawi się ikona ostrzegawcza, przypominająca o aktywnym dławieniu.
2. Tryb offline:Przydatne do testowania aplikacji PWA z Service Workers. Wybierz tryb offline i sprawdź, jak aplikacja reaguje, co jest buforowane i co podlega strategiom takim jak cache-first czy network-first.
3. Utwórz własny profil: Przejdź do Ograniczanie > Niestandardowe > Dodaj lub skorzystaj ze ścieżki Konfiguracja Narzędzi Deweloperskich > Ograniczanie > Dodaj profil. Zdefiniuj Nazwę, Pobieranie (kb/s), Wysyłanie, Opóźnienie (ms), Utratę pakietów (%), Długość kolejki oraz czy chcesz zmienić kolejność pakietów. Skrajny przykład: pobieranie/wysyłanie 10 kb/s, 10 ms, 1% utraty.
4. Zastosuj profil niestandardowyZamknij Ustawienia, wróć do zakładki Sieć i wybierz profil utworzony w sekcji Ograniczenia > Niestandardowe. Sprawdź TTFB, rozmiar transferu i czasy pobierania z wodą po szyję.

Ograniczenie dotyczy również WebSocket

Ograniczanie wpływa na połączenia WebSocket, nie tylko HTTP. Ustaw swój wolny profil i otwórz stronę korzystającą z WebSocket. Połącz się, wyślij wiadomości, a następnie filtruj według gniazda za pomocą przycisku Filtr Gniazda (WebSocket | WebTransport | DirectSocket), aby odizolować połączenie.

• Karta WiadomościWybierz wpis gniazda i otwórz kartę Wiadomości. Zobaczysz wiadomości przychodzące i wychodzące, ich długość w bajtach oraz czas. W sekcji „Ograniczanie” zobaczysz wpływ opóźnienia i przeciążenia na znaczniki czasu.
• Rodzaje ramek W tabeli obsługiwane są: kontynuacja, binarny, zamknięcie, ping i pong. Idealnie nadaje się do debugowania czatów, Streaming dane lub synchronizacja w czasie rzeczywistym w ramach sieci tłumaczona na pedały.
• radaZamień profil 10 kb/s na wolniejszy 4G, aby zapewnić minimalne i optymalne działanie. Jeśli aplikacja ma już problemy z wolnym 4G, to jest jeszcze nad czym pracować.

Wskazówki dotyczące agenta użytkownika i klienta agenta użytkownika

• Unieważnij agenta użytkownikaW sekcji „Warunki sieciowe” odznacz opcję „Użyj domyślnej przeglądarki”. Wybierz predefiniowaną aplikację UA lub wprowadź własną. Przydatne do testowania wykrywania opartego na aplikacji UA lub odpowiedzi zależnych od serwera.
• Wskazówki dla klienta UAW tej samej sekcji możesz dostosować marki i wersje (np. Edge 92), pełną wersję przeglądarki, platformę i wersję (np. Windows 10.0), architekturę (x86) oraz model urządzenia. Pozwala to symulować reakcje zaplecza za pomocą nowoczesnych wskazówek.
• Weryfikacja:Otwiera konsolę i sprawdza navigator.userAgentData, aby sprawdzić, czy wskazówki odzwierciedlają ustawione wartości.

Ustaw prawidłowe kodowanie treści

Edge umożliwia zdefiniowanie, jakie kodowania treści akceptuje z opcją „Weryfikuj kodowanie zawartości”. W praktyce konfiguruje się obsługę nagłówków kodowania zawartości dla gzip, deflate i br. Serwery zazwyczaj wysyłają skompresowane odpowiedzi, a nagłówek wskazuje sposób ich zakodowania.

Dlaczego warto to obejrzeć? Ponieważ ma to bezpośredni wpływ na rozmiar i czas transferu w wolnych sieciach. Jeśli Twój serwer nie negocjuje poprawnie br lub gzip, zobaczysz większe rozmiary na osi czasu.

Przeszukuj, filtruj i sortuj zapytania jak profesjonalista

• Wyszukiwanie globalne: Otwórz kartę Znajdź w narzędziu Sieć (Ctrl+F lub Cmd+F), wprowadź ciąg i w razie potrzeby włącz dopasowanie z uwzględnieniem wielkości liter lub wyrażenia regularne. Wyniki są wyróżnione zarówno w tabeli, jak i w Nagłówkach lub Odpowiedziach.
• Filtry według właściwości: Użyj pola Filtr dla wyrażeń łączących spacje (działają jak AND). Przykłady: mime-type:image/png greater-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• Dostępne nieruchomości: domena-cookie, nazwa-cookie, ścieżka-cookie, wartość-cookie, domena, ma-nadpisania, ma-nagłówek-odpowiedzi, jest: uruchomiony (dla WebSocket), większy-niż, metoda, typ MIME, zawartość-mieszana:wszystkie lub zawartość-mieszana:wyświetlana, priorytet, typ-zasobu, nagłówek-odpowiedzi-ustawiony-cookie, schemat, ustaw-domenę-cookie, ustaw-nazwę-cookie, ustaw-wartość-cookie, kod-statusu, adres URL.
• Filtry według typu: Wszystkie, Pobierz/XHR, Dokument, CSS, JS, Czcionka, Img, Przełączniki Med ia, Manifest, WS, Wasm lub Inne. Możesz aktywować kilka z nich, przytrzymując Ctrl lub Cmd żeby przejść do sedna sprawy.
• Więcej szybkich filtrów: ukrywa adresy URL danych (data:)), ukrywa adresy URL rozszerzeń (chrome-extension://), wyświetla tylko zablokowane żądania, pochodzące od osób trzecich lub z zablokowanymi plikami cookie odpowiedzi (z bezpośrednim dostępem do zakładki Pliki cookie i narzędzia Problemy).

Uporządkuj i zrozum kaskadę czasów

• Sortuj według kolumn- Kliknij nagłówki tabeli (Nazwa, Status, Typ, Inicjator, Rozmiar, Czas, Ukończone przez), aby posortować. Dodaj kolumnę Kaskada, klikając prawym przyciskiem myszy nagłówek, jeśli jej nie widzisz.
• Zaawansowany porządek kaskadowyKliknij prawym przyciskiem myszy nagłówek Wodospad i wybierz Czas rozpoczęcia, Czas reakcji, Czas zakończenia, Całkowity czas trwania lub Opóźnienie. Przełącz kolejność rosnącą/malejącą, klikając tytuł kolumny.
• Podgląd awariiNajedź kursorem na pasek żądań Cascade, aby wyświetlić podpowiedź z kolejkami, DNS, połączeniem, SSL, negocjacją proxy, wysłaniem żądania, oczekiwaniem (TTFB) i pobieraniem. Włącz duże wiersze, aby jednocześnie wyświetlić rozmiar transferu i dekompresji.
• Ładowanie zdarzeń: DOMContentLoaded i obciążenie pojawiają się jako pionowe linie w panelach Przegląd, Kaskada i Podsumowanie. Są niebieskie dla DOMContentLoaded i czerwone dla obciążenia. Dzięki temu możesz zobaczyć, gdzie w kaskadzie znajdują się kluczowe zdarzenia.

Grupuj według ramek iframe i sprawdzaj inicjatory oraz zależności

• Grupuj według ramek: Włącz opcję Grupuj według ramki w Ustawieniach sieciowych, aby zwijać/rozwijać ramki iframe wraz z ich podrzędnymi żądaniami. To rozwiązanie sprawdza się, gdy strona wstawia wiele ramek.
• Inicjatory i zależności: Przytrzymaj Shift i najedź kursorem na prośbę. Zobaczysz osobę, która ją zainicjowała, na zielono, a osoby zależne na czerwono. W kolejności chronologicznej możesz prześledzić łańcuch inicjatorów wstecz.

Rozłóż każde żądanie na czynniki pierwsze: podgląd, odpowiedź, nagłówki i dane

• Podgląd: Wybierz żądanie i otwórz kartę Podgląd, idealną dla obrazów lub obiektów możliwych do renderowania.
• odpowiedź: Karta Odpowiedź, aby zobaczyć treść wiadomości w momencie jej otrzymania. W przypadku JSON możesz skopiować format z Podglądu, klikając prawym przyciskiem myszy pierwszy wiersz i wybierając Kopiuj wartość.
• Nagłówki- Karta Nagłówki z opcjami Ogólne, Wczesne wskazówki (jeśli dotyczy), Odpowiedź i Żądanie. Wybierz opcję Nieprzetworzone, aby zobaczyć rzeczywistą kolejność odbioru. Jeśli pojawią się Nagłówki Tymczasowe, może to być spowodowane lokalną pamięcią podręczną, nieprawidłowym zasobem lub ograniczeniami bezpieczeństwa. Wyłączenie pamięci podręcznej i ponowne załadowanie zazwyczaj zwraca pełne nagłówki.
• Ładunek: Karta Załaduj dla parametrów ciągu zapytania i danych formularza. Użyj opcji Wyświetl źródło, aby zobaczyć oryginalną reprezentację i przełączać się między kodowaniem i dekodowaniem URL podczas testowania parametrów ze znakami specjalnymi.

Ciasteczka, rozmiar i wypełniacze

• Karta plików cookie: Wyświetla pliki cookie wysłane wraz z żądaniem, wraz ze szczegółowymi polami. Przydatne do sprawdzania SameSite, Secure, domeny i dat wygaśnięcia. W narzędziu Sieć zobaczysz powiadomienia, gdy pliki cookie zostaną zablokowane przez zasady lub ustawienia przeglądarki.
• Rozmiar przesłany i nieskompresowany: Włącz opcję „Duże wiersze żądań”, aby kolumna „Rozmiar” wyświetlała rozmiar transferu w dużych przyrostach, a rozmiar po dekompresji w małych przyrostach. Pomaga to ocenić rzeczywisty wpływ kompresji w sieciach o ograniczonej przepustowości.
• Spełnione przez:Ta kolumna wskazuje, czy odpowiedź została wysłana z pamięci podręcznej HTTP, czy z Service Worker. Podczas pierwszych testów warto wyłączyć pamięć podręczną, aby uniknąć zafałszowania czasu.

Analizuj WebSocket i strumienie zdarzeń

• WebSocketPrzy aktywnym filtrze gniazd wybierz połączenie i otwórz kartę Wiadomości. Zobaczysz do 100 ostatnich wiadomości, w tym ich kierunek (wysłane/pobrane), czas i długość. Przy ograniczeniu przepustowości, czasy pokazują historię sieci.
• EventSource i strumieniowaniePo uruchomieniu SSE zobaczysz żądanie typu SSE oraz kartę EventStream z komunikatami przychodzącymi ze stałą częstotliwością. Możesz filtrować za pomocą wyrażenia regularnego i wyczyścić komunikat przyciskiem „Wyczyść”.

Eksport i import: Zdezynfekowane HAR lub z poufnymi danymi

• Eksportuj wszystko jako HARZ paska akcji lub klikając prawym przyciskiem myszy dowolne żądanie, wybierz opcję Eksportuj HAR (zdezynfekowany). Ten format JSON domyślnie wyklucza pola wrażliwe, takie jak Cookie, Set-Cookie i Authorization.
• Dodaj sekrety, jeśli to konieczneW Ustawieniach DevTools > Preferencje > Sieć wybierz Zezwalaj na generowanie plików HAR z danymi wrażliwymi. Z tego miejsca możesz również wyeksportować wariant z danymi wrażliwymi.
• Importuj plik HARPrzeciągnij plik HAR do tabeli narzędzi sieciowych lub użyj opcji Importuj plik HAR. Edge wyświetli żądania, ich inicjatory i umożliwi ich analizę tak, jakbyś je przechwycił na żywo.
• Kopiuj do schowek:Kliknięcie prawym przyciskiem myszy na żądaniu pozwala na skopiowanie adresu URL, np. cURL (cmd lub bash) PowerShell, takich jak pobieranie (przeglądarka lub Node.js), skopiuj odpowiedź lub ślad stosu (jeśli zainicjowany przez JavaScript). Dostępne są również opcje kopiowania wszystkich lub przefiltrowanych odpowiedzi w tych samych formatach oraz kopiowania wszystkiego jako zdezynfekowanego pliku HAR lub z danymi.

Liczniki i pulpity nawigacyjne: przegląd

• Podsumowanie na dolePanel Podsumowanie pokazuje całkowitą liczbę żądań i całkowity rozmiar pobrań od momentu otwarcia Narzędzi DevTools. Pamiętaj, że pobrania dokonane przed otwarciem Narzędzi DevTools nie są wliczane.
• Informacje ogólne: Możesz to ukryć, jeśli przeszkadza, odznaczając opcję „Pokaż przegląd”. Uwielbiam tę opcję, ponieważ pozwala ona na śledzenie skoków aktywności oraz lokalizacji DOMContentLoaded i ładowania na osi czasu.
• Ukryj panel FiltryJeśli potrzebujesz więcej miejsca na tabelę, zwiń panel filtrów przyciskiem Filtr. Aktywuj go ponownie, gdy będzie Ci potrzebny.

Praktyczne przypadki z ograniczeniami: od 4G do 10 kbps

• Minimalny rozsądny test: Zastosuj wolne 4G i przeładuj. Zwróć uwagę na czas TTFB i kaskadowe czasy ładowania. Jeśli wizualizacja bohatera trwa długo, sprawdź krytyczne czcionki, CSS i JS oraz włącz kompresję br/gzip na serwerze.
• Ekstremalny testZastosuj swój profil 10 kbps, 10 ms, 1% strat i reorganizacji. Tak, to piekło, ale ujawnia ukryte zależności, nieprzyjazne limity czasu i zasoby, które nigdy nie powinny być blokowane.
• PWA offline: Włącza pobieranie offline i weryfikuje trasy zapisane w Service Worker, strategie buforowania i strony zapasowe. Sprawdza, jak zachowują się nieudane żądania pobierania i czy użytkownik jest prawidłowo informowany.
• WebSocket z opóźnieniem: W profilu „Powolny” wysyłaj i odbieraj wiadomości oraz sprawdź zakładkę „Wiadomości”. W razie potrzeby dostosuj interwały ping/pong, ponowne próby i wykładnicze ponowne połączenia.

Dodatkowe wskazówki: narzędzia uzupełniające

• Test strony internetowej:Bezpłatna usługa open source do symulacji typowych warunków (56K, 3G itp.) poprzez wybór lokalizacji i przeglądarki. Umożliwia podstawowe i zaawansowane testy z wykorzystaniem wideo, blokowania treści i innych funkcji.
• Obrót głowy:pozwala na testowanie w sieci komórkowe Testy porównawcze w warunkach rzeczywistych. Jeśli potrzebujesz pełnego realizmu i pomiarów obejmujących ponad 1.000 sieci, to jest to potężny test porównawczy.
• PrędkośćCurve: emuluje warunki panujące w ciągu dnia, aby ocenić wahania spowodowane korkami. Bardzo przydatne do obserwowania zmian wskaźników w godzinach szczytu.
• Network Link Conditioner w systemie macOS:część Xcode, idealna do symulowania opóźnień, strat lub awarii na poziomie systemu w środowiskach Apple.

Krótki przewodnik po fazach czasowych

• Fazy, które zobaczysz na karcie Czas: Kolejkowanie (z powodu priorytetu lub limitu 6 połączeń w HTTP/1.0/1.1), Zatrzymanie (z powodu kolejkowania), Wyszukiwanie DNS, Połączenie (TCP i SSL), Negocjacje proxy, Wysłanie żądania, Przygotowanie i żądanie do ServiceWorkera, Oczekiwanie (TTFB) oraz Pobieranie zawartości. W HTTP/2 zobaczysz również Odbieranie powiadomień push i Odczyt powiadomień push, jeśli ma to zastosowanie.
• Praktyczna interpretacja:Długie kolejki zachęcają do priorytetyzowania zasobów i zmniejszania liczby połączeń, wysokie TTFB wymagają optymalizacji zaplecza i odległości, a descargas wieczne, aby umożliwić kompresję i partycjonowanie tego, co jest naprawdę krytyczne.

Drobne zmiany w interfejsie, które robią różnicę

• Duże kolejki żądań: Włącz te opcje w Ustawieniach sieci, aby na pierwszy rzut oka zobaczyć, co jest przesyłane, a co dekompresowane, a także priorytety początkowe i końcowe. Zapewnia to przejrzystość, gdy lista jest długa.
• Kolumny niestandardoweKliknij prawym przyciskiem myszy nagłówek tabeli, aby ukryć/pokazać kolumny i dodać kolumny niestandardowe na podstawie nagłówków odpowiedzi. Możesz nawet zarządzać kolumnami nagłówków z dedykowanego okna.

Jeśli tworzysz przepływ testowy z wyłączonym buforowaniem, realistycznym ograniczaniem, filtrami według typu i przeglądem TTFB, kaskady, ładunków i HARBędziesz mieć wiarygodny obraz tego, jak Twoja witryna internetowa sprawdza się w trudnych sytuacjach, a także będziesz dokładnie wiedzieć, co zrobić, aby działała sprawnie, nawet gdy sieć nie działa.

Podobne artykuły:

Kompletny przewodnik po prawidłowym wykonaniu testu szybkości sieci

Isaac

Pisarz z pasją zajmujący się światem bajtów i technologii w ogóle. Uwielbiam dzielić się swoją wiedzą poprzez pisanie i właśnie to będę robić na tym blogu, pokazywać Ci wszystkie najciekawsze rzeczy o gadżetach, oprogramowaniu, sprzęcie, trendach technologicznych i nie tylko. Moim celem jest pomóc Ci poruszać się po cyfrowym świecie w prosty i zabawny sposób.