Hvordan simulere trege nettverksforhold på Edge og analysere alt

Test et nettsted slik en bruker med dårlig internettforbindelse ville gjort Det er viktig å sørge for at opplevelsen ikke blir ødelagt når nettverket er stramt. Microsoft Edge Du har innebygde verktøy for å emulere høy latens, lav båndbredde, pakketap og til og med offline-situasjoner. Alt uten å installere noe ekstra, rett fra DevTools.

I denne praktiske guiden viser jeg deg hvordan du simulerer trege nettverk i Edge med verktøyet Nettverksbetingelser og Nettverk-fanen, pluss alt du trenger for å inspisere, filtrere, sortere og eksportere forespørsler. Du vil også se hvordan du deaktiverer mellomlagring, forfalsker brukeragenten, jobber med WebSocket, oppretter tilpassede reguleringsprofiler og sender ut rene HAR-er eller de med sensitive data, uten å legge igjen noe.

Hva betyr det å simulere trege nettverksforhold på Edge?

Simuler tregt nettverk Dette innebærer å begrense nettleserens tilkobling for å kontrollere nedlasting, opplasting, latens, tap og pakkerekkefølge. Edge integrerer dette i DevTools, både fra hovedverktøylinjen for nettverk og fra Nettverksbetingelser i hurtigvisningspanelet.

Edge lar deg også deaktivere nettleserens hurtigbuffer., endre brukeragentstrengen og konfigurer hvilke innholdskodinger klienten godtar (gzip, deflate, br) for å gjenskape reelle scenarier ved første besøk eller kompatibilitet.

Hvorfor gjøre det? Fordi tilkoblinger varierer mye: fiberoptikk hjemme er ikke det samme som offentlig Wi-Fi, begrenset 4G eller et overbelastet nettverk. Latens (TTFB) og forhandling med proxyer og tjenestearbeidere spiller også en rolle. Ved å emulere ulike situasjoner, vil du vite hvor du skal justere nettstedet ditt.

Hurtignotat om omfang– Begrensning av DevTools påvirker nettlesertrafikken i den økten. Hvis du trenger å begrense Windows Alt i alt kan du bruke svært trege profiler i Edge for å validere nettet, eller system-/tredjepartsverktøy utenfor omfanget av denne veiledningen.

Komme i gang: Åpne DevTools og loggfør nettverksaktivitet

Åpne DevTools ved å høyreklikke > Inspiser på en hvilken som helst testside. Gå til nettverksverktøyet. Mens DevTools er åpent, logges alle forespørsler i tabellen i Nettverk-fanen når siden lastes inn på nytt.

• Viktige knapperDu kan stoppe eller gjenoppta logging (Ctrl+E eller Cmd+E), fjerne forespørsler (Ctrl+L eller Cmd+K) og aktivere Fortsett logging for å unngå å miste historikk mellom innlastinger.
• Skjermbilder under lastingFra Nettverksinnstillinger-ikonet øverst til høyre, aktiver Ta skjermbilder og last inn på nytt med Ctrl+F5. Du vil kunne se miniatyrbilder, zoome inn, filtrere etter tid og analysere hva brukeren så mens bytene ankom.
• Spill av XHRFinn en XHR-forespørsel, høyreklikk på den, og velg Spill av XHR på nytt (eller trykk R). Dette er nyttig for å gjenta forespørselen uten å berøre sidens brukergrensesnitt og se hvordan det påvirker med eller uten begrensning.

Deaktiver nettleserbufferen og endre lasteatferden

1. For å simulere det første kongelige besøket, merk av for Deaktiver hurtigbuffer øverst i Nettverk-fanen. På denne måten unngår du svar som sendes fra hurtigbufferen og får de fullstendige nettverksoverskriftene og -tidene.
2. Fra nettverksforhold (Flere nettverksbetingelser-knapp i Nettverk-fanen) Du kan også aktivere Deaktiver hurtigbuffer hvis du foretrekker å sentralisere den sammen med begrensning og brukeragent. Denne avmerkingsboksen er aktiv mens DevTools har fokus.
3. Manuell slettingI forespørselstabellen høyreklikker du og velger Tøm nettleserbuffer eller Tøm nettleserinformasjonskapsler når du trenger å rydde opp mellom testene.
4. Lagre forespørsler mellom opplastingerAktiver «Behold logg» for å opprettholde tidslinjen for forespørsler selv når du laster inn på nytt eller navigerer mellom ruter. Veldig nyttig for A/B-sammenligninger.

