Google Chrome Developer Tools: Resources Panel

I et tidligere innlegg vurderte jeg Google Chrome Developer Tools Elements Panel. I dagens innlegg vil jeg gå gjennom Ressurspanelet, som inkluderer visning under panseret for å se Frame Resources, HTML5-databaser og informasjonskapsler tilknyttet den aktive nettlesersiden. For denne demonstrasjonen skal jeg åpne HTML5 Demo: Web Database-siden og deretter høyreklikke hvor som helst på siden og velge Inspekter element. Som standard åpnes konsollpanelet for Elements Panel; Klikk på kategorien Ressurser for å åpne Ressurspanelet, som vist i figur A nedenfor.

Figur A

Klikk på bilder for å forstørre.

Når du er inne i Ressurspanelet, kan vi se HTML-en, som som standard åpnes for nettsidefilen som finnes i Frames-ressursene. I dette tilfellet ser vi databasen og deretter databasesidefilen. Også under rammer er alle de andre ressursene, for eksempel mapper for bilder, skript og stilark. Hvis du klikker på bilder, får du en oversikt over alle bildene som er tilknyttet siden, og klikker på bildet "forkme_left ..." i høyre panelvisning, inkludert bildefilens fulle navn, dimensjonene, filstørrelsen, MIME-type, og hele URL-en for bildefilen.

Figur B

Fortsetter vi på venstre side finner vi Scripts-nedlastingsdisplayet og kan vise fire .js-filer; Når "tweets.js" -filen er uthevet, kan vi se innholdet i filen i høyre rute.

Figur C

Deretter ser vi stilarkene, og en fil blir funnet - "html5demos.css", som vist i figur D. Hvis du dobbeltklikker på filnavnet, åpner Chrome et eget vindu og viser filen i tekstvisning eller kildemodus som vist i figur E.

Figur D

Figur E

Neste, under Ressurspanelet, kan vi se HTML5-databasene, og i dette tilfellet kan vi se at html5demos-siden har en datakilde til "tweets" -databasen.

Figur F

Med chevron-ledeteksten kan du skrive inn * fra tweets . Inngangen i databasekonsollen har automatisk fullføring og fullføring av faner for vanlige SQL-ord og uttrykk sammen med tabellenavn for databasen. Legg merke til mens du skriver i uttrykket at den vil fullføres automatisk før du er ferdig.

Figur G

Når du trykker på skriver du inn (returnerer) den resulterende spørringen databasen i tabellformat med kolonne-ID, tekst, opprettet_at, skjermnavn og nevner oppføringer ved hjelp av Web Database API for å lagre tweets.

Figur H

De endelige ressursene vi vil se på er informasjonskapslene tilknyttet domenet og websiden. Ved å klikke på informasjonskapsler, og deretter "html5demos.com", kan vi se alle de tilknyttede informasjonskapslene, deres navn, verdi, domene, når de utløper, og størrelsen på informasjonskapselen. Du kan også slette dem fra denne oppføringen ved å merke først, og velg deretter Slett med høyreklikk. Informasjonskapslene for denne sides demonstrasjonen vises nedenfor.

Figur I

Fremtidige segmenter på Google Chrome Developer Tools vil demonstrere ved hjelp av nettverkspanelet, skriptpanelet, tidslinjepanelet og konsollpanelet.

© Copyright 2021 | pepebotifarra.com