DevTools Showdown Edge er F12 vs Firefox vs Chrome

Utviklerverktøyene til Microsoft Edge, den nye standardleseren til Windows 10, har et moderne design og noen få nye funksjoner sammenlignet med forgjengeren, Internet Explorer 11s F12 Dev Tools.

Spørsmålet om Microsoft Edge's dev-verktøy måler opp til sine populære konkurrenter - dev-verktøyene i andre moderne nettlesere som Mozilla Firefox og Google Chrome - oppstår naturlig i mange utviklers sinn.

I dette innlegget prøver vi å svare på dette spørsmålet, og finne ut om Edge's F12 Dev Tools er virkelig verdt å bruke. Vi vil sammenligne funksjonene til Firefox-utviklerverktøyene og Google Chrome DevTools.

Åpne Dev-verktøyene

Ved å trykke F12 åpnes utviklerverktøyene i alle 3 tilfeller: Utviklerverktøy i Firefox, DevTools i Chrome og F12 Dev Tools i Microsoft Edge. Dette er tastatursnarveien der offisielt navn til Edge's F12 Dev Tools kommer fra.

Når du åpner Edges Dev Tools, kan du umiddelbart oppleve en av sine mest kjente mangler: for øyeblikket er det umulig å knytte verktøyene til et eksisterende vindu. Mens du kan følge hva som skjer på skjermen på Firefox Utviklerverktøy og Chrome DevTools ved å peke på verktøylinjen til bunnen av skjermen, kan du (for øyeblikket) ikke gjøre det samme med Edge.

Microsofts utviklere hevder at de vil løse dette problemet i en fremtidig oppdatering.

Kontroller DOM

De DOM Explorer verktøyet (snarvei: CTRL + 1) er den første kategorien i Microsoft Edge F12 Dev Tools. Dens utforming og overordnede design er ganske lik den Element fanen i Chrome og Inspektør fanen i Firefox, men egenskapene er forskjellig.

I kant kan du se på det gjengitte HTML-dokumentet, de tilhørende CSS-stilene og hendelseshåndteringene som er registrert på hvert element. Du kan også finne den lille grafikken om CSS-boksemodellen med de beregnede verdiene, allerede kjent fra de to konkurrerende nettleserne.

Du kan eksperimentere med CSS-regler ved å slette nåværende og legge til nye, og du kan se din oppsummerte endringer på en separat subtab kalt “Endringer” (den ligger på venstre side). Sistnevnte er en funksjon som ikke er bygget i Firefox-utvikler eller Chrome DevTools. Det kan gi en rask tilbakemelding til brukeren, så det er et veldig nyttig alternativ.

Det er noen funksjoner i Firefox Utviklerverktøy som verken Edge eller Google Chrome for øyeblikket gir, men kan betydelig bidra til livet til en designer: Font- og animasjonsanalysatorverktøyene.

I kant er det a kul fargeplukker selv om det kan noe kompensere brukeren for det.

Interagere med JavaScript

De Console fanen (snarvei: CTRL + 2) i Microsoft Edge lar deg samhandle med JavaScript på nettstedet ditt, akkurat som i Firefox og Chrome Dev Tools. Alle tre lar deg følge JavaScript-feil i sanntid, og du kan også analysere dem ved å skrive inn din egen inngang.

Konsolverktøyet til Edge's F12 Dev Tools har det fint autofullfør funksjonen Det hjelper deg med kommandoene, men det ser ut til å være mindre kunnskapsrik sammenlignet med den i Firefox og Chrome Dev Tools.

Kant skiller feil, advarsler og meldinger som er en stor hjelp, men ikke noe som de andre to toolkits ikke har.

Firefox-konsollen synes å være den mest profesjonelle ut av de tre dev-verktøyene, som det også separat viser andre typer problemer: nettverk, CSS, sikkerhetsfeil og loggingsmeldinger, og lar deg samhandle med disse gjennom Konsollgrensesnitt, ikke bare med JavaScript-feilene.

Forstå hva koden din gjør

De debugger verktøyet (snarvei: CTRL + 3) hjelper deg å forstå hva som skjer med koden din mens du finner potensielle feil. Du kan angi klokkeslett og brytepunkter, og se ringestabler.

Klokkeruten viser variable verdier, Callstack-modusen viser kjeden av funksjonsanrop som førte til gjeldende tilstand, og brytepunktsmodus viser en liste over bruddpunkter du har satt.

Edges F12 Dev Tools lar deg pause koden din i midten av utførelsen, og gå gjennom den linje for linje. Du har også muligheten til å forbedre lesbarheten til en kompilert eller minifisert JavaScript-fil, og du kan feilsøk ulike ressurser (JavaScript, utvidelser, etc.) en etter en.

Firefox og Chrome DevTools gir alle disse funksjonalitetene, så Edge tilbyr ikke en eksepsjonell feilsøkingsopplevelse, men gir brukeren et solid og pålitelig verktøy som er i nivå med sine konkurrenter.

Ta en titt på nettleser-serverkommunikasjonen

