13Sep
Firefox 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 opdateret Scratchpad.
Firefox nye webudviklerfunktioner kombineret med fantastiske web-udvikler-tilføjelser som Firebug og Web Developer Toolbar gør Firefox til en ideel browser til webudviklere. Alle værktøjer er tilgængelige under Webudvikler i Firefox menu.
Page Inspector
Kontrollér et specifikt element ved at højreklikke på det og vælge Inspekter ( eller tryk Q ).Du kan også starte Inspector fra Web Developer-menuen.
Du kan se 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 bliver dæmpet.
Hvis du vil vælge et nyt element, skal du klikke på Inspect knappen på værktøjslinjen, svæve musen over siden og klikke på dit element. Firefox fremhæver elementet under cursoren.
Du kan navigere mellem forældre og barnelementer ved at klikke på breadcrumbs på værktøjslinjen.
HTML Inspector
Klik på HTML knappen for at se HTML-koden for det aktuelt valgte element.
HTML-inspektøren giver dig mulighed for at udvide og sammenbruge HTML-tags, hvilket gør det nemt at visualisere med et overblik. Hvis du vil se sidens HTML i en flad fil, kan du vælge View Page Source fra Webudvikler menuen.
CSS Inspector
Klik på Style knappen for at se CSS reglerne anvendt på det valgte element.
Der er også et CSS egenskaber panel - skift mellem de to ved at klikke på Regler og Egenskaber knapper. For at hjælpe dig med at finde specifikke egenskaber indeholder ejendomspanelet en søgefelt.
Du kan redigere elementets CSS på flugt fra panelet Regler. Fjern markeringen i 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 skrifttypen : bold; CSS regel, hvilket gør elementets tekst fed.
JavaScript Scratchpad
Scratchpad oplevede også en opdatering med Firefox 10, og indeholder nu syntaxhævning. Du kan skrive JavaScript-kode for at køre på den aktuelle side.
Når du har det, skal du klikke på Execute menuen og vælge Run. Koden kører i den aktuelle fane.
Webkonsol
Webkonsollen erstatter den gamle fejlkonsol, som er blevet udskrevet og fjernes 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 webudvikler meddelelser.
Hvad er en webudviklerbesked? Det er en besked, der er trykt på window.console objektet. 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 fejlfinding.
Opdater siden, og du vil se de genererede netværksanmodninger og andre meddelelser.
Brug søgefeltet til at filtrere meddelelserne;Klik på en forespørgsel, hvis du vil se flere detaljer.
Fra Firefox 10 kan webkonsollen fungere sammen med Page Inspector. Variabel $ 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 = "none" i konsollen.
Hvis du er interesseret i at lære mere om brugen af konsollen og dens indbyggede funktioner, skal du tjekke webkonsolsiden på Mozils Developer Network-websted.
Få flere værktøjer
Få flere værktøjer valgmuligheden tager dig til Web Developer's Toolbox add-on samling på Mozilla Add-Ons hjemmeside. Den indeholder nogle af de bedste tilføjelsesprogrammer til webudviklere, herunder Firebug og Web Developer Toolbar.
Hvis du har brugt Firefox i et par år, kan du huske DOM Inspectoren. Firefox integrerede udvikler værktøjer er kommet langt siden da.