Firefox's Web Developer-menu indeholder værktøjer til inspektion af sider, udførelse af vilkårlig JavaScript-kode og visning af HTTP-anmodninger og andre meddelelser. Firefox 10 tilføjede et helt nyt inspektørværktøj og opdaterede Scratchpad.
Firefox's nye webudviklerfunktioner i kombination med fantastiske webudvikler tilføjelser som Firebug og Web Developer Toolbar gør Firefox til en ideel browser for webudviklere. Alle værktøjer er tilgængelige under Webudvikler i Firefox-menuen.
Sideinspektør
Undersøg et bestemt element ved at højreklikke på det og vælge Inspicere (eller trykke på Spørgsmål ). Du kan også starte Inspektør fra menuen Webudvikler.
Du ser en værktøjslinje nederst på skærmen, som du kan bruge til at kontrollere inspektøren. Dit valgte element fremhæves, og andre elementer på siden nedtones.
Hvis du vil vælge et nyt element, skal du klikke på Inspicere på værktøjslinjen, hold musen over siden og klik på dit element. Firefox fremhæver elementet under din markør.
Du kan navigere mellem forældre- og underordnede elementer ved at klikke på brødkrummerne på værktøjslinjen.
HTML-inspektør
Klik på HTML for at se HTML-koden for det aktuelt valgte element.
HTML-inspektøren giver dig mulighed for at udvide og skjule HTML-tags, hvilket gør det nemt at visualisere et overblik. Hvis du vil se sidens HTML i en flad fil, kan du vælge Vis kildetekst fra menuen Webudvikler.
CSS inspektør
Klik på Stil knappen for at se CSS-reglerne anvendt på det valgte element.
Der er også et CSS-egenskabspanel - skift mellem de to ved at klikke på Regler og Ejendomme knapper. For at hjælpe dig med at finde specifikke egenskaber inkluderer egenskabspanelet et søgefelt.
Du kan redigere elementets CSS undervejs fra panelet Regler. Fjern markeringen i et af afkrydsningsfelterne for at deaktivere en regel, klik på teksten for at ændre en regel eller tilføj dine egne regler til elementet øverst i ruden. Her har jeg tilføjet font-vægt: fed; CSS-regel, hvilket gør elementets tekst fed.
JavaScript Scratchpad
Scratchpad så også en opdatering med Firefox 10 og indeholder nu syntaksfremhævning. Du kan indtaste JavaScript-kode for at køre på den aktuelle side.
Når du har gjort det, skal du klikke på Udfør menu, og vælg Løb. Koden kører i den aktuelle fane.
Webkonsol
Webkonsollen erstatter den gamle fejlkonsol, som er udfaset og vil blive fjernet i en fremtidig version af Firefox.
Konsollen viser fire forskellige typer meddelelser, som du kan skifte synlighed af - netværksanmodninger, CSS-fejlmeddelelser, JavaScript-fejlmeddelelser og webudviklerbeskeder.
Hvad er en webudviklerbesked? Det er en meddelelse, der er trykt på vinduet.console-objekt. For eksempel kunne vi køre window.console.log (“Hello World”); JavaScript-kode i Scratchpad for at udskrive en udviklerbesked til konsollen. Webudviklere kan integrere disse meddelelser i deres JavaScript-kode for at hjælpe med fejlretning.
Opdater siden, så får du vist de genererede netværksanmodninger og andre meddelelser.
Brug søgefeltet til at filtrere beskederne. klik på en anmodning, hvis du vil se flere detaljer.
Fra og med Firefox 10 kan webkonsollen arbejde sammen med sideinspektøren. Variablen $ 0 repræsenterer det aktuelt valgte objekt i inspektøren. Så hvis du f.eks. Vil skjule det aktuelt valgte objekt, kan du køre $ 0.style.display = ”ingen” i konsollen.
Hvis du er interesseret i at lære mere om brugen af konsollen og dens indbyggede funktioner, skal du tjekke Web Console-side på Mozillas websted for udviklernetværk.
Få flere værktøjer
Det Få flere værktøjer indstilling fører dig til Webudviklerens værktøjskassesamlingsprogram på Mozilla Add-Ons-webstedet. Den indeholder nogle af bedste tilføjelser til webudviklere , herunder Firebug og Web Developer Toolbar.
Hvis du har brugt Firefox i et par år, kan du huske DOM-inspektøren. Firefox's integrerede udviklerværktøjer er kommet langt siden da.
