Sådan bruges Firefox's webudviklerværktøjer
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's nye webudviklerfunktioner kombineret med fantastiske web-udvikler-add-ons 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-menuen.
Sideinspektør
Undersøg et bestemt element ved at højreklikke på det og vælge Inspicere (eller trykke på Q). Du kan også starte Inspektør fra webudviklermenuen.
Du får vist 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å Inspicere knappen på værktøjslinjen, svæv musen over siden og klik 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å knappen HTML knappen for at få vist 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 et øjeblik. Hvis du vil se sidens HTML i en flad fil, kan du vælge Vis kildetekst fra webudviklermenuen.
CSS Inspector
Klik på knappen 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 indeholder ejendomspanelet en søgefelt.
Du kan redigere elementets CSS i flyve 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 font-weight: bold; CSS-regel, hvilket gør elementets tekst fed.
JavaScript Scratchpad
Scratchpad'en så også en opdatering med Firefox 10, og indeholder nu syntaxfremhævning. Du kan skrive JavaScript-kode for at køre på den aktuelle side.
Når du har det, skal du klikke på Udfør menuen og vælg Løb. 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å vinduet. Konsolobjekt. 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 fejlsøgning.
Opdater siden, og du vil se de genererede netværksforespørgsler 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 siden inspektøren. 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
Det Få flere værktøjer valgmuligheden tager dig til webudviklerens værktøjskasse-add-on-samling på Mozilla Add-Ons-webstedet. Den indeholder nogle af de bedste tilføjelsesprogrammer til webudviklere, herunder Firebug og Web Developer Toolbar.
Hvis du har brugt Firefox i nogle år, kan du huske DOM Inspector. Firefox integrerede udvikler værktøjer er kommet langt siden da.
