DevTools Showdown Edge är F12 vs Firefox vs Chrome

Utvecklarverktyg för Microsoft Edge, den nya standardwebbläsaren i Windows 10, har en modern design och några nya funktioner jämfört med föregångaren, Internet Explorer 11s F12 Dev Tools.

Frågan om Microsoft Edge's dev-verktyg mäter upp till sina populära konkurrenter - dev-verktygen i andra moderna webbläsare som Mozilla Firefox och Google Chrome - uppstår naturligtvis i många utvecklare sinnen.

I det här inlägget försöker vi svara på den här frågan och ta reda på om Edge's F12 Dev Tools är verkligen värda att använda. Vi kommer att jämföra funktionerna med Firefox utvecklingsverktyg och Google Chrome DevTools.

Öppna Dev-verktygen

Genom att trycka på F12 öppnas utvecklingsverktygen i alla tre fall: Utvecklingsverktyg i Firefox, DevTools i Chrome och F12 Dev Tools i Microsoft Edge. Det här är tangentbordsgenväg där officiellt namn på Edge's F12 Dev Tools kommer från.

När du öppnar Edge's Dev Tools kan du genast uppleva en av sina mest kända brister: för närvarande är det omöjligt att stifta verktygen till ett befintligt fönster. Medan du kan följa vad som händer på skärmen på Firefox-utvecklarverktyg och Chrome DevTools genom att fästa dev-verktygsfönstret längst ned på skärmen kan du (för närvarande) inte göra detsamma med Edge.

Microsofts utvecklare hävdar att de kommer att åtgärda problemet i en framtida uppdatering.

Inspektera DOM

De DOM Explorer verktyg (Genväg: CTRL + 1) är den första fliken i Microsoft Edge F12 Dev Tools. Dess layout och övergripande design är ganska lik den Element fliken i Chrome och Inspektör fliken i Firefox, men egenskaperna är olika.

I Edge kan du titta på det gjorda HTML-dokumentet, relaterade CSS-format och händelseshanterare som är registrerade för varje element. Du kan också hitta den lilla grafiken om CSS-boxmodellen med de beräknade värdena, som redan är kända från de två konkurrerande webbläsarna.

Du kan Experimentera med CSS-regler genom att radera aktuella och lägga till nya, och du kan se din sammanfattade förändringar på en separat subtab som heter “Förändringar” (den ligger på vänster sida). Den senare är en funktion som inte är uppbyggd i Firefox-utvecklare eller Chrome DevTools. Det kan ge en snabb omgång till användaren, så det är ett riktigt användbart alternativ.

Det finns några funktioner i Firefox-utvecklingsverktyg som varken Edge eller Google Chrome för närvarande tillhandahåller, utan kan betydligt hjälpa en designers liv: Teckensnittet och animationsanalysverktygen.

I Edge finns det en cool färgplockare även om det kanske kan kompensera användaren för det.

Interagera med JavaScript

De Trösta fliken (Genväg: CTRL + 2) i Microsoft Edge kan du interagera med JavaScript för din webbplats, precis som i Firefox och Chrome Dev Tools. Alla tre tillåter dig att följa JavaScript-fel i realtid och du kan också analysera dem genom att skriva in din egen ingång.

Konsolverktyget för Edge's F12 Dev Tools har ett bra autofullständig funktion Det hjälper dig med kommandona, men det verkar vara mindre kunniga jämfört med den i Firefox och Chrome Dev Tools.

Kant separerar fel, varningar och meddelanden vilket är en stor hjälp, men inte något som de andra två verktygen inte har.

Firefox-konsolen verkar vara den mest professionella av de tre dev-verktygen, som den också separat visar andra typer av problem: nätverk, CSS, säkerhetsfel och loggningsmeddelanden, och låter dig interagera med dessa genom Konsolgränssnitt, inte bara med JavaScript-fel.

Förstå vad din kod gör

De debugger verktyg (Genväg: CTRL + 3) hjälper dig att förstå vad som händer med din kod när du hittar potentiella fel. Du kan ställa in klockor och brytpunkter och visa samtalstaplar.

Klockans ruta visar variabla värden, Callstack-läget visar kedjan av funktionssamtal som ledde till det aktuella läget och brytpunktsläget visar en lista över de brytpunkter du har ställt in.

Edge's F12 Dev Tools låter dig pausa din kod i mitten av körning, och gå igenom den linjen för rad. Du har också möjlighet att förbättra läsbarheten för en kompilerad eller miniverad JavaScript-fil, och du kan felsöka olika resurser (JavaScript, tillägg etc.) en efter en.

Firefox och Chrome DevTools ger alla dessa funktioner, så Edge erbjuder inte en exceptionell debugging-upplevelse, men det ger användaren ett solidt och pålitligt verktyg som ligger i nivå med sina konkurrenter.

Ta en titt på webbläsaren-serverkommunikationen

