Kuinka simuloida hitaita verkkoyhteyksiä Edgessä ja analysoida kaikkea

Testaa verkkosivustoa samalla tavalla kuin käyttäjä, jolla on huono internetyhteys, tekisi On tärkeää varmistaa, että kokemus ei katkea, vaikka verkko olisi tiukka. Microsoft Edge Käytössäsi on natiiveja työkaluja korkean viiveen, pienen kaistanleveyden, pakettien katoamisen ja jopa offline-tilanteiden emulointiin. Kaikki tämä ilman ylimääräisten asennusten tekemistä, suoraan DevToolsista.

Tässä käytännön oppaassa näytän, kuinka simuloida hitaita verkkoja Edgessä Verkkoehdot-työkalun ja Verkko-välilehden avulla sekä kaikella, mitä tarvitset pyyntöjen tarkastamiseen, suodattamiseen, lajitteluun ja vientiin. Näet myös, miten voit poistaa välimuistin käytöstä, väärentää käyttäjäagenttia, työskennellä WebSocketin kanssa, luoda mukautettuja rajoitusprofiileja ja tuottaa puhtaita HAR-tiedostoja tai arkaluonteisia tietoja sisältäviä tiedostoja jättämättä mitään jäljelle.

Mitä hitaan verkon simulointi Edgessä tarkoittaa?

Simuloi hidasta verkkoa Tämä tarkoittaa selaimen yhteyden rajoittamista latauksen, lähetyksen, viiveen, hävikin ja pakettien järjestyksen hallitsemiseksi. Edge integroi tämän DevToolsiin sekä pääverkkotyökalurivin että Pikakatselu-paneelin Verkko-olosuhteet -kohdan kautta.

Edgen avulla voit myös poistaa selaimen välimuistin käytöstä., muuta käyttäjäagenttimerkkijonoa ja määritä asiakkaan hyväksymät sisällön koodaukset (gzip, deflate, br) replikoidaksesi tosielämän ensimmäisen käynnin tai yhteensopivuusskenaarioita.

Miksi tehdä se? Koska yhteydet vaihtelevat suuresti: kodin valokuitu ei ole sama asia kuin julkinen Wi-Fi, rajoitettu 4G tai ruuhkainen verkko. Myös latenssi (TTFB) ja neuvottelu välityspalvelimien ja Service Worker -työntekijöiden kanssa vaikuttavat asiaan. Jäljittelemällä erilaisia ​​tilanteita tiedät, mihin verkkosivustoasi kannattaa säätää.

Pikahuomautus laajuusalueesta- DevToolsin rajoittaminen vaikuttaa selainliikenteeseen kyseisen istunnon aikana. Jos sinun on rajoitettava Windows Kokonaisuutena voit käyttää Edgessä erittäin hitaita profiileja verkon validointiin tai järjestelmän/kolmannen osapuolen työkaluja, jotka eivät kuulu tämän oppaan piiriin.

Aloittaminen: Avaa DevTools ja kirjaa verkkotoiminta lokiin

Avaa DevTools napsauttamalla hiiren kakkospainikkeella > Tarkastele millä tahansa testisivulla. Siirry Verkko-työkaluun. Kun DevTools on auki, kaikki pyynnöt kirjataan Verkko-välilehden taulukkoon, kun sivu ladataan uudelleen.

• Olennaiset painikkeetVoit pysäyttää tai jatkaa lokin kirjaamista (Ctrl+E tai Cmd+E), tyhjentää pyyntöjä (Ctrl+L tai Cmd+K) ja ottaa käyttöön Säilytä loki -toiminnon, jotta historia ei katoa uudelleenlatausten välillä.
• Kuvakaappauksia latauksen aikanaOta käyttöön Verkkoasetukset-kuvakkeesta oikeassa yläkulmassa Ota kuvakaappauksia ja lataa sivu uudelleen painamalla Ctrl+F5. Voit tarkastella pikkukuvia, lähentää, suodattaa ajan mukaan ja analysoida, mitä käyttäjä näki tavujen saapuessa.
• Pelaa XHR:ääEtsi XHR-pyyntö, napsauta sitä hiiren kakkospainikkeella ja valitse Toista XHR (tai paina R). Tästä on hyötyä pyynnön toistamiseen koskematta sivun käyttöliittymään ja sen vaikutusten näkemiseen rajoituksella tai ilman.

