13Sep
Firefox webbutvecklare-meny innehåller verktyg för inspektion av sidor, exekvering av godtycklig JavaScript-kod och visning av HTTP-förfrågningar och andra meddelanden. Firefox 10 lade till ett helt nytt inspektionsverktyg och uppdaterad Scratchpad.
Firefox nya webbutvecklare funktioner, i kombination med fantastiska webbutvecklare tillägg som Firebug och Web Developer Toolbar, gör Firefox till en idealisk webbläsare för webbutvecklare. Alla verktyg finns tillgängliga under webbutvecklare i Firefox meny.
Sidinspektör
Kontrollera ett visst element genom att högerklicka på det och välj Inspekter ( eller tryck Q ).Du kan också starta Inspector från Web Developer-menyn.
Du får se en verktygsfält längst ner på skärmen, som du kan använda för att styra inspektören. Det valda elementet kommer att markeras och andra element på sidan blir nedtonade.
Om du vill välja ett nytt element klickar du på Inspekter -knappen på verktygsfältet, håll muspekaren ö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å breadcrumbs i verktygsfältet.
HTML Inspector
Klicka på HTML knappen för att visa HTML-koden för det aktuella valda elementet.
Med HTML-inspektören kan du expandera och kollapsa HTML-taggarna, vilket gör det enkelt att visualisera vid en blick. Om du vill se sidans HTML i en platt fil kan du välja Visa sidkälla från webutvecklarmenyn.
CSS Inspector
Klicka på Style -knappen för att se CSS-reglerna som tillämpas på det valda elementet.
Det finns också en CSS egenskaper panel - 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 i flyg från Regel-panelen. Avmarkera någon av kryssrutorna för att avaktivera en regel, klicka på texten för att ändra en regel eller lägg till egna regler till elementet högst upp i panelen. Här har jag lagt till typsnittsvikt: fet; CSS-regeln, 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öra på den aktuella sidan.
När du har, klicka på Execute -menyn och välj Run. Koden går i den aktuella fliken.
Webbkonsol
Webbkonsolen ersätter den gamla felkonsolen, som har avlägsnats och kommer att tas bort i en framtida version av Firefox.
Konsolen visar fyra olika typer av meddelanden, som du kan växla till siktigheten för - nätverksförfrågningar, CSS-felmeddelanden, JavaScript-felmeddelanden och webbutvecklaremeddelanden.
Vad är ett webbutvecklaremeddelande? Det är ett meddelande som skrivs ut till window.console-objektet. 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 deras JavaScript-kod för att hjälpa till med felsökning.
Uppdatera sidan och du får se de genererade nätverksförfrågningarna och andra meddelanden.
Använd sökrutan för att filtrera meddelandena;klicka på en förfrågan om du vill se mer information.
Från Firefox 10 kan webbkonsolen fungera i samverkan med Sidinspektören. Variabeln $ 0 representerar det aktuella valda objektet i inspektören. Så om du till exempel vill gömma det aktuella valda objektet kan du köra $ 0.style.display = "none" i konsolen.
Om du är intresserad av att lära dig mer om hur du använder konsolen och dess inbyggda funktioner, kolla in webbkonsolen på Mozilla Developer Network-webbplats.
Få fler verktyg
Få fler verktyg -alternativet tar dig till webbutvecklarens verktygsinbyggnadssamling på Mozilla Add-Ons-webbplatsen. Den innehåller några av de bästa tilläggen för webbutvecklare, bland annat Firebug och Web Developer Toolbar.
Om du har använt Firefox i några år kan du komma ihåg DOM Inspector. Firefox integrerade utvecklingsverktyg har kommit långt sedan dess.
