Hoe u trage netwerkomstandigheden aan de Edge kunt simuleren en alles kunt analyseren

Test een website zoals een gebruiker met een slechte verbinding dat zou doen Het is van cruciaal belang ervoor te zorgen dat de ervaring intact blijft als het netwerk krap is. Microsoft Edge Je hebt native tools tot je beschikking om hoge latentie, lage bandbreedte, pakketverlies en zelfs offline situaties te emuleren. En dat allemaal zonder extra installatie, rechtstreeks vanuit DevTools.

In deze praktische gids laat ik je zien hoe je langzame netwerken in Edge kunt simuleren Met de tool Netwerkvoorwaarden en het tabblad Netwerk, plus alles wat u nodig hebt om verzoeken te inspecteren, filteren, sorteren en exporteren. U leert ook hoe u caching uitschakelt, de user-agent vervalst, met WebSocket werkt, aangepaste throttlingprofielen maakt en schone HAR's of HAR's met gevoelige gegevens uitvoert, zonder iets achter te laten.

Wat betekent het om langzame netwerkomstandigheden aan de Edge te simuleren?

Simuleer een langzaam netwerk Dit houdt in dat er throttling wordt toegepast op de browserverbinding om downloads, uploads, latentie, verlies en pakketvolgorde te regelen. Edge integreert dit in DevTools, zowel vanuit de hoofdwerkbalk Netwerk als vanuit Netwerkvoorwaarden in het paneel Snelle weergave.

Met Edge kunt u ook de browsercache uitschakelen., wijzig de tekenreeks van de gebruikersagent en configureer welke inhoudscoderingen de client accepteert (gzip, deflate, br) om realistische eerste-bezoek- of compatibiliteitsscenario's te repliceren.

Waarom het doen? Omdat verbindingen sterk variëren: glasvezel thuis is niet hetzelfde als openbare wifi, beperkt 4G of een overbelast netwerk. Latency (TTFB) en onderhandeling met proxyservers en service workers spelen ook een rol. Door verschillende situaties na te bootsen, weet u waar u uw website moet aanpassen.

Snelle scope-notitie- DevTools-throttling heeft invloed op het browserverkeer binnen die sessie. Als u throttlen nodig hebt Windows Over het geheel genomen kunt u zeer langzame profielen in Edge gebruiken om het web te valideren, of systeem-/hulpprogramma's van derden die buiten het bereik van deze handleiding vallen.

Aan de slag: Open DevTools en registreer netwerkactiviteit

Open DevTools door met de rechtermuisknop te klikken > Inspecteren op elke testpagina. Ga naar de tool Netwerk. Zolang DevTools open is, worden alle verzoeken geregistreerd in de tabel op het tabblad Netwerk wanneer de pagina opnieuw wordt geladen.

• Essentiële knoppen: U kunt het loggen stoppen of hervatten (Ctrl+E of Cmd+E), verzoeken wissen (Ctrl+L of Cmd+K) en Logboek bewaren inschakelen om te voorkomen dat de geschiedenis verloren gaat tussen herladingen.
• Schermafbeeldingen tijdens het ladenSchakel via het pictogram Netwerkinstellingen in de rechterbovenhoek 'Screenshots maken' in en herlaad met Ctrl+F5. Je kunt nu miniaturen bekijken, inzoomen, filteren op tijd en analyseren wat de gebruiker zag terwijl de bytes binnenkwamen.
• Speel XHR: Zoek een XHR-verzoek, klik er met de rechtermuisknop op en kies 'XHR opnieuw afspelen' (of druk op R). Dit is handig om het verzoek te herhalen zonder de pagina-interface aan te raken en te zien welke impact het heeft, met of zonder beperking.

Browsercache uitschakelen en laadgedrag wijzigen

