13Sep
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.
Page Inspector
Kontroller et bestemt element ved å høyreklikke på det og velg Inspekter ( eller trykk Q ).Du kan også starte Inspector fra Web Developer-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 Inspekter -knappen på verktøylinjen, holder musen over siden og klikker 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 flatfil, kan du velge View Page Source fra Web Developer-menyen.
CSS Inspector
Klikk på Style -knappen for å se CSS-reglene som er brukt på det valgte elementet.
Det finnes også et CSS egenskaper panel - bytt mellom de to ved å klikke på Reglene og Egenskaper 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 skrifttypen : fet; 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 Execute -menyen og velger Run. 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 webutviklerbeskjed? 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 og med Firefox 10 kan webkonsollen fungere sammen med Page Inspector. 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 = "none" 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's Developer Network-nettside.
Få flere verktøy
Få flere verktøy -alternativet tar deg til webutviklerens add-on-samling på Mozilla Add-Ons-nettstedet. 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.