Võrgu Monitor jäädvustab ja kuvab iga võrgupäringu, mille praegune leht teeb — XHR/Fetch API kõned, skriptide laadimine, stiilitabelite pärimine, piltide allalaadimine, fondifailid ja rohkem. Näe URL-e, HTTP meetodeid, olekukoode, vastuste suurusi ja ajastust — kõik reaalajas uuenevas ujuvas paneelil ilma brauseri DevToolsi avamata.
Chrome DevToolsi Võrgu vahekaart on võimas, kuid raske — see võtab olulist ekraaniruumi, lähtestatakse navigeerimisel ja nõuab lehelt eemale lülitumist. Võrgu Monitor pakub olulisi võrgu jälgimise funktsioone kergekajalises ujuvas paneelil, mis asub lehe kohal. See peatab XHR ja Fetch päringud ning jälgib ressursside laadimist Performance API kaudu, näidates iga võrgupäringut selle toimumisel. Iga päring näitab URL-i, HTTP meetodit (GET, POST, PUT, DELETE), olekukoodi (värvikoodiga: roheline 2xx jaoks, kollane 3xx jaoks, punane 4xx/5xx jaoks), vastuse suurust baitides ja kestust millisekundites. Klõpsa mis tahes päringut, et laiendada selle üksikasju: päringu päised, vastuse päised, päringu kasulikud andmed (POST/PUT jaoks), vastuse sisu eelvaade ja ajastuse jaotus. Filtreeri tüübi järgi (XHR/Fetch, JS, CSS, Pildid, Fondid), et keskenduda konkreetsele liiklusele.
Iga võrgupäring ilmub paneelil selle toimumisel — lehe laadimine, API kõned, laisk laadimine ressursid ja taustapäringud. Voog uueneb reaalajas ilma käsitsi värskendamiseta.
Klõpsa mis tahes päringut, et näha täielikke üksikasju: päringu URL, meetod, päised, kasulikud andmed (POST/PUT jaoks), vastuse päised, vastuse sisu eelvaade (JSON autoformaadiga), olekukood, suurus ja ajastuse jaotus.
Filtreeri päringuid tüübi järgi: XHR/Fetch (API kõned), JS (skriptid), CSS (stiilitabelid), IMG (pildid), Font (veebifondid) või Kõik. Erista API liiklus ressursside laadimisest, et keskenduda olulisele.
Olekukoodid on koheseks äratundmiseks värvikoodiga: roheline 2xx jaoks (edu), kollane 3xx jaoks (ümbersuunamised), punane 4xx jaoks (kliendivead) ja 5xx jaoks (serverivead). Ebaõnnestunud päringud on kohe nähtavad.
Iga päring näitab vastuse suurust (KB-des) ja kogukestust (millisekundites). Tuvasta aeglased API kõned, ülesuurused ressursid ja mittevajalikud päringud, mis mõjutavad lehe jõudlust.
Kokkuvõtte riba näitab kõikide jäädvustatud päringute koguarvu ja kombineeritud suurust. Filtreeri kokkuvõtet, et näha kogusummasid tüübi kohta — kui palju ribalaiust kulub skriptidele vs piltidele vs API kõnetele.
Jälgi XHR/Fetch päringuid, et kontrollida, kas sinu frontend kutsub õigeid API lõpp-punkte õigete parameetritega. Klõpsa päringu kasulike andmete ja vastuse sisu inspekteerimiseks — tüüpide mittevastavad andmete formaadid kohe.
Punased 404 ja 500 kirjed tõstavad koheselt esile katkised ressursid või ebaõnnestuvad API kõned. Vaata, millised URL-id ebaõnnestuvad, millal need ebaõnnestuvad ja millist veaste server tagastab.
Sorteeri kestuse järgi, et leida aeglasemad päringud. Sorteeri suuruse järgi, et leida suuremad ressursid. Kokkuvõtte kogusummad näitavad täielikku ribalaiuse pilti — kas leht teeb liiga palju päringuid või laadib alla liiga palju andmeid?
Vaata, milliseid võrgupäringuid leht teeb taustal — analüütika ping-id, südamepekse kõned, küsitluspäringud, laisk laadimine ressursid. Mõista täielikku võrguaktiivsust, mis ulatub kaugemale kasutajale nähtavast.
Filtreeri päringuid ja kontrolli, milliste domeenidega võetakse ühendust. Tuvasta kolmanda osapoole skriptid, mis teevad ootamatuid võrgukõnesid — jälgimispikslid, andmete kogumine või välised API kõned, millest sa ei teadnud.
Ava DevSuite Pro ujuv dokk ja klõpsa Võrgu Monitoru ikoonil. Paneel avaneb ja alustab koheselt võrgupäringute jäädvustamist.
Kasuta lehte normaalselt. Iga võrgupäring ilmub voos selle toimumisel — API kõned, ressursside laadimine ja taustapäringud jäädvustatakse kõik.
Klõpsa tüübifiltrid (XHR, JS, CSS, IMG, Font), et vaadet kitsendada. Näita ainult API kõnesid andmete hankimise silumiseks või ainult pilte vara laadimise kontrollimiseks.
Klõpsa mis tahes päringu rida, et laiendada selle üksikasju: URL, päised, kasulikud andmed, vastuse sisu, olekukood, suurus ja ajastus.
Punased olekukoodid (404, 500) näitavad ebaõnnestunud päringuid. Aeglased kestused tähistavad jõudluse kitsaskohti. Suured suurused viitavad ressurssidele, mis vajavad optimeerimist.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