Poista selaimen välimuisti käytöstä ja muuta latauskäyttäytymistä

1. Simuloidakseen ensimmäistä kuninkaallista vierailua, valitse Poista välimuisti käytöstä -vaihtoehto Verkko-välilehden yläreunasta. Tällä tavoin vältät välimuistista näytettävien vastausten näyttämisen ja saat täydelliset verkon otsikot ja ajat.
2. Verkko-olosuhteista (Lisää verkkoehtoja -painike Verkko-välilehdellä) Voit myös ottaa käyttöön Välimuistin poistaminen käytöstä -asetuksen, jos haluat keskittää sen hallintaan rajoitusten ja käyttäjäagenttien kanssa. Tämä valintaruutu on käytössä, kun DevTools on aktiivinen.
3. Manuaalinen tyhjennysNapsauta pyyntötaulukossa hiiren kakkospainikkeella ja valitse Tyhjennä selaimen välimuisti tai Tyhjennä selaimen evästeet, kun haluat siivota testien välillä.
4. Tallenna pyynnöt lähetysten välillä: Ota käyttöön Säilytä loki -toiminto, jos haluat säilyttää pyyntöjen aikajanan myös silloin, kun lataat uudelleen tai navigoit reittien välillä. Erittäin hyödyllinen A/B-vertailuissa.

Rajallinen verkko: Ei yhteyttä, 4G/3G-esiasetukset ja mukautetut profiilit

1. Nopea rajoitus yläpalkista: Avaa Rajoitus-pudotusvalikko ja valitse esiasetus, kuten Nopea 4G, Hidas 4G, 3G tai Offline. Verkko-välilehdellä näkyy varoituskuvake, joka muistuttaa sinua rajoituksen aktiivisuudesta.
2. Offline-tilaHyödyllinen PWA-sovellusten testaamiseen Service Workersin avulla. Valitse offline-tila ja tarkista, miten sovellus reagoi, mitä välimuistiin tallennetaan ja mitkä vaihtoehdot kuuluvat strategioihin, kuten välimuisti ensin tai verkko ensin.
3. Luo oma profiilisiValitse Kaasu > Mukautettu > Lisää tai käytä DevTools-asetuksia > Kaasu > Lisää profiilipolku. Määritä nimi, lataus (kbps), lähetysnopeus, latenssi (ms), pakettihävikki (%), jonon pituus ja haluatko pakettien uudelleenjärjestämisen. Äärimmäinen esimerkki: 10 kbps lataus-/lähetysnopeus, 10 ms, 1 %:n hävikki.
4. Käytä mukautettua profiiliaSulje Asetukset, palaa Verkko-välilehdelle ja valitse profiili, jonka loit kohdassa Rajoitus > Mukautettu. Katso TTFB:tä, siirtokokoa ja latausaikoja veden ollessa niskaasi myöten.

Rajoitus myös WebSocketille

Kaasurajoitus vaikuttaa WebSocket-yhteyksiin, ei vain HTTP:tä. Aseta hidas profiilisi ja avaa sivu, joka käyttää WebSocketia. Yhdistä, lähetä viestejä ja suodata sitten soketin mukaan käyttämällä Socket Filter -painiketta (WebSocket | WebTransport | DirectSocket) yhteyden eristämiseksi.

• Viestit-välilehtiValitse sokettimerkintä ja avaa Viestit-välilehti. Näet saapuvat ja lähtevät viestit, niiden pituuden tavuina ja ajan. Rajoittamisen alla näet viiveen ja ruuhkan vaikutuksen aikaleimoihin.
• Kehysten tyypit taulukossa tuetut: jatkaminen, binääri, sulkeminen, ping ja pong. Se on ihanteellinen keskustelujen virheenkorjaukseen, streaming dataa tai reaaliaikaista synkronointia verkoissa, jotka käännetään polkimiksi.
• neuvostoVaihda 10 kbps:n profiiliasi hitaaseen 4G-profiiliin varmistaaksesi vähintäänkin kelvollisen ja kohtuullisen käyttökokemuksen. Jos sovellus jo kamppailee hitaan 4G-yhteyden kanssa, on tehtävä vielä työtä.

