DevTools Showdown Edge er F12 vs Firefox vs Chrome

Udviklerværktøjerne til Microsoft Edge, den nye standardbrowser af Windows 10, har et moderne design og et par nye funktioner i forhold til sin forgænger, Internet Explorer 11s F12 Dev Tools.

Spørgsmålet om, hvorvidt Microsoft Edge's dev-værktøjer måler op til deres populære konkurrenter - dev-værktøjerne i andre moderne browsere som Mozilla Firefox og Google Chrome - opstår naturligvis i mange udviklers sind.

I dette indlæg forsøger vi at besvare dette spørgsmål og finde ud af, om Edge's F12 Dev Tools er virkelig værd at bruge. Vi vil sammenligne dets funktioner med dem fra Firefox's Developer Tools og Google Chrome DevTools.

Åbn Dev Værktøjer

Ved at trykke på F12 åbnes udviklerne i alle 3 tilfælde: Udviklerværktøjer i Firefox, DevTools i Chrome og F12 Dev Tools i Microsoft Edge. Dette er tastaturgenvej hvor officielle navn til Edge's F12 Dev Tools kommer fra.

Når du åbner Edge's Dev Tools, kan du straks opleve en af ​​sine mest kendte mangler: i øjeblikket er det umuligt at pinke værktøjerne til et eksisterende vindue. Mens du kan følge, hvad der sker på skærmen på Firefox-udviklerværktøjer og Chrome DevTools, ved at sætte vinduet dev-værktøjer i bunden af ​​skærmen, kan du (i øjeblikket) ikke gøre det samme med Edge.

Microsofts udviklere hævder at de vil løse dette problem i en fremtidig opdatering.

Undersøg DOM

Det DOM Explorer værktøj (Genvej: CTRL + 1) er den første fane i Microsoft Edge's F12 Dev Tools. Dens layout og overordnede design svarer meget til Element fanebladet i Chrome og Inspektør fanebladet i Firefox, men mulighederne er forskelligt.

I Edge kan du se på det gengivne HTML-dokument, de relaterede CSS-stilarter og de hændelseshåndterere, der er registreret på hvert element. Du kan også finde den lille grafik om CSS-boxmodellen med de beregnede værdier, som allerede er velkendte fra de to konkurrerende browsere.

Du kan eksperimentere med CSS regler ved at slette de nuværende og tilføje nye, og du kan se din opsummerede ændringer på en separat subtab kaldet “Ændringer” (den er placeret på venstre side). Sidstnævnte er en funktion, der ikke er bygget i Firefox-udvikler eller Chrome DevTools. Det kan give en hurtig omgang til brugeren, så det er en rigtig nyttig løsning.

Der er nogle funktioner i Firefox Developer Tools, som hverken Edge eller Google Chrome giver i øjeblikket, men kan betydeligt hjælpe en designers liv: Font og Animation analysator værktøjer.

I Edge er der en kølig farvevælger selv om det måske kan kompensere brugeren for det.

Interagere med JavaScript

Det konsol fanebladet (Genvej: CTRL + 2) i Microsoft Edge giver dig mulighed for at interagere med JavaScript på dit websted, ligesom i Firefox og Chrome Dev Tools. Alle tre giver dig mulighed for at følge JavaScript-fejl i realtid, og du kan også analysere dem ved at indtaste din egen indgang.

Konsolværktøjet til Edge's F12 Dev Tools har et godt autofuldførelse funktion Det hjælper dig med kommandoerne, men det ser ud til at være mindre kyndige sammenlignet med den i Firefox og Chrome Dev Tools.

Edge adskiller fejl, advarsler og meddelelser hvilket er en stor hjælp, men ikke noget, som de to andre toolkits ikke har.

Firefox Console synes at være den mest professionelle ud af de tre dev værktøjer, som det også viser separat andre problemer: netværk, CSS, sikkerhedsfejl og logfiler, og giver dig mulighed for at interagere med disse gennem Console interface, ikke kun med JavaScript-fejlene.

Forstå hvad din kode gør

Det Debugger værktøj (genvej: CTRL + 3) hjælper dig med at forstå, hvad der sker med din kode, mens du finder potentielle fejl. Du kan indstille klokkeslæt og breakpoints og se call stacks.

Uretruden viser variable værdier, Callstack-tilstanden viser kæden af ​​funktionsopkald, der førte til den aktuelle tilstand, og breakpoints-tilstanden viser en liste over de brudpunkter du har indstillet.

Edge's F12 Dev Tools lader dig sæt din kode i pause i midten af ​​udførelsen, og træk igennem det line for line. Du har også mulighed for at forbedre læsbarheden af ​​en kompileret eller minificeret JavaScript-fil, og du kan debug forskellige ressourcer (JavaScript, udvidelser osv.) En efter en.

Firefox og Chrome DevTools leverer alle disse funktioner, så Edge tilbyder ikke en usædvanlig fejlfindingsoplevelse, men det giver brugeren et solidt og pålideligt værktøj, som er i niveau med sine konkurrenter.

