Google Chrome Dev Tools: Tidslinjepanel

I likhet med nettverkspanelet gir tidslinjepanelet for utviklereverktøy for Google Chrome en oversikt over tiden som brukes på å laste et websidedokument eller et program.

I tilfelle du savnet dem, inkluderer tidligere oppføringer i Google Chrome Developer Tools-serien:

  • Google Chrome Developer Tools: Elements Panel
  • Google Chrome Developer Tools: Resources Panel
  • Google Chrome Developer Tools: Console Panel
  • Google Chrome Developer Tools: Network Panel
  • Google Chrome utviklerverktøy: Skriptpanel

I denne demonstrasjonen vil jeg bruke The Weather Channel (TWC) for å illustrere det elektroniske verktøyet. Selvfølgelig kan du bruke et hvilket som helst nettsted du ønsker, til å gjøre dine egne eksperimenter.

Utviklere hos Google har jobbet med å forbedre skalerbarhet og sporbarhet mens de gir mer informasjon om innspilte hendelser som vises i tidslinjepanelet.

I Google Chrome skriver du inn URL-adressen http://www.weather.com/ i adressefeltet eller søker etter "Værkanalen". Når du er åpen for siden, høyreklikker du og velger Inspiser element som vist i figur A nedenfor.

Hvis panelet ikke allerede er valgt, må du klikke på tidslinjen. Det vises i figur B.

Deretter vil du begynne å spille inn en økt ved å klikke på Record-knappen, og deretter oppdatere siden (F5); Når du har klikket på den, vil du se opptaksknappen bli fra grå til rød mens du spiller inn, og tidslinjen begynner å fange inn tidslinjene for innlasting, skripting og gjengivelse for websiden.

Figur C

Etter flere sekunders fangst kan du klikke på opptaksknappen igjen for å stoppe tidslinjeopptakssesjonen, sirkelen vil endre seg til grå. Jeg lot rekordøkten i denne demonstrasjonen løpe i omtrent 12 sekunder.

Det øverste nivået viser hendelsene som er spilt inn og er gruppert i tre kategorier. Tidslinjen for lasting er representert med en blå linje, Scripting er en gul linje, og Rendering er en lilla linje. Lasting-kategorien registrerer alle nettverksrelaterte hendelser. Skriptskategorien inkluderer JavaScript-utførelse ved forskjellige hendelser, og Rendering beregner CSS-gjengivelse og malingsrelaterte aktiviteter når de lastes inn. Det øverste området inkluderer også et størrelse som kan skyves.

Senterområdet viser et sett med poster, og disse postene har titler til venstre og tidslinjelinjer til høyre. Hold musepekeren over en post eller klikk over en hendelse gir detaljer om hendelsene, som vist med Send Request-posten i figur D. Ekspanderbare rom på grafen visualiserer nestede poster, som vist med oppsettposten i figur E nedenfor.

Figur D

Figur E

Alt dette hjelper deg å se hvilke aktiviteter som skjer i nettleseren, og spesielt med tidslinjepanelet kan du bestemme hvilke aktiviteter som får nettleseren til å jobbe hardere enn andre.

En annen måte å undersøke en scripting-hendelse på er å klikke på en hvilken som helst gul post fra høyre panel. I dette tilfellet valgte jeg et evalueringsskript som vist i figur F, og klikket deretter på ressurslinken, som tok meg til Skript-panelet der jeg kunne se skriptfilen som hendelsen kalte, som vist i figur G.

Figur F

Figur G

Klikk på en hvilken som helst blå post for å se en nettverkshendelse; i dette tilfellet valgte jeg en Sendeforespørsel som vist i figur H. Så klikket jeg på ressurslinken og den viste bildet som gjengitt i høyre sidepanel i figur I.

Figur H

Figur I

Tidslinjepanelet gir deg en titt under panseret på hvordan nettleseren gjengir websider og lar deg se hvilke prosesser og ressurser som krever mer datakraft både for gjengivelse og JavaScript lastetid. Dette verktøyet lar deg visualisere hvor du trenger å finjustere og optimalisere webapplikasjonene dine.

© Copyright 2021 | pepebotifarra.com