Käyttäjäagentin ja käyttäjäagentin asiakasohjelman vihjeet

• Käyttäjäagentin mitätöintiPoista Verkko-olosuhteet -kohdasta valinta kohdasta Käytä selaimen oletusarvoa. Valitse valmiiksi määritetty käyttäjätunnus (UA) tai anna omasi. Hyödyllinen UA-pohjaisten tunnistusten tai palvelimesta riippuvien vastausten testaamiseen.
• UA-asiakasvinkkejäSamassa osiossa voit säätää tuotemerkkejä ja versioita (esim. Edge 92), koko selaimen versiota, alustaa ja versiota (esim. Windows 10.0), arkkitehtuuria (x86) ja laitemallia. Näin voit simuloida, miten taustajärjestelmä reagoi nykyaikaisten vihjeiden avulla.
• Todentaminen: Avaa konsolin ja arvioi navigator.userAgentData-arvon varmistaakseen, että vihjeet vastaavat asetettuja arvoja.

Aseta kelvolliset sisällön koodaukset

Edgen avulla voit määrittää, mitkä sisällön koodaukset se hyväksyy Validate Content-Encodings -asetuksella. Käytännössä määrität sisällönkoodauksen otsikkotuen gzip-, deflate- ja br-tiedostoille. Palvelimet lähettävät yleensä pakattuja vastauksia, ja otsikko osoittaa, miten vastaus on koodattu.

Miksi sitä katsoa? Koska se vaikuttaa suoraan siirtokokoon ja -aikoihin hitaissa verkoissa. Jos palvelimesi ei neuvottele br:ää tai gzipia oikein, näet aikajanalla suurempia kokoja.

Hae, suodata ja lajittele pyyntöjä kuin ammattilainen

