Google Chrome Developer Tools: Elements Panel

Google Chrome er tilfeldigvis en av favorittleserne mine for øyeblikket, og den har også et smart sett med utviklerverktøy. En som jeg har brukt med jevne mellomrom er verktøyet "Inspect Element". Men det jeg liker mest med utviklerverktøyene, er muligheten til å se under panseret på ethvert nettsted for å se gjennom koden, HTML og tilknyttede filer, inkludert skript og stilark. Hele utviklerverktøysettet inkluderer Elements Panel, Resources Panel, Network Panel, Scripts Panel, Timeline Panel, Profiles Panel, Audits og Console. Denne brikken vil fremheve Elements Panel, og fremtidige brikker vil gjennomgå de gjenværende panelene.

Elements Panel

Elements-panelet i Developer Tool lar deg se alt i ett DOM-tre, og lar inspeksjon av DOM-elementene. Jeg besøker ofte Elements-fanen når jeg trenger å identifisere HTML-kodebiten for et bestemt aspekt av siden. Elementene inkluderer datastil, stiler, matchede CSS-regler, beregninger, egenskaper, DOM-bruttpunkter og hendelseslyttere.

I denne demonstrasjonen vil jeg begynne med å bruke Model Railroad Hobbyist-siden ( figur A ), med siden åpen i Google Chrome, høyreklikk hvor som helst på siden og velg Inspekter element nederst i dialogboksen. Som standard åpnes konsollpanelet for Elements-panelet. Når elementpanelet er aktivt, kan vi se HTML-koden, velge et element og se dets egenskaper. I dette tilfellet viser beregningene for hovedinnholdsblokken hvordan den leses av nettleseren, området som er valgt blir også indikert av den blå overtonen i topp nettleserpanel. Dette viser sidens HTML-elementer i hovedruten, og stiler, beregninger, egenskaper og hendelseslyttere i høyre sidefelt. Dette er veldig nyttig når du er nysgjerrig på hvilken del av HTML som genererte et bestemt sideelement.

Figur A

Klikk for å forstørre bilder.
DOM Elements Tree, inkludert inline-skript og stiler, er syntaks uthevet. for eksempel når jeg velger taggen, får jeg denne visningen som vist i figur B nedenfor.

Figur B

Hvis du velger en hvilken som helst tag under elementpanelet, tar du deg med tilhørende stiler, beregninger og egenskaper, inkludert men ikke begrenset til koder som f.eks.

,, og klasser også. En fin måte å se under panseret er å velge en klasse- eller ID-ankerattributt; For eksempel, på Google Code-nettstedet, valgte jeg og i Elements-panelvisningen, kan jeg se hva de matchede CSS-reglene som definerer attributtet. Som vist i figur C kan vi bestemme at skriftstørrelse er 1 em, margin er lik null, polstring er .1em, 0 og så videre.

Figur C

Selv om det er flott å se de individuelle stilene og hvor de kommer fra, er det også veldig nyttig å se det endelige settet med stiler etter at de er beregnet og brukt på elementet. Du kan se sluttproduktet ved å velge delen Beregnet stil og utforske stiler som er gjengitt i nettleseren. Mens den beregnede stilen ikke kan redigeres, kan de matchede CSS-reglene endres.

Oppdatering på farten

En annen kul funksjon er at du kan endre hvilken som helst av koden, stilarkene eller skriptene mens du er på farten med skriptredigering på plass, og gi deg en gjennomgang av endringene på klientnivå som kjører i Google Chrome. Dette gir deg en fin måte å se hvordan andre nettsteder er bygget, og gir deg også en fin måte å finjustere dine egne nettsteder. Derfor tillater dette integrerte miljøet feilsøking, optimalisering og forståelse av en webapplikasjon, eller et nettsted. Så la oss ta en titt på noen av panelverktøyene for å kikke under panseret på flere nettsteder.

La oss si at du vil se hva som skjer med stylingen når du deaktiverer eller endrer en eiendom. Fra matchede CSS-regler kan du deaktivere hvilke som helst av egenskapene ved å fjerne markeringen i den grønne avmerkingsboksen, som vist i eksemplet nedenfor i figur D, der margen er deaktivert for klassen = "g-enhet g-first" resulterer i Seksjoner for nyheter og kunngjøringer, og slipp under avsnittet Utvalgte produkter på siden.

Figur D

Husk at du bare endrer den lokale filen i nettleseren. du oppdaterer ikke selve nettstedet; Jeg ville bare legge det der ute, da det ser ut til at det var en viss forvirring av flere mennesker om denne funksjonen fra flere nettbrett og fora. Fordelene med å se under panseret og gjøre modifiserte modifikasjoner lar deg studere og lære hvordan andre koder og styler utseendet og følelsen for sitt online innhold.

Du kan også dobbeltklikke på en hvilken som helst stilegenskap som ikke er bruker-agent for å redigere eller slette; dobbeltklikk for eksempel på flottøren: venstre; eiendom. Du bør se noe slikt som vist i figur E.

Figur E

Hvis du skriver inn eller limer inn en eller flere egenskaper, legges de nye egenskapene til stilregelen. Hvis du redigerer en stilegenskapsverdi med et nummer, kan du bruke pil opp eller pil ned for å endre tallet og holde Alt / alternativtastene i trinn på 0, 1; hold Skift-tasten trinnvis i trinn på 10. Du kan også legge til flere egenskaper ved å dobbeltklikke på et hvilket som helst hvitt sted til venstre eller under eventuelle eksisterende oppføringer eller ved å lime inn flere egenskaper skilt med et semikolon. Du kan redigere stilvelgernavnene ved å dobbeltklikke på navnene deres, og du kan også legge til nye stilvelgere ved å bruke Gear-menyen, som ligger til høyre for seksjonen Stiler som vises i figur F nedenfor.

Figur F

Metrics box-modell

Dette lar deg redigere hvilken som helst av de absolutte, relative eller faste CSS-boksens modellberegninger som vist på høyre sidepanel, og eksemplet vises i figur G nedenfor.

Figur G

Eiendommer

Velg Egenskapsrute fra høyre sidepanel, og utvid deretter Element for å eksponere DOM-egenskapene, der du kan endre og leke mer under panseret med egenskaper som uskarphet, konstruktør, fokus og andre som vist i figur H nedenfor.

Figur H

Begivenhetslyttere

Hendelseslytterne vises for de valgte nodene og er i den rekkefølgen de blir henrettet og fanget under gjengivelsen, og blir skilt etter type. Hvis en node har både onclick- og onmouseover-lyttere, vil de vises i forskjellige seksjoner. Filterpreferanser kan også stilles fra Gear-menyen, og du kan velge å bare se lytterne som er registrert på den valgte noden, eller hele hendelsesflyten. Et eksempel på klikk- og dokumenthendelser som vist i figur I nedenfor.

Figur I

Søkefunksjon

Du kan også søke i Elements-panelet etter alle koder, koder, IDer, klasser og skript som du kanskje vil fokusere oppmerksomheten på - til og med lage en søkeliste med matcher med høy prioritet som du trenger å komme til på en rask måte . For eksempel skriver du "skjema" i søkefeltet, resulterer det i 10 treff, og fremhever den første forekomsten som vist i figur J nedenfor.

Figur J

Elements-panelet støtter også XPath- og CSS-velgere som spørsmål i søkefeltet, i tillegg til ren tekst som er vist ovenfor.

Den neste avbetalingen ved bruk av Google Chrome Developer Tools vil gjennomgå ressurspanelet.

© Copyright 2021 | mobilegn.com