Firefox-menyn Web Developer innehåller verktyg för att inspektera sidor, köra godtycklig JavaScript-kod och visa HTTP-förfrågningar och andra meddelanden. Firefox 10 lade till ett helt nytt inspektörverktyg och uppdaterade Scratchpad.
Firefox nya funktioner för webbutvecklare, i kombination med fantastiska tillägg för webbutvecklare som Firebug och Web Developer Toolbar, gör Firefox till en idealisk webbläsare för webbutvecklare. Alla verktyg är tillgängliga under webbutvecklare i Firefox-menyn.
Sidinspektör
Inspektera ett specifikt element genom att högerklicka på det och välja Inspektera (eller tryck på F ). Du kan också starta Inspektör från webbutvecklarmenyn.
Du ser ett verktygsfält längst ner på skärmen som du kan använda för att kontrollera inspektören. Ditt valda element kommer att markeras och andra element på sidan nedtonas.
Om du vill välja ett nytt element klickar du på Inspektera i verktygsfältet, håll musen över sidan och klicka på ditt element. Firefox markerar elementet under markören.
Du kan navigera mellan föräldra- och barnelement genom att klicka på brödsmulorna i verktygsfältet.
HTML-inspektör
Klicka på html för att visa HTML-koden för det valda elementet.
HTML-inspektören låter dig expandera och kollapsa HTML-taggarna, vilket gör det enkelt att visualisera en överblick. Om du vill se sidans HTML i en platt fil kan du välja Visa sidans källa från webbutvecklarmenyn.
CSS-inspektör
Klicka på Stil för att se CSS-reglerna som tillämpas på det valda elementet.
Det finns också en CSS-egenskapspanel - växla mellan de två genom att klicka på Regler och Egenskaper knappar. För att hjälpa dig att hitta specifika egenskaper innehåller egenskapspanelen en sökruta.
Du kan redigera elementets CSS direkt från panelen Regler. Avmarkera någon av kryssrutorna för att inaktivera en regel, klicka på texten för att ändra en regel eller lägg till dina egna regler i elementet högst upp i rutan. Här har jag lagt till font-vikt: fet; CSS-regel, vilket gör elementets text fet.
JavaScript Scratchpad
Scratchpad såg också en uppdatering med Firefox 10 och innehåller nu syntaxmarkering. Du kan skriva in JavaScript-kod för att köras på den aktuella sidan.
När du har klickat på Kör menyn och välj Springa. Koden körs på den aktuella fliken.
Webbkonsol
Webkonsolen ersätter den gamla felkonsolen, som har upphört att tas bort och kommer att tas bort i en framtida version av Firefox.
Konsolen visar fyra olika typer av meddelanden, som du kan växla synlighet för - nätverksförfrågningar, CSS-felmeddelanden, JavaScript-felmeddelanden och webbutvecklarmeddelanden.
Vad är ett webbutvecklarmeddelande? Det är ett meddelande som skrivs ut på fönstret window.console. Till exempel kan vi köra window.console.log (“Hello World”); JavaScript-kod i Scratchpad för att skriva ut ett utvecklarmeddelande till konsolen. Webbutvecklare kan integrera dessa meddelanden i sin JavaScript-kod för att hjälpa till med felsökning.
Uppdatera sidan så ser du de genererade nätverksförfrågningarna och andra meddelanden.
Använd sökrutan för att filtrera meddelandena; klicka på en begäran om du vill se mer information.
Från och med Firefox 10 kan webbkonsolen fungera tillsammans med Page Inspector. Variabeln $ 0 representerar det för närvarande valda objektet i inspektören. Så om du till exempel vill dölja det valda objektet kan du köra $ 0.style.display = ”none” i konsolen.
Om du är intresserad av att lära dig mer om att använda konsolen och dess inbyggda funktioner, kolla in Web Console-sida på Mozillas webbplats för utvecklarnätverk.
Få fler verktyg
De Få fler verktyg alternativet tar dig till webbutvecklarens tilläggssamling för verktygslådan på Mozilla Add-Ons-webbplatsen. Den innehåller några av de bästa tillägg för webbutvecklare , inklusive Firebug och verktygsfältet för webbutvecklare.
Om du har använt Firefox i några år kanske du kommer ihåg DOM Inspector. Firefox integrerade utvecklingsverktyg har kommit långt sedan dess.