Tag et kig på browser-server kommunikation

Det Netværk værktøj (genvej: CTRL + 4) er blevet helt omdesignet til Microsoft Edge siden Internet Explorer 11. Med dette praktiske værktøjs hjælp kan du følg kommunikationen mellem serveren og browseren, og inspicere de individuelle anmodninger.

Du kan filtrer resultaterne efter indholdstype såsom stylesheets, billeder, medier, skrifttyper, XHR og mange andre. Du kan også debug AJAX ved hjælp af netværksværktøjet.

Edge og Firefox er fanen Netværk, der har ret lignende funktioner og brugergrænseflader. Begge har en brugervenlig sidebarrude, der giver dig mulighed for at kigge på den valgte ressources HTTP-overskrift, HTTP-krop, parametre, relaterede cookies og tidspunkter for hver enkelt post.

Fanebladet Chrome DevTools 'Netværk har ikke en rude som denne, men hvis du klikker på anmodningerne, kan du se de samme oplysninger. Det er dog en mindre intuitiv løsning.

Spor ned langsomme sider

Det Ydeevne fanebladet (Genvej: CTRL + 5) hjælper dig med at forstå årsagerne til en langsom webside. Med Performance-værktøjet tog Microsoft et stort spring frem ved at kombinere det foregående UI Responsiveness og Profiler værktøjer til at oprette en ende-til-ende visning af alle dine scripting og visualisere ydeevnen.

Dette praktiske værktøj giver dig rapporter om forskellige typer CPU brug, giver dig indsigt i dit websteds ramme maling, og det er også muligt at isolere forskellige brugerscenarier ved at indstille etiketter på tidslinjen.

Under testprocessen fandt vi, at Performance-værktøjet i Edge gav os det mere information om hastighedsproblemer end enten Firefox-udvikler eller Chrome DevTools. Brugergrænsefladen i fanen Performance i Edge er ret vel designet, og hjælper os med mange visuelle signaler, og det er relativt nemt at bruge. Hvis du vil vide mere om, hvordan du bruger det, skal du læse de detaljerede Docs.

Diagnose hukommelsesproblemer

Det Hukommelse værktøj (genvej: CTRL + 6) gør det muligt at find hukommelseslekkage der kan også sænke din webside, desuden kan påvirke stabiliteten af dit websted.

Ved hjælp af en god graf kan du nemt forstå, hvor din hukommelsesforbrug vokser, og du kan lave snapshots på bestemte punkter, der gør det muligt at analysere hukommelsesbrugen. Du kan også sammenlign to snapshots lavet på forskellige punkter af sidens livscyklus for at forstå forskellen mellem dem.

Chrome DevTools har også en god hukommelsesprofil under fanen Profiler, mens Firefox Developer ikke angiver denne funktion som standard, men du kan downloade og installere tilføjelser som denne, hvis du vil. Hukommelsesprofilen til Chrome DevTools er ret avanceret og tilbyder flere funktioner end Edge's, for eksempel det giver dig mulighed for optag JavaScript-tildelinger over tid der kan hjælpe dig med at isolere hukommelseslekkasjer.

Test dit websted på forskellige skærmstørrelser

Det emulering værktøj (genvej: CTRL + 7) giver dig mulighed for at teste dit websted under forskellige omstændigheder. Du kan vælge mellem to browserprofiler, Desktop og Windows 10 Mobile og fra mange forskellige brugeragenter, herunder alle desktop og mobile versioner af Internet Explorer tilbage til IE6, sammen med mange af Edges konkurrenter, Chrome, Firefox, Safari osv..

Det er interessant, at du har mulighed for at tage en se på din side som en Bing Bot. Du kan også emulere en GPS, og sæt forskellige beslutninger og orienteringer.

Firefox-udviklerværktøjer har ikke et værktøj til emulering af enheder, men Chrome DevTools har en så avanceret emulator, at Edge's næppe kan konkurrere med det.

For eksempel har Chrome's emuleringsskærm en nøjagtigt gitter, hvor den emulerede visning er indsat i, og du kan ikke kun vælge mellem browserprofiler og brugeragenter, men også fra mange enheder som f.eks forskellige versioner af iPhone eller Samsung Galaxy og mange andre. Chrome DevTools 'emulator har også en handy Zoom indstilling og du kan teste dit websted på forskellige netværk som 3G, 4G, DSL, WiFi osv.

Resumé

På det hele synes Microsoft Edge's F12 Dev Tools at være overraskende godt. Det giver funktioner, der ligner de populære webudviklingsværktøjer af andre moderne browsere. Der er to områder, hvor Edge's F12 Dev Tools er ret stærk: brugergrænseflade det er virkelig intuitiv, brugervenlig og veldesignet, og ydelsesdiagnostiske værktøjer.

For disse to funktioner kan det være værd at overveje at skifte til, eller i det mindste teste Edge. Den største mangel er manglen på muligheden for at pinke dev værktøjerne til bunden af ​​skærmen, men lad os håbe Microsoft vil hurtigt rette op på dette problem.