1. Om het eerste koninklijke bezoek te simuleren, vink Cache uitschakelen bovenaan het tabblad Netwerk aan. Zo voorkom je dat reacties uit de cache worden gestuurd en krijg je de volledige netwerkheaders en -tijden.
2. Van netwerkomstandigheden (Knop Meer netwerkvoorwaarden op het tabblad Netwerk) U kunt ook Cache uitschakelen inschakelen als u deze wilt centraliseren, samen met throttling en user agent. Dit selectievakje is actief zolang DevTools de focus heeft.
3. Handmatig wissen: Klik met de rechtermuisknop in de tabel met aanvragen en kies Browsercache wissen of Browsercookies wissen als u tussen tests wilt opschonen.
4. Verzoeken opslaan tussen uploads: Schakel 'Keep Log' in om de aanvraagtijdlijn te behouden, zelfs wanneer u opnieuw laadt of tussen routes navigeert. Zeer handig voor A/B-vergelijkingen.

Netwerklimiet: Geen verbinding, 4G/3G-voorinstellingen en aangepaste profielen

1. Snelle beperking vanaf de bovenste balk: Open het dropdownmenu 'Beperking' en kies een voorinstelling, zoals Snel 4G, Langzaam 4G, 3G of Offline. Op het tabblad Netwerk wordt een waarschuwingspictogram weergegeven om u eraan te herinneren dat de beperking actief is.
2. Offline modus: Handig voor het testen van PWA's met service workers. Selecteer offline en controleer hoe de app reageert, wat er in de cache wordt opgeslagen en wat onder strategieën zoals cache-first of network-first valt.
3. Maak je eigen profiel aan: Ga naar Throttling > Aangepast > Toevoegen, of gebruik het pad DevTools Configuratie > Throttling > Profiel toevoegen. Definieer Naam, Download (kbps), Upload, Latentie (ms), Pakketverlies (%), Wachtrijlengte en of u Pakketherordening wilt. Een extreem voorbeeld: 10 kbps download/upload, 10 ms, 1% verlies.
4. Het aangepaste profiel toepassen: Sluit Instellingen, ga terug naar het tabblad Netwerk en selecteer het profiel dat je hebt aangemaakt onder Beperken > Aangepast. Bekijk de TTFB, overdrachtsgrootte en downloadtijden met het water tot aan je nek.

Beperking ook voor WebSocket

Throttling heeft invloed op WebSocket-verbindingen, niet alleen HTTP. Stel uw langzame profiel in en open een pagina die WebSocket gebruikt. Maak verbinding, verstuur berichten en filter vervolgens op socket met de knop Socket Filter (WebSocket | WebTransport | DirectSocket) om de verbinding te isoleren.

• Tabblad Berichten: Selecteer het socketitem en open het tabblad Berichten. U ziet de inkomende en uitgaande berichten, hun lengte in bytes en de tijd. Onder 'throttling' ziet u het effect van vertraging en congestie op de tijdstempels.
• Soorten frames Ondersteund in de tabel: voortzetting, binair, sluiten, ping en pong. Ideaal voor het debuggen van chats. streaming gegevens of real-time synchronisatie onder netwerken vertaald naar pedalen.
• raadWissel je 10 kbps-profiel af met een trage 4G-verbinding om een ​​minimale en redelijke ervaring te garanderen. Als de app al moeite heeft met trage 4G, is er werk aan de winkel.

Tips voor gebruikersagenten en gebruikersagentclients

• De gebruikersagent ongeldig makenSchakel onder Netwerkvoorwaarden het selectievakje Browserstandaard gebruiken uit. Kies een vooraf gedefinieerde UA of voer uw eigen UA in. Handig voor het testen van UA-gebaseerde detecties of serverafhankelijke reacties.
• UA-clienthints: In dezelfde sectie kunt u merken en versies (bijv. Edge 92), de volledige browserversie, het platform en de versie (bijv. Windows 10.0), de architectuur (x86) en het apparaatmodel aanpassen. Zo kunt u simuleren hoe een backend met moderne hints reageert.
• Verificatie: Opent de console en evalueert navigator.userAgentData om te controleren of de hints de ingestelde waarden weerspiegelen.

Geldige inhoudscoderingen instellen

Met Edge kunt u definiëren welke inhoudscoderingen het accepteert Met de optie Validate Content-Encodings. In de praktijk configureert u ondersteuning voor content-encoding headers voor gzip, deflate en br. Servers sturen doorgaans gecomprimeerde antwoorden en de header geeft aan hoe het antwoord is gecodeerd.

Waarom zou ik het bekijken? Omdat het direct van invloed is op de overdrachtsgrootte en -tijden op trage netwerken. Als je server br of gzip niet correct onderhandelt, zie je grotere bestandsgroottes in de tijdlijn.

