Så här använder du Firefox webbutvecklare
Firefox Web Developer-menyn 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 uppdaterade 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 är tillgängliga under webbutvecklare i Firefox meny.
Sidinspektör
Kontrollera ett specifikt element genom att högerklicka på det och välj Inspektera (eller trycka på Q). Du kan också starta Inspektör från webbutvecklarmenyn.
Du får se en verktygsfält längst ner på skärmen, som du kan använda för att kontrollera inspektören. Det valda elementet kommer att markeras och andra element på sidan dämpas.
Om du vill välja ett nytt element klickar du på Inspektera knappen på verktygsfältet, sväng 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å breadcrumbs i verktygsfältet.
HTML inspektör
Klicka på html knappen för att visa HTML-koden för det aktuella valda elementet.
HTML-inspektören låter dig 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 sidans källa från webbutvecklarmenyn.
CSS Inspector
Klicka på Stil 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 fluga 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 font-weight: bold; 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 fått klickar du på Kör menyn och välj Springa. 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.
I konsolen visas fyra olika typer av meddelanden, som du kan skifta synligheten av - 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 webbkonsolsidan på Mozilla Developer Network-webbplats.
Få fler verktyg
De Få fler verktyg alternativet tar dig till webbutvecklarens tilläggsverktygssamling på Mozilla Add-Ons-webbplatsen. Den innehåller några av de bästa tilläggen för webbutvecklare, inklusive Firebug och verktyget för webbutvecklare.
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.
