DevTools Showdown Edge's F12 vs Firefox vs Chrome

De Developer Tools van Microsoft Edge, de nieuwe standaardbrowser van Windows 10 kreeg een modern ontwerp en enkele nieuwe functies in vergelijking met zijn voorganger, de F12 Dev Tools van Internet Explorer 11.

De vraag of de dev-tools van Microsoft Edge zich meten met hun populaire concurrenten - de dev-tools in andere moderne browsers zoals Mozilla Firefox en Google Chrome - komt natuurlijk in de hoofden van veel ontwikkelaars naar voren.

In deze post proberen we deze vraag te beantwoorden en erachter te komen of Edge's F12 Dev Tools echt de moeite waard zijn om te gebruiken. We zullen de functies vergelijken met die van de Developer Tools van Firefox en de DevTools van Google Chrome.

Open de Dev Tools

Als u op F12 drukt, worden de ontwikkelaarstools in alle drie de gevallen geopend: Developer Tools in Firefox, DevTools in Chrome en F12 Dev Tools in Microsoft Edge. Dit is de sneltoets waar de officiële naam van Edge's F12 Dev Tools komt van.

Wanneer u Edge's Dev Tools opent, kunt u tegelijkertijd een van de meest bekende tekortkomingen ervaren: momenteel is dat het geval onmogelijk om de tools vast te pinnen in een bestaand venster. Terwijl u kunt volgen wat er op het scherm gebeurt in Firefox-ontwikkelaarstools en Chrome DevTools door het venster met dev-gereedschappen onder aan het scherm vast te zetten, kunt u (op hetzelfde moment) niet hetzelfde doen met Edge.

De ontwikkelaars van Microsoft beweren dat ze dit probleem zullen oplossen in een toekomstige update.

Inspecteer de DOM

De DOM Explorer tool (sneltoets: CTRL + 1) is het eerste tabblad van Microsoft Edge's F12 Dev Tools. De lay-out en het algehele ontwerp is vrij gelijkaardig aan de Element tabblad van Chrome en de Inspecteur tab in Firefox, maar de mogelijkheden verschillen van mening.

In Edge kunt u een kijkje nemen in het gerenderde HTML-document, de gerelateerde CSS-stijlen en de gebeurtenishandlers die op elk element zijn geregistreerd. U kunt ook de kleine afbeelding over het CSS-boxmodel vinden met de berekende waarden die al bekend zijn uit de twee concurrerende browsers.

Jij kan experimenteer met CSS-regels door huidige te verwijderen en nieuwe toe te voegen, en je kunt je samengevat veranderingen op een afzonderlijk subtab genoemd “Veranderingen” (het bevindt zich aan de linkerkant). Dit laatste is een functie die niet is ingebouwd in Firefox Developer noch Chrome DevTools. Het kan de gebruiker een korte samenvatting geven, dus het is echt een nuttige optie.

Er zijn enkele functies in de Firefox-ontwikkelaarstools die noch Edge, noch Google Chrome momenteel bieden, maar die het leven van een ontwerper aanzienlijk kunnen helpen: de tools voor het analyseren van het lettertype en de animatie.

In Edge is er een coole kleurenkiezer hoewel dat de gebruiker er enigszins voor kan compenseren.

Interactie met JavaScript

De Troosten tab (snelkoppeling: CTRL + 2) in Microsoft Edge stelt u in staat om te werken met het JavaScript van uw site, net als in Firefox en Chrome Dev Tools. Met alle drie kunt u JavaScript-fouten in realtime volgen en kunt u ze ook analyseren door uw eigen invoer in te voeren.

De console-tool van Edge's F12 Dev Tools heeft een mooie autocomplete-functie die je helpt met de commando's, hoe het ook lijkt te zijn minder goed geïnformeerd vergeleken met die in Firefox en Chrome Dev Tools.

Rand scheidt fouten, waarschuwingen en berichten dat is een grote hulp, maar niet iets dat de andere twee toolkits niet hebben.

Firefox's console lijkt de meest professionele van de drie dev-tools, evenals het ook toont afzonderlijk andere soorten problemen: netwerk, CSS, beveiligingsfouten en logboekberichten, en stelt je in staat om ermee te communiceren via de Console-interface, niet alleen met de JavaScript-fouten.

Begrijp wat uw code doet

De Debugger tool (sneltoets: CTRL + 3) helpt u te begrijpen wat er met uw code gebeurt terwijl u potentiële fouten ontdekt. U kunt horloges en breekpunten instellen en oproepstapels bekijken.

Het paneel Horloges geeft variabele waarden weer, de Callstack-modus toont de reeks functieaanroepen die naar de huidige status leidde, en de Breakpoints-modus toont een lijst van de breekpunten die u hebt ingesteld.

Edge's F12 Dev Tools laat je pauzeer je code in het midden van de uitvoering en stap voor stap door regel. U hebt ook de mogelijkheid om de leesbaarheid van een gecompileerd of verkleind JavaScript-bestand verbeteren, en jij kan debuggen van verschillende bronnen (JavaScript, extensies, etc.) één voor één.

Firefox en Chrome DevTools bieden al deze functionaliteiten, dus Edge biedt geen uitzonderlijke foutopsporingservaring, maar biedt de gebruiker een solide en betrouwbare tool die vergelijkbaar is met zijn concurrenten.

Kijk eens naar de browser-servercommunicatie