• Globaali hakuAvaa Verkko-työkalun Etsi-välilehti (Ctrl+F tai Cmd+F), kirjoita merkkijono ja ota tarvittaessa käyttöön kirjainkoon huomioiva haku tai säännölliset lausekkeet. Tulokset korostetaan sekä taulukossa että otsikoissa tai vastauksissa.
• Suodattimet ominaisuuksien mukaan: Käytä Suodatin-ruutua lausekkeille, jotka yhdistävät välilyöntejä (ne toimivat JA-operaattorina). Esimerkkejä: mime-type:image/png larger-than:1K, domain:*.com, has-response-header:cache-control, status-code:404, scheme:https, method:POST, url:/api/.
• Käytettävissä olevat kiinteistöt: evästeen-verkkotunnus, evästeen-nimi, evästeen-polku, evästeen-arvo, verkkotunnus, has-overrides, has-response-header, is:running (WebSocketille), suurempi kuin, menetelmä, mime-tyyppi, mixed-content:all tai mixed-content:displayed, prioriteetti, resurssin-tyyppi, response-header-set-cookie, järjestelmä, set-cookie-domain, set-cookie-name, set-cookie-value, status-koodi, url.
• Suodattimet tyypin mukaanKaikki, Fetch/XHR, Doc, CSS, JS, Fontti, Kuva, Med-kytkimet ia, Manifest, WS, Wasm tai Muu. Voit aktivoida useita pitämällä Ctrl- tai Cmd päästäkseni asiaan.
• Lisää pikasuodattimia: piilottaa data-URL-osoitteet (data:), piilottaa laajennus-URL-osoitteet (chrome-extension://), näyttää vain estetyt pyynnöt, kolmansilta osapuolilta tulevat pyynnöt tai estetyt vastausevästeet (suora pääsy Evästeet-välilehteen ja Ongelmat-työkaluun).

Järjestä ja ymmärrä aikojen ketjureaktio

• Järjestä sarakkeiden mukaan- Lajittele napsauttamalla taulukon otsikoita (Nimi, Tila, Tyyppi, Aloittaja, Koko, Aika, Valmistuja). Lisää Cascade-sarake napsauttamalla otsikkoa hiiren kakkospainikkeella, jos et näe sitä.
• Edistynyt kaskadijärjestysNapsauta hiiren kakkospainikkeella vesiputous-otsikkoa ja valitse Aloitusaika, Vastausaika, Päättymisaika, Kokonaiskesto tai Latenssi. Vaihda nousevaa/laskevaa järjestyslukua napsauttamalla sarakkeen otsikkoa.
• Erittelyn esikatseluVie hiiri Cascade-pyyntöpalkin päälle nähdäksesi työkaluvihjeen, jossa on tietoja jonoista, DNS:stä, yhteydestä, SSL:stä, välityspalvelinneuvottelusta, pyynnön lähettämisestä, odotuksesta (TTFB) ja latauksesta. Ota suuret rivit käyttöön nähdäksesi siirretyn ja puretun koon kerralla.
• Ladataan tapahtumiaDOMContentLoaded ja load näkyvät pystysuorina viivoina Yleiskatsaus-, Kaskadi- ja Yhteenveto-paneeleissa. Ne ovat sinisiä DOMContentLoaded-tapahtumalle ja punaisia ​​load-tapahtumalle. Tämä auttaa sinua näkemään, mihin tärkeimmät tapahtumasi sijoittuvat vesiputouskaaviossa.

Ryhmittele iframe-kehysten mukaan ja tarkista aloittajat ja riippuvuudet

• Ryhmittele kehysten mukaan: Ota käyttöön Ryhmittely kehyksen mukaan -toiminto verkkoasetuksissa, jos haluat kutistaa/laajentaa iframe-kehykset ja niiden alipyynnöt. Tämä on erittäin hyödyllistä, kun sivulle lisätään paljon kehyksiä.
• Aloittajat ja riippuvuudetPidä Shift-näppäintä painettuna ja vie hiiri pyynnön päälle. Näet aloittajan vihreänä ja huollettavat punaisena. Voit seurata aloittajien ketjua taaksepäin aikajärjestyksessä.

Poista jokainen pyyntö: esikatselu, vastaus, otsikot ja hyötykuorma

• esikatseluValitse pyyntö ja avaa Esikatselu-välilehti, joka sopii erinomaisesti renderöitävissä oleville kuville tai objekteille.
• vastausVastaus-välilehti, jos haluat nähdä saapuvan tekstin. JSON-tiedostojen tapauksessa voit kopioida muodon Esikatselusta napsauttamalla ensimmäistä riviä hiiren kakkospainikkeella ja valitsemalla Kopioi arvo.
• Otsikot- Ylätunnisteet-välilehti, jossa on Yleistä, Ennakkovihjeet (jos sovellettavissa), Vastaus ja Pyyntö. Valitse Käsittelemätön nähdäksesi todellisen vastaanottojärjestyksen. Jos väliaikaiset ylätunnisteet tulevat näkyviin, se voi johtua paikallisesta välimuistista, virheellisestä resurssista tai suojausrajoituksista. Välimuistin poistaminen käytöstä ja uudelleenlataus palauttaa yleensä täydelliset ylätunnisteet.
• Hyötykuorma: Lataa-välilehti kyselymerkkijonojen parametreille ja lomaketiedoille. Käytä Näytä lähdekoodi -toimintoa nähdäksesi alkuperäisen esityksen ja vaihtaaksesi URL-koodatun ja URL-dekoodatun välillä testatessasi parametreja, joissa on erikoismerkkejä.

Evästeet, koko ja täyttäjät

• Evästeet-välilehtiNäyttää pyynnön mukana lähetetyt evästeet yksityiskohtaisine kenttineen. Hyödyllinen SameSite-, Secure-, verkkotunnus- ja vanhenemispäivien tarkasteluun. Verkko-työkalussa näet ilmoituksia, kun käytännöt tai selainasetukset estävät evästeet.
• Siirretty ja pakkaamaton kokoOta käyttöön suuret pyyntörivit, jotta Koko-sarake näyttää siirretyn koon suurina lisäyksinä ja puretun koon pieninä lisäyksinä. Tämä auttaa arvioimaan pakkauksen todellista vaikutusta rajoitetuissa verkoissa.
• Täyttäjä: Tämä sarake osoittaa, lähetettiinkö vastaus HTTP-välimuistista vai Service Workerista. Ensimmäisillä testiajoilla on hyvä poistaa välimuisti käytöstä virheellisten ajoitusten välttämiseksi.

Analysoi WebSocket- ja tapahtumavirtoja

• WebSocketKun sokettisuodatin on aktiivinen, valitse yhteys ja avaa Viestit-välilehti. Näet jopa 100 viimeisintä viestiä, mukaan lukien niiden suunnan (ylös/alas), ajan ja pituuden. Rajoituksessa ajat kertovat verkon historian.
• EventSource ja suoratoistoKun käynnistät SSE:n, näet SSE-tyyppisen pyynnön ja EventStream-välilehden, jossa saapuu viestejä kiinteällä tahdilla. Voit suodattaa säännöllisen lausekkeen avulla ja tyhjentää viestin Tyhjennä-painikkeella.

Vienti ja tuonti: Puhdistettu HAR-tiedosto tai arkaluonteisia tietoja sisältävä tiedosto

• Vie kaikki HAR-muodossaValitse toimintopalkista tai napsauttamalla hiiren kakkospainikkeella mitä tahansa pyyntöä ja valitse Vie HAR (puhdistettu). Tämä JSON-muoto jättää oletusarvoisesti pois arkaluontoiset kentät, kuten Cookie, Set-Cookie ja Authorization.
• Sisällytä salaisuuksia, jos tarvitsetValitse DevTools-asetuksissa > Asetukset > Verkko ja valitse Salli HAR-tiedostojen luominen arkaluonteisilla tiedoilla. Sieltä voit myös viedä arkaluonteiset tiedot sisältävän variantin.
• HAR-tiedoston tuontiVedä HAR-tiedosto verkkotyökalutaulukkoon tai käytä Tuo HAR-tiedosto -toimintoa. Edge näyttää pyynnöt ja niiden aloittajat, ja voit analysoida niitä aivan kuin olisit tallentanut ne reaaliajassa.
• Kopioi leikepöydälleNapsauta hiiren kakkospainikkeella pyyntöä ja kopioi URL-osoite, kuten cURL (cmd tai bash), kuten PowerShell, kuten fetch (selain tai Node.js), kopioi vastaus tai pinon jäljitys (jos JavaScript käynnisti sen). Voit myös kopioida kaikki tai suodatetut vastaukset samoissa muodoissa ja kopioida kaiken puhdistettuna HAR-tiedostona tai datan kanssa.

Laskurit ja kojelaudat: yleiskatsaus

• Yhteenveto alareunassa- Yhteenveto-paneeli näyttää DevToolsin avaamisen jälkeen tehtyjen pyyntöjen kokonaismäärän ja latausten kokonaiskoon. Muista, että ennen DevToolsin avaamista tapahtuneita latauksia ei lasketa mukaan.
• yleiskatsausVoit piilottaa sen, jos se on tiellä, poistamalla valinnan kohdasta Näytä yleiskatsaus. Pidän siitä, että se näyttää aktiivisuuspiikit ja DOMContentLoadedin sijainnin ja latauksen aikajanalla.
• Piilota suodatinpaneeliJos haluat taulukolle lisää tilaa, kutista suodatinpaneeli Suodata-painikkeella. Aktivoi se uudelleen, kun tarvitset sitä uudelleen.

Käytännön tapauksia rajoituksin: 4G:stä 10 kbps:ään

• Kohtuullinen vähimmäistestiKäytä hidasta 4G-yhteyttä ja lataa uudelleen. Tarkkaile TTFB- ja CSS-aikoja. Jos päävisualisoinnin suorittaminen kestää ikuisuuden, tutki kriittiset fontit, CSS ja JS ja ota käyttöön br/gzip-pakkaus palvelimella.
• Äärimmäinen testiKäytä 10 kbps:n, 10 ms:n, 1 %:n häviön ja uudelleenjärjestelyprofiiliasi. Kyllä, se on helvettiä, mutta se paljastaa piilotettuja riippuvuuksia, epäystävällisiä aikakatkaisuja ja resursseja, joiden ei koskaan pitäisi estää.
• Offline-PWA: Mahdollistaa offline-noudon ja validoi Service Workerin tallentamat reitit, välimuististrategiat ja varasivut. Tarkistaa, miten epäonnistuneet noutopyynnöt toimivat ja saako käyttäjä tiedon oikein.
• WebSocket latenssillaLähetä ja vastaanota viestejä Hidas-profiililla ja tarkista Viestit-välilehti. Säädä ping/pong-välejä, uudelleenyrityksiä ja eksponentiaalisia uudelleenyhteyksiä tarvittaessa.

Lisävinkkejä: täydentävät työkalut

• WebPageTest: Ilmainen, avoimen lähdekoodin palvelu tyypillisten olosuhteiden (56K, 3G jne.) simulointiin valitsemalla sijainnin ja selaimen. Se mahdollistaa perus- ja edistyneet testit videon, sisällön estämisen ja muiden ominaisuuksien avulla.
• Päätä huimaa: voit testata matkapuhelinverkot reaalimaailman vertailuarvoja. Jos tarvitset täydellistä realismia ja mittausta yli 1.000 XNUMX verkossa, tämä on tehokas vertailuarvo.
• SpeedCurve: jäljittelee olosuhteita päivän mittaan ruuhkien aiheuttamien vaihteluiden arvioimiseksi. Erittäin hyödyllinen, kun halutaan nähdä, miten mittarit muuttuvat ruuhka-aikoina.
• Verkkolinkkien säätö macOS:ssä: osa Xcodea, ihanteellinen latenssien, häviöiden tai vikojen simulointiin järjestelmätasolla Apple-ympäristöissä.

Aikavaiheiden pikaopas

• Vaiheet, jotka näet Ajoitus-välilehdelläJonottaminen (prioriteetin tai HTTP/6/1.0:n 1.1 yhteyden rajoituksen vuoksi), Pysähdys (jonon vuoksi), DNS-haku, Yhteys (TCP ja SSL), Välityspalvelinneuvottelu, Pyyntö lähetetty, Valmistelu ja pyyntö ServiceWorkerille, Odotus (TTFB) ja Sisällön lataus. HTTP/2:ssa näet myös Vastaanota push-viesti ja Lue push -viestit, jos sovellettavissa.
• Käytännön tulkintaPitkät jonot kannustavat resurssien priorisointiin ja yhteyksien määrän vähentämiseen, korkeat TTFB-pyynnöt taustajärjestelmän ja etäisyyden optimointiin ja descargas ikuinen mahdollistaakseen pakkaamisen ja osioinnin todella kriittisille asioille.

Pieniä käyttöliittymän muutoksia, jotka tekevät eron

• Suuret pyyntöjonotOta nämä käyttöön Verkkoasetukset-kohdasta nähdäksesi yhdellä silmäyksellä, mitä on siirretty ja mitä on purettu, sekä alkuperäiset ja lopulliset prioriteetit. Tämä selkeyttää tilannetta, kun lista on pitkä.
• Mukautetut sarakkeetNapsauta taulukon otsikkoa hiiren kakkospainikkeella piilottaaksesi/näyttääksesi sarakkeet ja lisätäksesi mukautettuja sarakkeita vastausotsikoiden perusteella. Voit jopa hallita otsikkosarakkeita erillisestä ikkunasta.

Jos rakennat testityönkulun, jossa välimuisti on poistettu käytöstä, käytössä on realistinen rajoitus, tyypin mukaiset suodattimet ja TTFB:n, vesiputouksen, hyötykuormien ja HAR:n tarkasteluSaat todellisen tilannekuvan siitä, miten verkkosivustosi toimii vaikeissa tilanteissa, ja tiedät myös tarkalleen, mitä tehdä pitääksesi sen toiminnassa, vaikka verkko olisi pätkimässä.