Använda Firefox Developer Edition för webbutveckling

Vad du ska skapa

Firefox Developer Edition släpptes av Mozilla under tioårsjubileumsfesten i Firefox förra året. Nyligen har 64-bitars byggnader av Firefox Developer Edition också gjorts tillgängliga för Windows, Linux och Mac OS X. Firefox Developer Edition ger enkel åtkomst till ett brett utbud av utvecklingsverktyg som hjälper till att göra felsökning enkelt och hjälpa till med snabbare och mer professionell utveckling. Du kan hämta den senaste versionen av Firefox Developer Edition härifrån. Låt oss ta en titt på några av de fantastiska funktionerna i Firefox Developer Edition.

WebIDE

Med WebIDE kan du skapa, redigera, testa eller felsöka webbapp genom att köra dem på Firefox OS-simulatorn. Om du skapar en ny webbapp, skapar den också en grundläggande apppanna eller en mer komplett pannplatta för dig tillsammans med en ordentlig katalogstruktur. WebIDE kan du också ansluta Firefox Devtools till många andra webbläsare som Safari (iOS), Firefox (Android) och Chrome (Android).

Responsive Design View

Responsive Design View i Firefox kan åberopas genom att trycka på Ctrl + Shift + M. Du kan kontrollera svaret på din webbapplikation med hjälp av det här verktyget. Det erbjuder ett antal alternativ som att ställa in storleken på den enhet som du vill emulera, rotera skärmen (skift från stående till liggande läge), simulera beredningshändelser och ta skärmdump av webbsidan i det lyhörda läget.

Eyedropper Tool

Eyedropper Tool är ett riktigt fantastiskt verktyg som hjälper dig att känna till det hexadecimala värdet av vilken färg som helst på en webbsida (precis som eyedropper-verktyget i Photoshop). Detta hjälper till att hitta färgen på ett element eller en bild som måste bläddra igenom sin kod via Element Inspector. Genom att klicka på färgkopiorna är det värde för ditt urklipp!

Browserinspektör

Vi har alla arbetat med Element Inspector, nu vad i helvete är Browser Inspector? Nåväl, Browser Inspector används för att felsöka Firefox Browser själv. Om du vill ändra färgen på URL-fältet eller till exempel ändra kurvan för flikarna med oavhängiga resultat, kan du göra det via webbläsarinspektionen. Även om samma resultat kan uppnås via Scratchpad är Browser Inspector stor om du inte är Firefox utvecklare eller om du bara vill testa dina ändringar!

3D-vy

Nu känner jag mig till den mest fantastiska funktionen i Firefox Developer Tools. Du kan titta på 3D-rendering av vilken webbplats som helst, där varje höjdblock representerar ett element, i enlighet med deras häckning i webbkoden. Det här hjälper dig att veta vilka element som är indelade i vilket element. Du kan komma åt 3D-vyn genom att trycka på Ctrl + Shift + C och sedan välja den boxformade ikonen på höger sida av den nyöppnade panelen.

Scratchpad

Du kan öppna Scratchpad genom att trycka på Skift + F4. Scratchpad kan användas för att köra kluster av javascript-kod och redigera, springa och granska resultaten. Det sätt som skiljer sig från webbläsarkonsolen är att webbläsarkonsolen är utformad för att tolka en enda kod kod åt gången, men med Scratchpad kan du arbeta med större bitar av kod som utför det på olika sätt beroende på hur du vill använda produktion.

Slutsats

Firefox Developer Edition innehåller ett brett utbud av verktyg för att skapa, felsöka, övervaka prestanda, felsöka webbläsaren och utvidga DevTools själva. Att förklara alla verktyg ligger utanför ramen för denna artikel. Men du kan kolla på den fullständiga listan med verktyg här. Vi hoppas att introduktionen till ovanstående verktyg hjälper dig i dina dagliga webbutvecklingsjobb.