Network Monitor sieppaa ja näyttää jokaisen nykyisen sivun tekemän verkkopyynnön — XHR/Fetch API -kutsut, skriptien lataukset, tyylitiedostojen haut, kuvien lataukset, fonttitiedostot ja paljon muuta. Näet URL-osoitteet, HTTP-metodit, tilakoodit, vastausten koot ja ajoitukset — kaikki reaaliaikaisesti päivittyvässä kelluvassa paneelissa avaamatta selaimen DevTools-näkymää.
Chrome DevTools -sovelluksen Verkko-välilehti on tehokas mutta raskas — se vie paljon näyttötilaa, nollautuu navigoinnin yhteydessä ja pakottaa siirtymään pois sivun sisällöltä. Network Monitor tarjoaa olennaiset verkonseurantaominaisuudet kevyessä kelluvassa paneelissa, joka sijaitsee sivun päällä. Se sieppaa XHR- ja Fetch-pyynnöt ja seuraa resurssien lataamista Performance API:n kautta näyttäen jokaisen verkkopyynnön reaaliajassa. Kustakin pyynnöstä näytetään URL, HTTP-metodi (GET, POST, PUT, DELETE), tilakoodi (värikoodattu: vihreä 2xx:lle, keltainen 3xx:lle, punainen 4xx/5xx:lle), vastauksen koko tavuina ja kesto millisekunteina. Napsauta mitä tahansa pyyntöä laajentaaksesi sen tiedot: pyyntöotsikot, vastausotsikot, pyyntösisältö (POST/PUT-pyynöille), vastauksen esikatseluteksti ja ajoituksen erittely. Suodata tyypin mukaan (XHR/Fetch, JS, CSS, Images, Fonts) keskittyäksesi tiettyyn liikenteeseen.
Jokainen verkkopyyntö ilmestyy paneeliin heti kun se tapahtuu — sivun lataukset, API-kutsut, myöhässä ladatut resurssit ja taustafetchit. Syöte päivittyy reaaliajassa ilman manuaalista päivitystä.
Napsauta mitä tahansa pyyntöä nähdäksesi kaikki tiedot: pyynnön URL, metodi, otsikot, sisältö (POST/PUT-pyynöille), vastausotsikot, vastauksen esikatseluteksti (JSON muotoiltuna automaattisesti), tilakoodi, koko ja ajoituksen erittely.
Suodata pyyntöjä tyypin mukaan: XHR/Fetch (API-kutsut), JS (skriptit), CSS (tyylitiedostot), IMG (kuvat), Font (verkkofontteja) tai Kaikki. Eristä API-liikenne resurssien lataamisesta ja keskity olennaiseen.
Tilakoodit on värikoodattu välittömän tunnistamisen helpottamiseksi: vihreä 2xx:lle (onnistuneet), keltainen 3xx:lle (uudelleenohjaukset), punainen 4xx:lle (asiakasvirheet) ja 5xx:lle (palvelinvirheet). Epäonnistuneet pyynnöt erottuvat heti.
Kustakin pyynnöstä näytetään vastauksen koko (kilotavuina) ja kokonaiskesto (millisekunteina). Tunnista hitaat API-kutsut, liian suuret resurssit ja tarpeettomat pyynnöt, jotka heikentävät sivun suorituskykyä.
Yhteenvetopalkki näyttää pyyntöjen kokonaismäärän ja kaikkien siepattujen pyyntöjen yhteenlasketun koon. Suodata yhteenveto nähdäksesi kokonaismäärät tyypeittäin — kuinka paljon kaistanleveyttä kuluu skripteihin, kuviin ja API-kutsuihin.
Seuraa XHR/Fetch-pyyntöjä varmistaaksesi, että käyttöliittymäsi kutsuu oikeita API-päätepisteitä oikeilla parametreilla. Napsauta tarkistaaksesi pyyntöjen sisällöt ja vastausten tekstit — huomaa väärin muotoillut tiedot välittömästi.
Punaiset 404- ja 500-merkinnät korostavat välittömästi viallisia resursseja tai epäonnistuneita API-kutsuja. Näet mitkä URL-osoitteet epäonnistuvat, milloin ne epäonnistuvat ja minkä virhevastauksen palvelin palauttaa.
Lajittele keston mukaan löytääksesi hitaimmat pyynnöt. Lajittele koon mukaan löytääksesi suurimmat resurssit. Yhteenvetosummat näyttävät koko kaistanleveyden tilanteen — tekeekö sivu liikaa pyyntöjä tai lataako se liikaa tietoa?
Katso mitä verkkopyyntöjä sivu tekee taustalla — analytiikkapingit, heartbeat-kutsut, polling-pyynnöt, myöhässä ladatut resurssit. Ymmärrä koko verkkoaktiviteetti sen lisäksi, mitä käyttäjälle näkyy.
Suodata pyyntöjä ja tarkista mihin verkkotunnuksiin otetaan yhteyttä. Tunnista kolmannen osapuolen skriptit, jotka tekevät odottamattomia verkkokutsuja — seurantapikselit, tiedonkeruu tai ulkoiset API-kutsut, joista et tiennyt.
Avaa DevSuite Pro -kelluva telakka ja napsauta Network Monitor -kuvaketta. Paneeli avautuu ja alkaa siepata verkkopyyntöjä välittömästi.
Käytä sivua normaalisti. Jokainen verkkopyyntö ilmestyy syötteeseen heti kun se tehdään — API-kutsut, resurssien lataukset ja taustafetchit kaikki siepataan.
Napsauta tyyppisuodattimia (XHR, JS, CSS, IMG, Font) kaventaaksesi näkymää. Näytä vain API-kutsut tietojen haun debuggaukseen tai vain kuvat resurssien latauksen tarkistamiseen.
Napsauta mitä tahansa pyyntöriviä laajentaaksesi sen tiedot: URL, otsikot, sisältö, vastauksen teksti, tilakoodi, koko ja ajoitus.
Punaiset tilakoodit (404, 500) osoittavat epäonnistuneita pyyntöjä. Hitaat kestot paljastavat suorituskykyongelmien pullonkaulat. Suuret koot viittaavat resursseihin, jotka tarvitsevat optimointia.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.
