Hoe de browserconsole te openen in Chrome, Safari, Firefox en Edge

De meest voorkomende reden waarom gebruikers hun browserconsole willen openen, is het identificeren van problemen met het bewerken van pagina's, kapotte interface-elementen, zich niet goed gedragende blokken en andere typen JavaScript-fouten en -conflicten. Elke browser heeft echter zijn eigen snelkoppelingen en stappen waarmee u uiteindelijk de console kunt openen en de achterkant kunt zien van een webpagina die u bezoekt.

Aangezien er slechts vier verschillende browsers zijn met een marktaandeel van meer dan 5% (Chrome, Safari, Edge en Firefox), laten we u meerdere manieren zien om de console op elk van hen te openen. Maar houd er rekening mee dat bij elke browser de elementen en fouten over het algemeen een andere kleurcode hebben en anders zijn gelabeld.

Hoe de console te openen in Google Chrome

In Chrome zijn er eigenlijk drie verschillende manieren om de ingebouwde console te openen.

Ongeacht de Chrome-build die u gebruikt, kunt u een van deze snelkoppelingen gebruiken om de ingebouwde console te openen en te sluiten:

• F12
• Ctrl + Shift + J (Cmd + Option + J op Mac)

Houd er rekening mee dat dezelfde sneltoetsen ook kunnen worden gebruikt om de console te verbergen. Standaard neemt de console van Google Chrome precies de helft van het scherm in beslag, maar je kunt de verhouding eenvoudig aanpassen via de schuifregelaar in het midden en de browser onthoudt de wijziging de volgende keer dat je de console opent.

Als u zich op een specifiek element wilt concentreren, kunt u het eenvoudig met uw muis markeren en er vervolgens met de rechtermuisknop op klikken > Inspecteren. Dit opent de elementen tabblad en Stijlen tabblad van de console, zodat u zich kunt concentreren op het element dat voorhanden is.

U hebt echter ook toegang tot de console via het GUI-menu van Google Chrome. Klik hiervoor op de actieknop in de rechterbovenhoek en ga naar Meer tools> Developer Tools.

Als u zo efficiënt mogelijk wilt werken, volgt hier een lijst met Chrome Console-snelkoppelingen die u kunt gebruiken.

Hoe de console op Google Microsoft Edge te openen

Net als elke andere browser heeft Microsoft Edge ook een console-tool die bedoeld is voor ontwikkelaars die interactieve foutopsporing of ad-hoctests uitvoeren.

Deze tool registreert informatie die is gekoppeld aan de webpagina die wordt bezocht. U vindt informatie over Javascript, netwerkverzoeken en beveiligingsfouten.

De gemakkelijke manier om de Console Tool op Microsoft Edge te openen, is door de vooraf gedefinieerde snelkoppeling (F12-sleutel).

Maar u kunt dit ook doen via het GUI-menu door op de actieknop (linkerbovenhoek) > Meer tools > Developer Tools.

En vergelijkbaar met de functionaliteit van de andere browsers, kunt u met Microsoft Edge ook specifieke elementen inspecteren met behulp van de ingebouwde console. Om dit te doen, selecteer en klik met de rechtermuisknop op een element en kies and Element inspecteren.

Hier is een lijst met enkele handige sneltoetsen die u kunt gebruiken in de ingebouwde console van Microsoft Edge:

Hoe de console te openen in Mozilla Firefox

De ingebouwde console van Mozilla Firefox werkt een beetje anders dan de andere equivalenten die we tot nu toe hebben geanalyseerd. Wat ik hiermee bedoel, is dat het automatisch wordt geopend in een op zichzelf staand venster, in plaats van je browserscherm in tweeën te splitsen.

Dit zorgt voor een productievere aanpak voor mensen met een tweede scherm, maar kan een belemmering vormen voor gebruikers die met één klein scherm moeten werken. (Als u zich in dit scenario bevindt, kunt u de sneltoets Alt + Tab gebruiken om heen en weer te schakelen tussen Firefox en de bijbehorende Browser Console.

Om de ingebouwde browserconsole in Mozilla Firefox te openen, heb je drie opties:

• U kunt de universele snelkoppeling gebruiken - Ctrl + Shift + J (of Cmd + Shift + J op een Mac)
• U kunt het openen vanuit het actiemenu – Door op het actiemenu te klikken > Webontwikkelaar> Browserconsole.

• Of u kunt de browserconsole dwingen om rechtstreeks te openen door Firefox vanaf de opdrachtregel te starten en het argument '-jsconsole' door te geven:

  /Applicaties/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

Opmerking: Firefox bevat ook een webconsole, die erg lijkt op de browserconsole, maar wordt toegepast op een enkel inhoudtabblad in plaats van op de hele browser.

Hoe de console te openen in Google Safari

In tegenstelling tot elke andere browser die we tot nu toe hebben bekeken, is de foutconsole in Safari standaard uitgeschakeld. Daarom moet u een extra stap uitvoeren om deze in uw browser in te schakelen.

Open hiervoor Safari en klik op de Voorkeuren tabblad. Als je eenmaal binnen bent in de Voorkeuren tabblad, klik op het tabblad Geavanceerd en vink het vakje aan dat is gekoppeld aan Toon Ontwikkelen menu in de menubalk.

Nu u de console zichtbaar heeft gemaakt, kunt u deze openen door naar de Ontwikkelen tab bovenaan en klik op Foutconsole weergeven.

Houd er rekening mee dat Safari een dynamische manier heeft om de foutconsole weer te geven. Als het venster klein is wanneer u de console opent, ziet u het in een heel ander venster.

Als u de console in hetzelfde venster als uw pagina wilt openen, moet u ervoor zorgen dat het browservenster de volledige grootte heeft voordat u de Error-console opent.