Internet Explorer F12-utviklereverktøy: En funksjon gjennomgang

Det har vært et godt utvalg av nettleserbaserte utviklingsverktøy i veldig lang tid, alt fra HTML-redaktører til JavaScript-feilsøkere. En av de mest kjente er Firebug.

Internet Explorer har hatt sine egne F12 Developer Tools i noen tid. Mens F12 Developer Tools ikke gjør noe radikalt nytt eller annerledes enn Firebug og lignende verktøy, gjør de en ting de andre verktøyene ikke gjør, noe som er å gi deg innsikt i hvordan HTML, CSS og JavaScript behandles på Internett Explorer. Dette er grunnen til at det er verdt din tid å bli kjent med F12 Developer Tools.

For å få tilgang til verktøyene, trykk ganske enkelt på F12 eller velg det fra menyen. Dette bringer opp et Firebug-lignende vindu nederst på skjermen ( figur A ). Herfra kan du bruke kategoriene til å inspisere HTML, CSS, få tilgang til en JavaScript-konsoll, starte feilsøking, gjøre profilering eller inspisere nettverkstrafikk. Enda bedre, dropdowns over fanene lar deg sjekke ut siden i forskjellige Internet Explorer-modus for å gi deg et inntrykk av hva andre brukere kan se; denne funksjonen alene er verdt prisen for opptak, siden den slår ved å opprettholde VMer med hver av de forskjellige versjonene. Menylinjen gir også tilgang til en rekke nyttige verktøy, inkludert HTML og CSS-validering. Figur A

Klikk på bildet for å forstørre det.
Når du viser sidens detaljer, kan du gjøre endringer i HTML, CSS og JavaScript direkte på skjermen for å se en sanntidsoppdatering på skjermen som gjenspeiler endringen. Velge elementer i HTML-fanene viser en mengde detaljer til høyre, inkludert en liste over stilene og hvor de kom fra, boksmodellen (og pikselstørrelsene i hver del - se figur B ), og attributtene. Figur B

Klikk på bildet for å forstørre det.

Manusfeilfeilen er litt mer sammensatt. Bytt først til Skript-fanen, og klikk deretter på Start feilsøking-knappen. Du må kanskje oppdatere skjermen for å få den til å koble til alle elementene på siden. Du kan klikke på venstre "rennestein" ved siden av en kodelinje for å angi et bruddpunkt (eller høyreklikk på det). Det er en rullegardinliste som lar deg velge hvilket skript du vil se på spesifikt. Siden det ofte kan være vanskelig å huske hvilket skript som har hva i seg, fungerer søkeskript-ruta godt for å hjelpe deg med å finne koden du prøver å finne. Console-hovedfanen (eller underkategorien til Script) lar deg følge med på feil og advarsler når de oppstår.

CSS-fanen er enkel. I likhet med Skript-fanen velger du hvilken CSS-fil du vil inspisere fra en rullegardinliste. Det er ikke noe du ikke kan gjøre på HTML-fanen, men du kan se hva som skjer når du modifiserer CSS i bestemte filer og ikke bare den resulterende stilen.

Nettverk-fanen fungerer mye som en mindre fullversjon av Fiddler. Det er en enkel knapp for å veksle om den er på eller ikke. Jeg føler at denne funksjonen er ganske svak, og at Fiddler er et bedre valg rundt.

Konklusjon

Hvis du har brukt Firebug eller andre lignende alternativer, vil du være komfortabel med å bruke F12 Developer Tools. Det er også bra å gjøre disse tingene i Internet Explorer for å se hvorfor det fungerer annerledes enn andre nettlesere.

J.Ja

© Copyright 2021 | pepebotifarra.com