De Network verktøyet (snarvei: CTRL + 4) har blitt fullstendig redesignet for Microsoft Edge siden Internet Explorer 11. Med hjelp av dette praktiske verktøyet kan du følg kommunikasjonen mellom serveren og nettleseren, og inspiser de individuelle forespørslene.

Du kan filtrer resultatene etter innholdstype for eksempel stilark, bilder, media, skrifter, XHR og mange andre. Du kan også feilsøke AJAX ved hjelp av nettverksverktøyet.

Edge og Firefox nettverksfane har ganske like muligheter og brukergrensesnitt. Begge har en brukervennlig sidebarrute som lar deg se på den valgte ressursens HTTP-header, HTTP-kropp, parametere, relaterte informasjonskapsler og timings for hver enkelt post.

Nettverk-fanen for Chrome DevTools har ikke en rute slik som denne, men hvis du klikker på forespørsler en-for-en, kan du se den samme informasjonen. Det er imidlertid en mindre intuitiv løsning.

Spor ned langsomme sider

De Opptreden fanen (snarvei: CTRL + 5) hjelper deg å forstå årsakene til en sakte nettside. Med ytelsesverktøyet tok Microsoft et stort sprang fremover ved å kombinere det forrige UI Responsiveness og Profiler verktøy for å lage en end-to-end visning av alle skriptene dine og visualisere ytelsen.

Dette praktiske verktøyet gir deg rapporter om forskjellige typer CPU bruk, gir deg innsikt i sidens rammemaling, og det er også mulig å isolere forskjellige brukerscenarier ved å sette etiketter på tidslinjen.

Under testprosessen fant vi ut at ytelsesverktøyet i Edge ga oss med mer informasjon om hastighetsproblemer enn enten Firefox-utvikler eller Chrome DevTools. Brukergrensesnittet til ytelsesfanen i Edge er ganske godt designet, og hjelper oss med mange visuelle signaler, og det er relativt enkelt å bruke. Hvis du vil vite mer om hvordan du bruker det, kan du lese de detaljerte dokumentene.

Diagnose minneproblemer

De Hukommelse verktøy (snarvei: CTRL + 6) gjør det mulig å finn minnelekkasjer som også kan bremse din nettside, dessuten kan påvirke stabiliteten av nettstedet ditt.

Ved hjelp av en fin graf kan du enkelt forstå hvor minnesbruken din vokser, og du kan lage stillbilder på bestemte punkter som gjør det mulig å analysere minnebruk. Du kan også sammenlign to snapshots laget på forskjellige punkter av sidens livssyklus for å forstå forskjellen mellom dem.

Chrome DevTools har også en fin minneprofil under fanen Profiler, mens Firefox Developer ikke angir denne funksjonen som standard, men du kan laste ned og installere tillegg som dette hvis du vil. Hukommelsesprofilen til Chrome DevTools er ganske avansert og tilbyr flere funksjoner enn Edge, for eksempel, det lar deg registrer JavaScript-tildelinger over tid som kan hjelpe deg med å isolere minnelekkasjer.

Test nettstedet ditt på forskjellige skjermstørrelser

De emulering verktøyet (snarvei: CTRL + 7) gjør at du kan teste nettstedet ditt under forskjellige forhold. Du kan velge mellom to nettleserprofiler, Desktop og Windows 10 Mobile og fra mange forskjellige brukeragenter, inkludert alle desktop- og mobilversjoner av Internet Explorer, tilbake til IE6, sammen med mange av Edges konkurrenter, Chrome, Firefox, Safari, etc..

Det er interessant at du har muligheten til å ta en se på siden din som en Bing Bot. Du kan også emulere en GPS, og sett forskjellige oppløsninger og orienteringer.

Utviklerverktøy for Firefox har ikke et verktøy for emulering av enheter, men Chrome DevTools har en sofistikert emulator som Edge kan knapt konkurrere med.

For eksempel har Chrome's emuleringsskjerm en nøyaktig rutenett der den emulerte visningen er satt inn i, og du kan ikke bare velge mellom nettleserprofiler og brukeragenter, men også fra mange enheter som forskjellige versjoner av iPhone eller Samsung Galaxy og mange andre. Chrome DevTools 'emulator har også en hendig Zoom-alternativet og du kan teste nettstedet ditt på forskjellige nettverk som 3G, 4G, DSL, WiFi, etc..

Sammendrag

I det hele tatt synes Microsoft Edge's F12 Dev Tools å være overraskende bra. Det gir funksjoner som ligner på de populære webutviklingsverktøyene til andre moderne nettlesere. Det er to områder hvor Edge F12 Dev Tools er ganske sterk: brukergrensesnitt det er egentlig intuitivt, brukervennlig og godt designet, og ytelsesdiagnostiske verktøy.

For disse to funksjonene kan det være verdt å vurdere å bytte til, eller i det minste teste Edge. Den største mangelen er mangelen på muligheten til å knytte dev verktøyene til bunnen av skjermen, men la oss håpe Microsoft vil raskt fikse dette problemet.