Edge Developer Tools in vergelijking met Chrome Developer Tools

In deze handleiding leer je de Microsoft Edge Developer Tools kennen, die op veel manieren vergelijkbaar zijn met de Google Chrome Developer Tools. Je zult ontdekken hoe je de tools kunt openen en effectief kunt gebruiken, evenals de verschillen tussen de twee browserontwikkelingstools.

Belangrijkste inzichten

De Edge-DevTools bieden een bijna identieke gebruikersinterface als de Chrome-DevTools voor wat betreft de basisfuncties. De verschillen liggen voornamelijk in de gebruikersinterface en enkele extra functies, terwijl de kernfuncties en sneltoetsen grotendeels hetzelfde zijn gebleven.

Stapsgewijze handleiding

Om de Edge-DevTools te openen, zijn er verschillende opties beschikbaar. Een manier is door op F12 te drukken. Als je op een Mac werkt, kun je de sneltoets Command + Option + I gebruiken. Windows-gebruikers kunnen ook de combinatie Control + Shift + I gebruiken. Als je de DevTools via het contextmenu wilt openen, klik je met de rechtermuisknop op de header van de webpagina en kies je "Onderzoeken".

De interface van de Edge-DevTools zal meteen vertrouwd aanvoelen als je al met de Chrome-DevTools hebt gewerkt. De tabbladen zijn er, de pictogrammen zien er iets anders uit, en de extra tools zijn bereikbaar via een "Plus"-symbool in de bovenste balk. In Chrome waren deze extra tools toegankelijk via het hoofdmenu.

Als je een nieuw tabblad aan de Edge-DevTools wilt toevoegen, klik dan simpelweg op het "Plus"-symbool. Zo kun je bijvoorbeeld de animatietool toevoegen. Deze wordt dan bovenaan de tabbalk weergegeven, net zoals in de Chrome-ontwikkeltools.

Een "Welkom"-tabblad is ook aanwezig, vergelijkbaar met de "Wat is nieuw"-pagina in Chrome. Hier kun je een overzicht krijgen van de functies van de DevTools. Ik raad je aan om dit tabblad door te nemen om eventueel handige tips en trucs te ontdekken die we nog niet in de cursus hebben behandeld.

Een andere handige functie van de Edge-DevTools is de mogelijkheid om de tabbalk naar links te verplaatsen. Dit maakt een verticale rangschikking van de tabbladen mogelijk. De pictogrammen worden dan weergegeven als tooltips, wat ruimte bespaart en meer ruimte biedt voor de tools zelf.

De designtools zelf kunnen worden aangepast via verschillende instellingen die lijken op de Chrome-instellingen. Je kunt de uitklapmenu's, de documentatie en de activiteitenbalk aanpassen. Zo behoud je je vertrouwde werkomgeving.

Een van de weinige verschillen is het extra symbool voor Azure DevOps in de Edge-Tools, dat niet aanwezig is in Chrome. Dit is vooral handig voor ontwikkelaars die in een Azure-omgeving werken.

Zodra je in de respectievelijke tabbladen bent, zul je merken dat de structuur en functies in beide tools bijna identiek zijn. Je kunt de stijlen, berekende lay-outs en alles wat je gewend bent in Chrome ook in Edge gebruiken.

De feature-updates kunnen echter enigszins verschillen. Als Chrome een nieuwe functie toevoegt, kan het zijn dat deze in Edge iets later beschikbaar is of andersom. Daarom is het verstandig om regelmatig te controleren welke nieuwe functies aan de verschillende tools worden toegevoegd.

Dat was eigenlijk alles wat je moet weten over de Edge-DevTools. Als je al bekend bent met de Chrome Developer Tools, zul je je ook snel kunnen vinden in de Edge Dev Tools.

Samenvatting

In deze handleiding heb je de overeenkomsten en verschillen tussen de Google Chrome en Microsoft Edge Developer Tools geleerd. Je weet nu hoe je de tools opent en welke functies tot je beschikking staan om efficiënt aan je webprojecten te werken.