Slik bruker du Firefox webutviklerverktøy
Firefox Web Developer-menyen inneholder verktøy for å inspisere sider, utføre vilkårlig JavaScript-kode, og vise HTTP-forespørsler og andre meldinger. Firefox 10 la til et helt nytt inspektørverktøy og oppdatert Scratchpad.
Firefox nye webutviklerfunksjoner, i kombinasjon med fantastiske webutvikler-tilleggsprogrammer som Firebug og Web Developer Toolbar, gjør Firefox til en ideell nettleser for webutviklere. Alle verktøyene er tilgjengelige under Webutvikler i Firefox-menyen.
Sideinspektør
Kontroller et bestemt element ved å høyreklikke på det og velge Undersøke (eller trykke på Q). Du kan også starte Inspektør fra webutvikler-menyen.
Du får se en verktøylinje nederst på skjermen, som du kan bruke til å kontrollere inspektøren. Ditt valgte element vil bli uthevet og andre elementer på siden vil bli dempet.
Hvis du vil velge et nytt element, klikker du på Undersøke knappen på verktøylinjen, flytt musen over siden og klikk på elementet. Firefox fremhever elementet under markøren din.
Du kan navigere mellom foreldre og barnelementer ved å klikke på breadcrumbs på verktøylinjen.
HTML Inspector
Klikk på HTML knappen for å vise HTML-koden til det valgte elementet.
HTML-inspektøren lar deg utvide og kollapse HTML-kodene, noe som gjør det enkelt å visualisere på et øyeblikk. Hvis du vil se sidens HTML i en flat fil, kan du velge Vis sidekilde fra webutvikler-menyen.
CSS Inspector
Klikk på Stil knappen for å se CSS-reglene som er brukt på det valgte elementet.
Det er også et CSS egenskaper panel - bytt mellom de to ved å klikke på regler og Eiendommer knapper. For å hjelpe deg med å finne bestemte egenskaper, inneholder egenskaper-panelet en søkeboks.
Du kan redigere elementets CSS i fly fra Regel-panelet. Fjern markeringen i avmerkingsboksen for å deaktivere en regel, klikk på teksten for å endre en regel, eller legg til dine egne regler til elementet øverst i ruten. Her har jeg lagt til font-weight: bold; CSS-regel, noe som gjør elementets tekst fet.
JavaScript Scratchpad
Scratchpad så også en oppdatering med Firefox 10, og inneholder nå syntaksutheving. Du kan skrive inn JavaScript-kode for å kjøre på den nåværende siden.
Når du har, klikker du på Henrette menyen og velg Løpe. Koden kjører i den nåværende kategorien.
Webkonsoll
Webkonsollen erstatter den gamle feilkonsollen, som er blitt utdatert og vil bli fjernet i en fremtidig versjon av Firefox.
Konsollen viser fire forskjellige typer meldinger, som du kan bytte til synlighet for - nettverksforespørsler, CSS-feilmeldinger, JavaScript-feilmeldinger og webutviklermeldinger..
Hva er en web utvikler melding? Det er en melding som skrives ut til window.console-objektet. For eksempel kan vi kjøre window.console.log ("Hello World"); JavaScript-kode i Scratchpad for å skrive ut en utviklermelding til konsollen. Webutviklere kan integrere disse meldingene i JavaScript-koden for å hjelpe deg med feilsøking.
Oppdater siden, og du vil se de genererte nettverksforespørsler og andre meldinger.
Bruk søkefeltet til å filtrere meldingene; klikk på en forespørsel hvis du vil se flere detaljer.
Fra Firefox 10 kan webkonsollen fungere sammen med sidens inspektør. Varianten $ 0 representerer det valgte objektet i inspektøren. Så hvis du for eksempel vil gjemme det valgte objektet, kan du kjøre $ 0.style.display =”ingen” i konsollen.
Hvis du er interessert i å lære mer om bruk av konsollen og de innebygde funksjonene, kan du sjekke ut nettsiden på Mozilla Developer Network-nettside.
Få flere verktøy
De Få flere verktøy alternativet tar deg til webutviklerens verktøykasse tilleggsinnsamling på Mozilla Add-Ons nettsted. Den inneholder noen av de beste tilleggene til webutviklere, inkludert Firebug og verktøylinjen for webutvikler.
Hvis du har brukt Firefox i noen år, kan du huske DOM Inspector. Firefox integrerte utviklerverktøy har kommet langt siden da.