Begrens nettverk: Ingen tilkobling, 4G/3G-forhåndsinnstillinger og tilpassede profiler

1. Rask begrensning fra topplinjenÅpne rullegardinmenyen Begrensning og velg en forhåndsinnstilling, for eksempel Rask 4G, Sakte 4G, 3G eller Frakoblet. Nettverk-fanen viser et varselikon for å minne deg på at begrensningen er aktiv.
2. Frakoblet modusNyttig for testing av PWA-er med tjenestearbeidere. Velg frakoblet og sjekk hvordan appen reagerer, hva som blir bufret og hva som faller inn under strategier som bufret først eller nettverksbasert først.
3. Opprett din egen profilGå til Begrensning > Tilpasset > Legg til, eller bruk DevTools-konfigurasjon > Begrensning > Legg til profil-banen. Definer navn, nedlasting (kbps), opplasting, forsinkelse (ms), pakketap (%), kølengde og om du vil endre pakkerekkefølgen. Et ekstremt eksempel: 10 kbps nedlasting/opplasting, 10 ms, 1 % tap.
4. Bruk den tilpassede profilenLukk Innstillinger, gå tilbake til Nettverk-fanen, og velg profilen du opprettet under Begrensning > Tilpasset. Se på TTFB, overføringsstørrelse og nedlastingstider med vannet opp til halsen.

Begrensning også for WebSocket

Begrensning påvirker WebSocket-tilkoblinger, ikke bare HTTP. Angi den trege profilen din og åpne en side som bruker WebSocket. Koble til, send meldinger, og filtrer deretter etter socket ved hjelp av Socket Filter-knappen (WebSocket | WebTransport | DirectSocket) for å isolere tilkoblingen.

• Meldinger-fanenVelg socket-oppføringen og åpne fanen Meldinger. Du vil se innkommende og utgående meldinger, lengden i byte og klokkeslettet. Under begrensning vil du se effekten av forsinkelse og overbelastning på tidsstemplene.
• Typer rammer støttet i tabellen: fortsettelse, binær, lukk, ping og pong. Den er ideell for feilsøking av chatter, streaming data eller sanntidssynkronisering under nettverk oversatt til pedaler.
• RådetVeksle 10 kbps-profilen din med en treg 4G-profil for å sikre en minimalt mulig og rimelig opplevelse. Hvis appen allerede sliter med treg 4G, er det arbeid som må gjøres.

Tips for brukeragent og brukeragentklient

• Ugyldiggjør brukeragentenFjern merket for Bruk nettleserens standard under Nettverksforhold. Velg en forhåndsdefinert UA eller skriv inn din egen. Nyttig for testing av UA-baserte deteksjoner eller serveravhengige svar.
• UA-klienttipsI samme seksjon kan du justere merker og versjoner (f.eks. Edge 92), full nettleserversjon, plattform og versjon (f.eks. Windows 10.0), arkitektur (x86) og enhetsmodell. Dette lar deg simulere hvordan en backend reagerer ved hjelp av moderne hint.
• BekreftelseÅpner konsollen og evaluerer navigator.userAgentData for å bekrefte at hintene gjenspeiler de angitte verdiene.

Angi gyldige innholdskodinger

Edge lar deg definere hvilke innholdskodinger den godtar med alternativet Valider innholdskodinger. I praksis konfigurerer du støtte for innholdskodingsheadere for gzip, deflate og br. Servere sender vanligvis komprimerte svar, og headeren indikerer hvordan svaret ble kodet.

