Firefox 'Web Developer-meny 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's nye webutviklerfunksjoner, i kombinasjon med fantastiske tillegg til webutviklere 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
Inspiser et bestemt element ved å høyreklikke på det og velge Undersøke (eller trykke på Q ). Du kan også starte Inspektør fra Web Developer-menyen.
Du ser en verktøylinje nederst på skjermen, som du kan bruke til å kontrollere inspektøren. Det valgte elementet ditt blir uthevet og andre elementer på siden blir nedtonet.
Hvis du vil velge et nytt element, klikker du på Undersøke på verktøylinjen, hold musen over siden og klikk på elementet ditt. Firefox fremhever elementet under markøren din.
Du kan navigere mellom foreldre- og underordnede elementer ved å klikke brødsmulene på verktøylinjen.
HTML-inspektør
Klikk på HTML for å vise HTML-koden til det valgte elementet.
HTML-inspektøren lar deg utvide og skjule HTML-kodene, noe som gjør det enkelt å visualisere det raskt. Hvis du vil se sidens HTML i en flat fil, kan du velge Vis sidekilde fra Web Developer-menyen.
CSS inspektør
Klikk på Stil for å se CSS-reglene som brukes på det valgte elementet.
Det er også et CSS-egenskapspanel - bytt mellom de to ved å klikke på Regler og Eiendommer knappene. For å hjelpe deg med å finne spesifikke egenskaper, inneholder egenskapspanelet et søkefelt.
Du kan redigere elementets CSS direkte fra Regler-panelet. Fjern merket for noen av avmerkingsboksene for å deaktivere en regel, klikk teksten for å endre en regel, eller legg til dine egne regler i elementet øverst i ruten. Her har jeg lagt til skriftvekt: fet; CSS-regel, som gjør elementets tekst fet.
JavaScript-kladdeplate
Scratchpad så også en oppdatering med Firefox 10, og inneholder nå syntaksutheving. Du kan skrive inn JavaScript-kode for å kjøre på den gjeldende siden.
Når du har gjort det, klikker du på Henrette menyen og velg Løpe. Koden kjører i gjeldende fane.
Nettkonsoll
Nettkonsollen erstatter den gamle feilkonsollen, som er utfaset og vil bli fjernet i en fremtidig versjon av Firefox.
Konsollen viser fire forskjellige typer meldinger, som du kan bytte synlighet for - nettverksforespørsler, CSS-feilmeldinger, JavaScript-feilmeldinger og webutviklermeldinger.
Hva er en nettutviklermelding? Det er en melding som er skrevet ut på window.console-objektet. For eksempel kan vi kjøre window.console.log (“Hello World”); JavaScript-kode i kladdeplaten for å skrive ut en utviklermelding til konsollen. Nettutviklere kan integrere disse meldingene i JavaScript-koden for å hjelpe med feilsøking.
Oppdater siden, så ser du de genererte nettverksforespørslene og andre meldinger.
Bruk søkefeltet til å filtrere meldingene. Klikk på en forespørsel hvis du vil se mer informasjon.
Fra og med Firefox 10 kan nettkonsollen fungere sammen med Page Inspector. Variabelen $ 0 representerer det valgte objektet i inspektøren. Så hvis du for eksempel vil skjule 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 dens innebygde funksjoner, kan du sjekke ut Web Console-side på nettstedet til utviklernettverket til Mozilla.
Få flere verktøy
De Få flere verktøy alternativet tar deg til webutviklerens verktøykasse-tilleggssamling på Mozilla Add-Ons-nettstedet. Den inneholder noe av best add-ons for web developers , inkludert Firebug og Web Developer Toolbar.
Hvis du har brukt Firefox i noen år, kan du huske DOM Inspector. Firefox ’integrerte utviklerverktøy har kommet langt siden den gang.
