Google Chrome Dev -työkalut: Verkkopaneeli

Verkkopaneeli on osa Google Chrome -kehittäjien työkaluja, ja sen avulla voit tarkistaa resursseja, kun niitä käytetään verkon kautta. Tässä segmentissä esitelty esimerkki tarkastaa CNN.com: n Yhdysvaltain painos.

Google Chrome -kehittäjän työkalusarjan aikaisemmat merkinnät sisältävät:

  • Google Chromen kehittäjätyökalut: Elementit-paneeli
  • Google Chromen kehittäjätyökalut: Resurssien paneeli
  • Google Chrome -kehittäjän työkalut: konsoli-paneeli
Siirry Google Chromessa osoitteeseen http://www.cnn.com, napsauta hiiren kakkospainikkeella mitä tahansa selaimen kohtaa ja valitse Tarkasta elementti; Kun työkalupaneeli aukeaa, napsauta valitaksesi verkko ja paina sitten näppäimistön F5 päivittääksesi sivun. Huomaat, että aikajana aloittaa tiedostojen nimien hakemisen vesiputousluetteloon liittyvistä verkkotoiminnoista, kuten kuvassa A näkyy :

Viive tai alkuperäisen pyynnön esittämisen ja palvelimen ensimmäisen vastauksen välinen aika näkyy aikajanalla vaaleampana varjostettuna palkkiona jokaiselle nimetylle tiedostolle. Kohdistimen siirtäminen aikajanalla olevan "palkin" yli näyttää yksityiskohtaisen pallokuvan, kuten kuvan B esimerkissä. Tiedosto http://www.cnn.com näyttää DNS-haun 42 ms: n kohdalla, yhteyden muodostaminen 67 ms: n kohdalla, lähettämisen osoitteessa 0, odottaa 113 ms ja vastaanottaa 232ms.

Kuvio B

Napsauta kuvia suurentaaksesi.
Oikeanpuoleisessa vesiputouksen aikajanalla näkyvä sininen pystysuora viiva kuvaa DOMContentLoaded-tapahtuman laukaisua ja punainen pystysuora viiva kuvaa Lataa-tapahtumaa. Nämä kaksi indikaattoria auttavat sinua määrittämään kokonaisen ajan, joka kuluu sivujen lataamiseen, ja antaa sinulle vertailukohdan sivujen parantamiseksi. Nämä kaksi tapahtumaa esitetään kuvassa C, ja näytön sieppaaminen on edelleen nimetyllä resurssiluettelolla.

Kuvio C

Verkkopaneelin alaosassa on vaihtoehtoja verkkosivustolähteiden tarkastelemiseen, mukaan lukien kaikki, asiakirjat, tyylitaulukot, kuvat, skriptit, XHR, fontit, WebSocket ja muut. Olen valinnut Scripts-resurssin kuvan D esimerkissä:

Oletuksena näyttö on lajiteltu aikajanalla; voit kuitenkin muokata lajittelua avattavasta luettelosta, joka sisältää aikajanan lisäksi myös aloitusajan, vasteajan, lopetusajan, keston ja viiveen, kuten kuvassa E :

Kun valitset lajittelun viiveen perusteella, saan seuraavan kuvan kuvassa F esitetyllä tavalla :

Toinen lajittelu, jota voit suorittaa nousevassa tai laskevassa järjestyksessä, on Koko-sarake, kuten voit nähdä kuvassa G, laskevassa järjestyksessä suurimmista resursseista pienimpiin.

Kuvio G

Napsauta nyt http://www.cnn.com resurssimerkintää vasemmanpuoleisesta ruudusta, ja oikeanpuoleisen ruudun näyttö käyttää oletusarvoisesti Esikatselu-välilehden tilaa, joka näyttää HTML: n kuvun alla (katso kuva K ). Muita vaihtoehtoja ovat otsikot, vastaus, evästeet ja ajoitus. Seuraavassa kuvassa H esitetyssä esimerkissä näytetään otsikot-välilehti.

Kuvio H

Kuva I näyttää Evästeet-välilehden:

Kuva J näyttää ajoitus-välilehden:

Verkkopaneelin esikatselu -välilehti on toiminnallisesti samanlainen kuin Resurssit-paneelin Resurssienäkymä, kuten kuvassa K näkyy:

© Copyright 2020 | mobilegn.com