De Nätverk verktyget (Genväg: CTRL + 4) har fullständigt omdesignats för Microsoft Edge sedan Internet Explorer 11. Med hjälp av det här praktiska verktyget kan du följ kommunikationen mellan servern och webbläsaren, och inspektera de enskilda begäran.

Du kan filtrera resultaten efter innehållstyp som stylesheets, bilder, media, typsnitt, XHR och många andra. Du kan också felsöka AJAX med hjälp av nätverksverktyget.

Edge och Firefox-fliken Network erbjuder ganska lika funktioner och användargränssnitt. Båda har en användarvänlig sidopanel som gör att du kan ta en titt på den valda resursens HTTP-huvud, HTTP-kropp, parametrar, relaterade cookies och tidpunkter för varje objekt.

Tablet för Chrome DevTools 'Network har ingen rutan så här, men om du klickar på förfrågningarna en för en kan du se samma information. Det är dock en mindre intuitiv lösning.

Spåra långsamma sidor

De Prestanda fliken (Genväg: CTRL + 5) hjälper dig att förstå orsakerna bakom en långsam webbsida. Med Performance-verktyget tog Microsoft ett stort steg framåt genom att kombinera det föregående UI Responsiveness och Profiler verktyg för att skapa en end-to-end-vy över alla dina skript och visualisera prestanda.

Detta praktiska verktyg ger dig rapporter om olika typer av CPU-användning, ger dig insikt i din webbplatss ramfärg, och det är också möjligt att isolera olika användarscenarier genom att ställa in etiketter på tidslinjen.

Under testprocessen fann vi att Performance-verktyget i Edge gav oss med Mer information om hastighetsproblem än antingen Firefox-utvecklare eller Chrome DevTools. Användargränssnittet i fliken Prestanda i Edge är ganska väl utformat, vilket hjälper oss med många visuella signaler, och det är relativt enkelt att använda. Om du vill veta mer om hur du använder det läser du de detaljerade dokumenten.

Diagnosera minnesproblem

De Minne verktyg (Genväg: CTRL + 6) gör det möjligt att hitta minnesläckor som också kan sakta ner din webbsida, dessutom kan påverka stabiliteten av din webbplats.

Med hjälp av ett bra diagram kan du enkelt förstå var din minnesanvändning växer, och du kan göra snapshots på specifika punkter som gör det möjligt att analysera minnesanvändningen. Du kan också jämför två snapshots gjorda på olika punkter av sidans livscykel för att förstå skillnaden mellan dem.

Chrome DevTools har också en trevlig minnesprofil under fliken Profiler, medan Firefox Developer inte tillhandahåller den här funktionen som standard, men du kan ladda ner och installera tillägg så här om du vill. Minnesprofilen för Chrome DevTools är ganska avancerad och erbjuder fler funktioner än Edge, till exempel det låter dig göra det registrera JavaScript-tilldelningar över tiden som kan hjälpa dig att isolera minneläckor.

Testa din webbplats på olika skärmstorlekar

De Tävlan verktyg (Genväg: CTRL + 7) gör att du kan testa din webbplats under olika omständigheter. Du kan välja mellan två webbläsarprofiler, skrivbord och Windows 10 mobil och från många olika användaragenter inklusive alla skrivbords- och mobilversioner av Internet Explorer tillbaka till IE6, tillsammans med många av Edges konkurrenter, Chrome, Firefox, Safari, etc..

Det är intressant att du har möjlighet att ta en titta på din sida som en Bing Bot. Du kan också emulera en GPS, och ställa in olika upplösningar och orienteringar.

Utvecklarverktyg för Firefox har inte ett verktyg för enhetsemulering, men Chrome DevTools har en sofistikerad emulator som Edge sällan kan konkurrera med.

Exempelvis har Chrome-emuleringsskärmen en exakt rutnät där den emulerade vyn är infogad i, och du kan inte bara välja mellan webbläsarprofiler och användaragenter, men även från många enheter, t.ex. olika versioner av iPhone eller Samsung Galaxy och många andra. Chrome DevTools emulatorn har också en praktisk funktion Zoom-alternativet och du kan testa din webbplats på olika nätverk som 3G, 4G, DSL, WiFi, etc..

Sammanfattning

På det hela taget verkar Microsoft Edge's F12 Dev Tools vara fantastiskt bra. Det ger funktioner som liknar de populära webbutvecklingsverktygen från andra moderna webbläsare. Det finns två områden där Edge's F12 Dev Tools är ganska stark: användargränssnitt det är verkligen intuitivt, användarvänligt och väldesignat, och den prestanda diagnostiska verktyg.

För dessa två funktioner kan det vara värt att överväga att byta till, eller åtminstone testa Edge. Den största bristen är bristen på möjligheten att stifta dev-verktygen längst ner på skärmen, men vi hoppas att Microsoft snabbt kommer att åtgärda problemet.