De Netwerk tool (sneltoets: CTRL + 4) is volledig vernieuwd voor Microsoft Edge sinds Internet Explorer 11. Met behulp van deze handige tool kun je volg de communicatie tussen de server en de browser, en inspecteer de individuele verzoeken.

Jij kan filter de resultaten op inhoudstype zoals stijlbladen, afbeeldingen, media, lettertypen, XHR en vele anderen. Je kan ook debuggen AJAX met behulp van de Network-tool.

Edge's en Firefox's Network-tab bieden behoorlijk vergelijkbare mogelijkheden en gebruikersinterface. Beide hebben een gebruikersvriendelijk zijbalkvenster waarmee u de HTTP-header, HTTP-body, parameters, gerelateerde cookies en timings van de geselecteerde resource per item kunt bekijken.

Chrome DevTools Het tabblad 'Netwerk' heeft geen deelvenster zoals dit, maar als u de verzoeken één voor één klikt, ziet u dezelfde informatie. Het is echter een minder intuïtieve oplossing.

Langzame pagina's opsporen

De Prestatie tab (sneltoets: CTRL + 5) helpt u de redenen achter een trage webpagina te begrijpen. Met de Performance-tool deed Microsoft een enorme stap voorwaarts door de vorige te combineren UI-reactievermogen en profiler tools om een ​​end-to-end beeld van al uw scripting te creëren en de prestaties te visualiseren.

Deze handige tool biedt u rapporten over verschillende soorten CPU-gebruik, geeft u inzicht in de kaderverf van uw site, en het is ook mogelijk om isoleer verschillende gebruikersscenario's door labels in te stellen op de tijdlijn.

Tijdens het testproces hebben we vastgesteld dat de Performance-tool in Edge ons heeft voorzien meer informatie over snelheidsproblemen dan Firefox Developer of Chrome DevTools. De gebruikersinterface van het tabblad Prestaties in Edge is vrij goed ontworpen en helpt ons met veel visuele aanwijzingen, en het is relatief eenvoudig te gebruiken. Als je meer wilt weten over hoe je het kunt gebruiken, lees dan de gedetailleerde Documenten.

Diagnose van geheugenproblemen

De Geheugen tool (snelkoppeling: CTRL + 6) maakt het mogelijk om vind geheugenlekken dat kan ook uw webpagina vertragen, bovendien kan dat invloed hebben op de stabiliteit van uw site.

Met behulp van een mooie grafiek kun je gemakkelijk begrijpen waar je geheugengebruik groeit, en kun je snapshots maken op specifieke punten die het mogelijk maken om het geheugengebruik te analyseren. Je kan ook vergelijk twee snapshots gemaakt op verschillende punten van de levenscyclus van de pagina om het verschil tussen hen te begrijpen.

Chrome DevTools hebben ook een leuke geheugenprofiler op het tabblad Profielen, terwijl Firefox Developer deze functie standaard niet biedt, maar u kunt add-ons op deze manier downloaden en installeren als u dat wilt. De geheugenprofiler van Chrome DevTools is vrij geavanceerd en biedt meer functies dan die van Edge, u kunt er bijvoorbeeld mee werken noteer JavaScript-objecttoewijzingen in de tijd die u kan helpen geheugenlekken te isoleren.

Test uw site op verschillende schermformaten

De wedijver tool (sneltoets: CTRL + 7) stelt u in staat om uw site te testen onder verschillende omstandigheden. U kunt kiezen uit twee browserprofielen, Desktop en Windows 10 Mobile en uit vele verschillende user-agents, waaronder alle desktop- en mobiele versies van Internet Explorer terug naar IE6, naast veel concurrenten van Edge, Chrome, Firefox, Safari, enz..

Het is interessant dat je de optie hebt om een ​​te nemen kijk naar je pagina als een Bing Bot. Je kan ook emuleren een GPS, En instellen verschillende resoluties en oriëntaties.

Firefox-ontwikkelaarstools heeft geen device-emulatietool, maar Chrome DevTools hebben zo'n geavanceerde emulator dat Edge er nauwelijks tegen kan concurreren.

Het Chrome-emulatiescherm heeft bijvoorbeeld een nauwkeurig raster waarin de geëmuleerde weergave wordt ingevoegd, en u kunt niet alleen kiezen uit browserprofielen en user-agents, maar ook uit vele apparaten zoals de verschillende versies van iPhone of Samsung Galaxy en vele anderen. De emulator van Chrome DevTools is ook handig Zoom optie en u kunt uw site testen op verschillende netwerken zoals 3G, 4G, DSL, WiFi, enz.

Samenvatting

Over het algemeen lijkt het erop dat Microsoft Edge's F12 Dev Tools verrassend goed is. Het biedt functies die sterk lijken op de populaire webontwikkelingstoolkits van andere moderne browsers. Er zijn twee gebieden waar Edge's F12 Dev Tools behoorlijk sterk is: de gebruikersomgeving dat is echt intuïtief, gebruiksvriendelijk en goed ontworpen, en de prestatie-diagnostische hulpmiddelen.

Voor deze twee functies kan het de moeite waard zijn om over te schakelen naar, of ten minste testen van Edge. De grootste tekortkoming is het ontbreken van de mogelijkheid om de dev-tools onder aan het scherm vast te zetten, maar laten we hopen dat Microsoft dit probleem snel zal oplossen.