Hvorfor se på det? Fordi det direkte påvirker overføringsstørrelsen og -tiden på trege nettverk. Hvis serveren din ikke forhandler br eller gzip riktig, vil du se større størrelser i tidslinjen.

Søk, filtrer og sorter forespørsler som en proff

• Globalt søkÅpne Søk-fanen i nettverksverktøyet (Ctrl+F eller Cmd+F), skriv inn strengen, og aktiver samsvar med store og små bokstaver eller regulære uttrykk om nødvendig. Resultatene er uthevet både i tabellen og i overskrifter eller svar.
• Filtrer etter egenskaperBruk filterboksen for uttrykk som kombinerer mellomrom (de fungerer som OG). Eksempler: mime-type:image/png larger-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• tilgjengelige eiendommer: informasjonskapseldomene, informasjonskapselnavn, informasjonskapselsti, informasjonskapselverdi, domene, has-overrides, has-response-header, is:running (for WebSocket), større enn, metode, mime-type, mixed-content:all eller mixed-content:displayed, prioritet, ressurstype, response-header-set-cookie, skjema, set-cookie-domene, set-cookie-navn, set-cookie-verdi, statuskode, url.
• Filtrer etter typeAlle, Fetch/XHR, Doc, CSS, JS, Font, Image, Med-brytere ia, Manifest, WS, Wasm eller Annet. Du kan aktivere flere ved å holde Ctrl eller Cmd å komme til poenget.
• Flere hurtigfiltreskjuler data-URL-er (data:), skjuler utvidelses-URL-er (chrome-extension://), viser bare blokkerte forespørsler, fra tredjeparter, eller med informasjonskapsler med blokkerte svar (med direkte tilgang til Informasjonskapsler-fanen og Problemer-verktøyet).

Ordne og forstå tidenes kaskade

• Sorter etter kolonner– Klikk på tabelloverskriftene (Navn, Status, Type, Initiativtaker, Størrelse, Tidspunkt, Fullført av) for å sortere. Legg til kaskadekolonnen ved å høyreklikke på overskriften hvis du ikke ser den.
• Avansert kaskadeordreHøyreklikk på overskriften Foss og velg Starttid, Svartid, Sluttid, Total varighet eller Latens. Veksle mellom stigende/synkende ved å klikke på kolonnetittelen.
• Forhåndsvisning av oversiktHold musepekeren over en Cascade-forespørselslinje for å se et verktøytips med køer, DNS, tilkobling, SSL, proxy-forhandling, forespørselsinnsending, venting (TTFB) og nedlasting. Slå på store rader for å se den overførte og dekomprimerte størrelsen samtidig.
• Laster inn hendelserDOMContentLoaded og load vises som vertikale linjer i Oversikt-, Kaskade- og Sammendrag-panelene. De er blå for DOMContentLoaded og røde for load. Dette hjelper deg med å se hvor de viktigste hendelsene dine faller i fossen.

Grupper etter iframes og inspiser initiatorer og avhengigheter

• Grupper etter rammerAktiver Grupper etter ramme i nettverksinnstillingene for å skjule/utvide iframes med underforespørslene. Dette er lurt når en side setter inn mange rammer.
• Initiativtakere og avhengigheterHold Shift-tasten nede og hold musepekeren over en forespørsel. Du vil se personen som startet den i grønt og de pårørende i rødt. I kronologisk rekkefølge kan du følge kjeden av initiativtakere bakover.

Fjern alle forespørsler: forhåndsvisning, svar, overskrifter og nyttelast

• forhåndsvisningVelg en forespørsel og åpne Forhåndsvisning-fanen, ideell for gjengivelsesbare bilder eller objekter.
• Svar: Svar-fanen for å se brødteksten når den ankommer. For JSON kan du kopiere formatet fra Forhåndsvisning ved å høyreklikke på den første linjen og velge Kopier verdi.
• Overskrifter– Fanen Overskrifter med Generelt, Tidlige tips (hvis aktuelt), Svar og Forespørsel. Velg Ubehandlet for å se den faktiske mottaksrekkefølgen. Hvis det vises foreløpige overskrifter, kan dette skyldes en lokal hurtigbuffer, en ugyldig ressurs eller sikkerhetsbegrensninger. Deaktivering av hurtigbufferen og innlasting på nytt returnerer vanligvis de fullstendige overskriftene.
• NyttelastLast inn-fanen for spørrestrengparametere og skjemadata. Bruk Vis kilde for å se den opprinnelige representasjonen og veksle mellom URL-kodet og URL-dekodet når du tester parametere med spesialtegn.

Informasjonskapsler, størrelse og oppfyllelsesverktøy

• Informasjonskapsler-fanenViser informasjonskapslene som ble sendt med forespørselen, med detaljerte felt. Nyttig for å se gjennom SameSite, Secure, domene og utløpsdatoer. I nettverksverktøyet ser du varsler når informasjonskapsler blokkeres av retningslinjer eller nettleserinnstillinger.
• Overført og ukomprimert størrelseAktiver store forespørselsrader slik at Størrelse-kolonnen viser den overførte størrelsen i store trinn og den dekomprimerte størrelsen i små trinn. Dette bidrar til å vurdere den reelle effekten av komprimering på begrensede nettverk.
• Oppfylt avDenne kolonnen angir om et svar ble levert fra HTTP-hurtigbufferen eller en Service Worker. Ved førstegangs testkjøringer er det lurt å deaktivere hurtigbufferen for å unngå forfalskede timings.

Analyser WebSocket- og hendelsesstrømmer

• WebSocketMed socket-filteret aktivt, velg tilkoblingen og åpne Meldinger-fanen. Du vil se opptil de siste 100 meldingene, inkludert retning (opp/ned), tidspunkt og lengde. Under begrensning forteller tidspunktene deg nettverkets historikk.
• EventSource og strømmingNår du utløser en SSE, vil du se en SSE-type forespørsel og en EventStream-fane med meldinger som ankommer med en fast hastighet. Du kan filtrere med et regulært uttrykk og fjerne meldingen med Fjern-knappen.

Eksport og import: Rensede HAR-er eller med sensitive data

• Eksporter alt som HARFra handlingslinjen eller ved å høyreklikke på en hvilken som helst forespørsel, velg Eksporter HAR (sanert). Dette JSON-formatet ekskluderer sensitive felt som Cookie, Set-Cookie og Authorization som standard.
• Inkluder hemmeligheter hvis du trenger detI Innstillinger for utviklerverktøy > Valg > Nettverk velger du Tillat generering av HAR-er med sensitive data. Derfra kan du også eksportere varianten med sensitive data.
• Importer en HARDra en HAR-fil inn i nettverksverktøytabellen, eller bruk Importer HAR-fil. Edge viser forespørslene og initiativtakerne deres, og lar deg analysere dem som om du hadde fanget dem opp live.
• Kopier til utklippstavlenMed høyreklikk på en forespørsel kan du kopiere en URL, som cURL (cmd eller bash), som PowerShell, for eksempel henting (nettleser eller Node.js), kopier responsen eller stakksporingen (hvis initiert av JavaScript). Det finnes også alternativer for å kopiere alle eller filtrerte responser i samme formater, og å kopiere alt som sanert HAR eller med data.

Tellere og dashbord: En oversikt

• Sammendrag nederst– Sammendragspanelet viser det totale antallet forespørsler og den totale nedlastingsstørrelsen siden du åpnet DevTools. Husk at nedlastinger som skjedde før du åpnet DevTools ikke telles.
• Generell informasjonDu kan skjule den hvis den er i veien ved å fjerne merket for Vis oversikt. Jeg elsker den for å se aktivitetstopper og plasseringen av DOMContentLoaded og load på tidslinjen.
• Skjul filterpaneletHvis du vil ha mer plass til tabellen din, kan du skjule filterpanelet med Filter-knappen. Aktiver det på nytt når du trenger det igjen.

Praktiske tilfeller med begrensninger: fra 4G til 10 kbps

• Minimum rimelig testBruk treg 4G og last inn på nytt. Vær oppmerksom på TTFB og kaskadetider. Hvis hovedvisualen tar evigheter, undersøk kritiske fonter, CSS og JS og aktiver br/gzip-komprimering på serveren.
• Ekstrem testBruk profilen din for 10 kbps, 10 ms, 1 % tap og omorganisering. Ja, det er et helvete, men det avslører skjulte avhengigheter, uvennlige tidsavbrudd og ressurser som aldri burde blokkeres.
• Offline PWAAktiverer henting uten nett og validerer ruter, mellomlagringsstrategier og reservesider lagret av Service Worker. Sjekk hvordan mislykkede henteforespørsler oppfører seg og om brukeren er informert riktig.
• WebSocket med latensMed Sakte-profilen kan du sende og motta meldinger og sjekke Meldinger-fanen. Juster ping/pong-intervaller, nye forsøk og eksponentielle gjenoppkoblinger om nødvendig.

Ekstra tips: komplementære verktøy

• WebPageTestEn gratis tjeneste med åpen kildekode for simulering av typiske forhold (56K, 3G osv.) ved å velge en plassering og nettleser. Den muliggjør grunnleggende og avansert testing med video, innholdsblokkering og mer.
• HeadSpin: lar deg teste i mobile nettverk Referansetester i den virkelige verden. Hvis du trenger fullstendig realisme og måling på tvers av over 1.000 nettverk, er dette et kraftig referansepunkt.
• SpeedCurve: emulerer forhold gjennom dagen for å vurdere variasjoner på grunn av trafikkork. Veldig nyttig for å se hvordan målinger endres i rushtiden.
• Nettverkskoblingsbehandler på macOS: en del av Xcode, ideell for simulering av forsinkelser, tap eller feil på systemnivå i Apple-miljøer.

Hurtigreferanseguide til tidsfaser

• Faser du vil se i Tidspunkt-fanen: Kø (på grunn av prioritet eller grensen på 6 tilkoblinger i HTTP/1.0/1.1), Stoppet (på grunn av kø), DNS-oppslag, tilkobling (TCP og SSL), proxy-forhandling, forespørsel sendt, forberede og forespørre til ServiceWorker, venter (TTFB) og innholdsnedlasting. I HTTP/2 ser du også motta push og lese push, hvis aktuelt.
• Praktisk tolkningLange køer oppmuntrer til prioritering av ressurser og reduksjon av antall tilkoblinger, høye TTFB-kall for optimalisering av backend og avstand, og descargas evig for å muliggjøre komprimering og partisjonering av det som virkelig er kritisk.

Små grensesnittjusteringer som utgjør en forskjell

• Store forespørselskøerFra Nettverksinnstillinger kan du aktivere disse for å se raskt hva som er overført kontra hva som er dekomprimert, og de første og siste prioriteringene. Dette gir klarhet når listen er lang.
• Tilpassede kolonnerHøyreklikk på tabelloverskriften for å skjule/vise kolonner og legge til egendefinerte kolonner basert på svaroverskrifter. Du kan til og med administrere overskriftskolonner fra et eget vindu.

Hvis du bygger en testflyt med deaktivert mellomlagring, realistisk begrensning, filtre etter type og en gjennomgang av TTFB, foss, nyttelaster og HARDu vil få et nøyaktig bilde av hvordan nettstedet ditt presterer i vanskelige situasjoner, og du vil også vite nøyaktig hva du skal gjøre for å holde det i gang selv når nettverket halter.

Relatert artikkel:

Komplett veiledning for å utføre en nettverkshastighetstest på riktig måte

Isaac

Lidenskapelig forfatter om verden av bytes og teknologi generelt. Jeg elsker å dele kunnskapen min gjennom å skrive, og det er det jeg skal gjøre i denne bloggen, vise deg alle de mest interessante tingene om dingser, programvare, maskinvare, teknologiske trender og mer. Målet mitt er å hjelpe deg med å navigere i den digitale verden på en enkel og underholdende måte.