Google Chrome Dev Tools: Hvordan bruke konsollpanelet

Fortsetter med Google Chrome Developers Tools, vil dette stykket demonstrere bruk av konsollpanelet til å utføre feilsøking, inspisere DOM eller analysere HTML-feil for utvalgte websider. I tidligere innlegg på Google Development toolkit introduserte jeg Elements Panel og Resource Panel.

I Google Chrome velger du hvilken som helst side du vil inspisere; for dette eksempelet, vil jeg demonstrere konsollen ved å bruke nettstedet Wikipedia.org.

Det er flere måter å åpne Googles verktøy for webutvikler på; den enkleste måten er å bare høyreklikke på hvilket som helst sideelement og velge Inspiser element, noe som resulterer i visningen som vist nedenfor for Wikipedia.org-siden; dette er den forankrede utsikten. Hvis du ønsker å oppheve verktøyet, klikk på dock / avokkeringsikonet nederst til venstre i verktøyet (se figur B ).

Figur B

Klikk på bilder for å forstørre.

Deretter klikker du på Vis konsoll-knappen helt til høyre på verktøylinjen. Hvis det oppdages feil eller advarsler, vises de i nedre høyre hjørne av vinduet. Hvis du klikker på noen av disse feilene, åpnes også konsollpanelet.

Konsollen gir automatisk fullføring og fullføring av faner; Når du skriver uttrykk, blir egenskapenavn derfor automatisk foreslått. Hvis det er flere egenskaper med samme prefiks, trykker du på Tab-tasten for å bla gjennom listen. Ved å trykke på høyre piltast vil du akseptere det uthevede forslaget. Det nåværende forslaget aksepteres også ved å trykke på Tab-tasten hvis det bare er en matchet egenskap. Konsollpanelet støtter alle 21 funksjoner som leveres i Firebugs Command Line API. Figur C viser konsollpanelet un-docket nedenfor.

Figur C

Kommandolinj API er spesielt nyttig når du arbeider med Elements-panelet i forbindelse med Console-panelet. Mens du er i elementpanelet, åpner du konsollen ved å trykke på Esc-tasten, som vist i figur D.

Figur D

Følgende eksempler viser at du returnerer et enkelt element med en gitt id ved å bruke kommandolinjefunksjonen $ (id) . Skriv inn $ ("bodyContent") på Console-ledeteksten og trykk enter. Kommandoen dumper noden med det gitte ID - i dette tilfellet bodyContent - og viser den i konsollpanelet, som vist i figur E :

Ved hjelp av kommandolinjefunksjonen $ 0 returneres en rekke elementer som samsvarer med det gitte XPath-uttrykket. For eksempel å skrive $ 0 ved konsoll-ledeteksten vil dumpe den sist valgte noden i konsollen, som vist i figur F :

Kommandolinjefunksjonen $ 1 returnerer det valgte objektet i konsollpanelet, og $ n vil vise tidligere valgte noder. Inspeksjon av et objekt i den mest egnede fanen, eller fanen identifisert av den valgfrie argumentfanen Navn, kan utføres ved å bruke funksjonen inspisere (objekt , fanenavn) ; de tilgjengelige valgfrie fanenavnene er "html", "css", "script" og "dom". For eksempel skriver du inn i nspect (søkeskjema) ved konsoll-ledeteksten og trykker enter. det valgte objektet med gitt ID vises som vist i figur G :

Dir (objekt) -funksjonen skriver ut en interaktiv liste over alle egenskapene til det spesifiserte objektet, og vil vises identisk med utsikten du vil se når du velger en DOM-fane. I dette eksemplet, ved konsoll-ledeteksttypen dir (søkeskjema) og trykk på enter, dumper den resulterende skjermen objektet med den gitte IDen, og som et JavaScript-objekt med tilhørende egenskaper, og vises i figur H:

Dirxml-funksjonen (node) viser XML- kildetreet til et HTML- eller XML-element. I dette eksemplet skriver du dirxml (søkeskjema) i konsoll-ledeteksten og klikker på retur; den resulterende dumpen viser objektet til den gitte IDen som et HTML-under-tre, vist i figur I :

© Copyright 2020 | mobilegn.com