Zoek, filter en sorteer verzoeken als een professional

• Globaal zoeken: Open het tabblad Zoeken in de Netwerktool (Ctrl+F of Cmd+F), voer de tekenreeks in en schakel indien nodig hoofdlettergevoelige matching of reguliere expressies in. Resultaten worden gemarkeerd in zowel de tabel als in kopteksten of reacties.
• Filters op eigenschappen: Gebruik het filtervak ​​voor expressies die spaties combineren (ze werken als AND). Voorbeelden: mime-type:image/png larger-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• beschikbare eigendommen: cookie-domein, cookie-naam, cookie-pad, cookie-waarde, domein, heeft-overrides, heeft-response-header, is:running (voor WebSocket), groter-dan, methode, mime-type, gemengde-inhoud:alles of gemengde-inhoud:weergegeven, prioriteit, resource-type, response-header-set-cookie, schema, set-cookie-domein, set-cookie-naam, set-cookie-waarde, status-code, url.
• Filters op type: Alle, Fetch/XHR, Doc, CSS, JS, Lettertype, Img, Med-schakelaars ia, Manifest, WS, Wasm of Anders. Je kunt er meerdere activeren door Ctrl of Cmd om ter zake te komen.
• Meer snelle filters: verbergt gegevens-URL's (data:), verbergt extensie-URL's (chrome-extension://), toont alleen geblokkeerde verzoeken, van derden of met geblokkeerde antwoordcookies (met directe toegang tot het tabblad Cookies en het hulpmiddel Problemen).

Orden en begrijp de cascade van tijden

• Sorteren op kolommen- Klik op de tabelkoppen (Naam, Status, Type, Initiator, Grootte, Tijd, Voltooid door) om te sorteren. Voeg de kolom Cascade toe door met de rechtermuisknop op de kop te klikken als u deze niet ziet.
• Geavanceerde Cascade OrderKlik met de rechtermuisknop op de kop 'Waterval' en kies 'Starttijd', 'Reactietijd', 'Eindtijd', 'Totale duur' of 'Latentie'. Schakel oplopend/aflopend in door op de kolomtitel te klikken.
• Voorvertoning van de storingBeweeg de muis over een Cascade-aanvraagbalk om een ​​tooltip te zien met wachtrijen, DNS, verbinding, SSL, proxy-onderhandeling, aanvraagindiening, wachttijd (TTFB) en download. Schakel grote rijen in om de verzonden en gedecomprimeerde grootte in één oogopslag te zien.
• Gebeurtenissen laden: DOMContentLoaded en load worden weergegeven als verticale lijnen in de panelen Overzicht, Cascade en Samenvatting. Ze zijn blauw voor DOMContentLoaded en rood voor load. Dit helpt u te zien waar uw belangrijkste gebeurtenissen in de waterval vallen.

Groepeer op iframes en inspecteer initiators en afhankelijkheden

• Groeperen op frames: Schakel Groeperen op frame in via Netwerkinstellingen om iframes met hun subverzoeken in of uit te vouwen. Dit is handig wanneer een pagina veel frames invoegt.
• Initiatiefnemers en afhankelijkheden: Houd Shift ingedrukt en beweeg de muis over een verzoek. Je ziet de persoon die het verzoek heeft gestart in het groen en de personen die er afhankelijk van zijn in het rood. In chronologische volgorde kun je de keten van initiatiefnemers terug volgen.

Analyseer elk verzoek: voorbeeld, antwoord, headers en payload

• Voorbeeld: Selecteer een verzoek en open het tabblad Voorbeeld, ideaal voor renderbare afbeeldingen of objecten.
• antwoord: Tabblad Reactie om de body te bekijken zoals deze binnenkomt. Voor JSON kunt u de opmaak kopiëren vanuit Voorvertoning door met de rechtermuisknop op de eerste regel te klikken en Waarde kopiëren te selecteren.
• Headers- Tabblad Kopteksten met Algemeen, Vroege hints (indien van toepassing), Reactie en Aanvraag. Selecteer Onverwerkt om de daadwerkelijke volgorde van ontvangst te zien. Als er voorlopige kopteksten worden weergegeven, kan dit te wijten zijn aan een lokale cache, een ongeldige resource of beveiligingsbeperkingen. Door de cache uit te schakelen en opnieuw te laden, worden meestal de volledige kopteksten geretourneerd.
• Lading: Tabblad Laden voor queryreeksparameters en formuliergegevens. Gebruik Bron bekijken om de originele weergave te bekijken en te schakelen tussen URL-gecodeerd en URL-gedecodeerd bij het testen van parameters met speciale tekens.

Cookies, grootte en fulfillers

• Tabblad Cookies: Geeft de cookies weer die met de aanvraag zijn verzonden, met gedetailleerde velden. Handig voor het bekijken van SameSite, Secure, domein en vervaldatums. In de Netwerktool ziet u meldingen wanneer cookies worden geblokkeerd door beleid of browserinstellingen.
• Overgedragen en ongecomprimeerde grootte: Schakel 'Grote aanvraagrijen' in, zodat de kolom 'Grootte' de overgedragen grootte in grote stappen en de gedecomprimeerde grootte in kleine stappen weergeeft. Dit helpt bij het beoordelen van de impact van compressie op beperkte netwerken in de praktijk.
• Vervuld door: Deze kolom geeft aan of een respons is geleverd vanuit de HTTP-cache of een service worker. Bij eerste testruns is het een goed idee om de cache uit te schakelen om onjuiste timing te voorkomen.

WebSocket- en gebeurtenisstromen analyseren

• WebSocketSelecteer de verbinding met het socketfilter actief en open het tabblad Berichten. Je ziet maximaal de laatste 100 berichten, inclusief hun richting (omhoog/omlaag), tijd en lengte. Onder throttling geven de tijden de netwerkgeschiedenis weer.
• EventSource en streamingWanneer u een SSE activeert, ziet u een SSE-aanvraag en een tabblad EventStream met berichten die met een vaste frequentie binnenkomen. U kunt filteren met een reguliere expressie en het bericht wissen met de knop Wissen.

Exporteren en importeren: Gedesinfecteerde HAR of met gevoelige gegevens

• Alles exporteren als HARSelecteer Export HAR (sanitized) in de actiebalk of door met de rechtermuisknop op een verzoek te klikken. Deze JSON-indeling sluit standaard gevoelige velden zoals Cookie, Set-Cookie en Autorisatie uit.
• Voeg geheimen toe als dat nodig isSelecteer in DevTools Instellingen > Voorkeuren > Netwerk de optie Genereren van HAR's met gevoelige gegevens toestaan. Van daaruit kunt u de variant met gevoelige gegevens ook exporteren.
• Importeer een HAR: Sleep een HAR-bestand naar de netwerktooltabel of gebruik Importeer HAR-bestand. Edge toont de verzoeken en hun initiators, zodat u ze kunt analyseren alsof u ze live hebt vastgelegd.
• Kopiëren naar klembord: Met een rechtermuisklik op een verzoek kunt u de URL kopiëren, zoals cURL (cmd of bash), zoals PowerShell, zoals fetch (browser of Node.js), kopieer de respons of stack trace (indien geïnitieerd door JavaScript). Er zijn ook opties om alle of gefilterde responsen in dezelfde formaten te kopiëren, en om alles te kopiëren als gesanitiseerde HAR of met data.

Tellers en dashboards: een overzicht

• Samenvatting onderaan- Het paneel Samenvatting toont het totale aantal verzoeken en de totale downloadgrootte sinds u DevTools hebt geopend. Houd er rekening mee dat downloads die plaatsvonden vóórdat u DevTools opende, niet worden meegeteld.
• Algemene informatie: Je kunt het verbergen als het in de weg zit door 'Overzicht weergeven' uit te schakelen. Ik vind het geweldig om activiteitspieken en de locatie van DOMContentLoaded en de laadtijd op de tijdlijn te zien.
• Paneel Filters verbergenAls je meer ruimte voor je tabel wilt, klap je het filterpaneel in met de filterknop. Activeer het weer wanneer je het weer nodig hebt.

Praktische gevallen met beperkingen: van 4G naar 10 kbps

• Minimale redelijke test: Pas langzame 4G toe en herlaad. Let op TTFB en cascadetijden. Als de hero-afbeelding lang duurt, onderzoek dan kritieke lettertypen, CSS en JS en schakel br/gzip-compressie in op de server.
• Extreme test: Pas je 10 kbps, 10 ms, 1% verlies en herordeningsprofiel toe. Ja, het is hel, maar het onthult verborgen afhankelijkheden, onvriendelijke time-outs en resources die nooit geblokkeerd zouden moeten worden.
• Offline PWA: Maakt offline ophalen mogelijk en valideert in Service Worker opgeslagen routes, cachestrategieën en fallbackpagina's. Controleer hoe mislukte ophaalverzoeken zich gedragen en of de gebruiker correct wordt geïnformeerd.
• WebSocket met latentie: Met het profiel Langzaam kunt u berichten verzenden en ontvangen en het tabblad Berichten controleren. Pas indien nodig de ping/pong-intervallen, nieuwe pogingen en exponentiële herverbindingen aan.

Extra tips: aanvullende tools

• WebPageTest: Een gratis open-sourceservice voor het simuleren van typische omstandigheden (56K, 3G, enz.) door een locatie en browser te kiezen. Het maakt basis- en geavanceerde tests mogelijk met video, contentblokkering en meer.
• Hoofdspin: hiermee kunt u testen in mobiele netwerken Benchmarks uit de praktijk. Als u volledige realisme en metingen over meer dan 1.000 netwerken nodig hebt, is dit een krachtige benchmark.
• SnelheidCurve: emuleert de omstandigheden gedurende de dag om variaties als gevolg van congestie te beoordelen. Zeer nuttig om te zien hoe statistieken veranderen tijdens piekuren.
• Netwerkkoppelingsconditioner op macOS: onderdeel van Xcode, ideaal voor het simuleren van latenties, verliezen of storingen op systeemniveau in Apple-omgevingen.

Snelle referentiegids voor tijdfasen

• Fases die u in het tabblad Timing ziet: Wachtrij (vanwege prioriteit of de limiet van 6 verbindingen in HTTP/1.0/1.1), Geblokkeerd (vanwege wachtrij), DNS-opzoeken, Verbinding (TCP en SSL), Proxy-onderhandeling, Verzoek verzonden, Voorbereiden en Verzoek aan ServiceWorker, Wachten (TTFB) en Inhoud downloaden. In HTTP/2 ziet u ook Ontvangst-push en Lees-push, indien van toepassing.
• Praktische interpretatie: Lange wachtrijen stimuleren het prioriteren van bronnen en het verminderen van het aantal verbindingen, een hoge TTFB vraagt ​​om het optimaliseren van de backend en de afstand, en downloads eeuwig om compressie en partitionering mogelijk te maken van wat echt belangrijk is.

Kleine interface-aanpassingen die het verschil maken

• Grote aanvraagwachtrijen: Schakel deze in via Netwerkinstellingen om in één oogopslag te zien wat er wordt overgedragen en wat er wordt gedecomprimeerd, en wat de begin- en eindprioriteiten zijn. Dit zorgt voor duidelijkheid wanneer de lijst lang is.
• Aangepaste kolommenKlik met de rechtermuisknop op de tabelkop om kolommen te verbergen/tonen en aangepaste kolommen toe te voegen op basis van antwoordkoppen. U kunt kopkolommen zelfs beheren vanuit een speciaal venster.

Als u een teststroom bouwt met uitgeschakelde caching, realistische throttling, filters per type en een beoordeling van TTFB, waterval, payloads en HARU krijgt een realistisch beeld van hoe uw website presteert in lastige situaties. Bovendien weet u precies wat u moet doen om de website draaiende te houden, zelfs als het netwerk niet werkt.

Gerelateerd artikel:

Volledige handleiding voor het correct uitvoeren van een netwerksnelheidstest

Isaac

Gepassioneerd schrijver over de wereld van bytes en technologie in het algemeen. Ik deel mijn kennis graag door te schrijven, en dat is wat ik in deze blog ga doen: je de meest interessante dingen laten zien over gadgets, software, hardware, technologische trends en meer. Mijn doel is om u te helpen op een eenvoudige en onderhoudende manier door de digitale wereld te navigeren.