Geen enkele website is perfect gebouwd. Zoals alle producten die door mensen worden gemaakt, maken codefouten deel uit van het proces. Daarom is het belangrijk om elke nieuwe website die u bouwt grondig te testen om er zeker van te zijn dat deze zo vrij mogelijk is van fouten om uw gebruikers de best mogelijke ervaring te bieden. 

U moet een website niet testen zonder eerst de DevTools- kit van Google Chrome te proberen. ^(Chrome)Met de Chrome^(Chrome) -ontwikkelaarsmodus kun je een nieuwe site (of een bestaande) uitproberen en grondig testen om bugs te vinden en op te lossen. Het kan u ook inzicht geven in hoe andere sites worden uitgevoerd, inclusief het bekijken van de broncode. 

Hier vindt u alles wat u moet weten over de ontwikkelaarsmodus van de Google Chrome -browser, welke tools deze heeft en hoe u deze effectief kunt gebruiken.

Wat is de Chrome-ontwikkelaarsmodus?^{(What Is Chrome Developer Mode?)}

Als we het hebben over de Chrome -ontwikkelaarsmodus, hebben we het niet over dezelfde ontwikkelaarsmodus^{(same developer mode)} die u op Chromebooks ziet . Waar we het over hebben, zijn de uitgebreide Chrome - ontwikkeltools (genaamd Google DevTools ) die in de browser zelf zijn ingebouwd.

Dit zijn tools die zijn ontworpen om een ​​webpagina die u in de Google Chrome -browser heeft geladen voor testdoeleinden te testen, analyseren en opzettelijk te breken (indien nodig). Op een basisniveau kun je DevTools gebruiken om de broncode van een website te bekijken, zodat je onder de motorkap kunt kijken hoe een site is gebouwd en hoe goed deze werkt.

Google DevTools biedt echter meer dan dit. U kunt de Chrome -ontwikkelaarsmodus gebruiken om een ​​pagina te wijzigen nadat deze is geladen, Google Chrome -consoleopdrachten uitvoeren om de pagina te beheren en te manipuleren, evenals snelheids- en netwerktests uitvoeren om het webverkeer te controleren.

U kunt ook andere apparaten emuleren, inclusief verschillende besturingssystemen en schermresoluties, in de Chrome DevTools -modus. Hiermee kunt u zien of een site een responsief webontwerp heeft en waar de inhoud en lay-outs van de site zullen veranderen, afhankelijk van de resolutie of het type apparaat.

Hoewel deze tools bedoeld zijn voor professionele webontwikkelaars of testers, is het ook handig voor standaard Chrome - gebruikers om hun weg te vinden in de DevTools- suite. Als u een probleem met een site ziet dat u niet kunt oplossen, kunt u door over te schakelen naar de ontwikkelaarsmodus van Chrome zien of het probleem bij de site of uw browser ligt.

Toegang krijgen tot het Google Chrome DevTools-menu^{(How To Access Google Chrome DevTools Menu)}

Er zijn een paar manieren waarop u toegang krijgt tot het Google Chrome DevTools- menu, afhankelijk van de tool die u wilt gebruiken.

De eenvoudigste methode om dit te doen is via het Google Chrome- menu. Klik hiervoor op het menupictogram met de drie stippen^{(three-dots menu icon)} in de rechterbovenhoek. Klik in het menu dat verschijnt op More Tools > Developer Tools .

Hierdoor wordt de DevTools- kit geopend in een nieuw menu aan de rechterkant van uw geopende Chrome - tabblad of -venster.

U kunt dit ook doen met behulp van sneltoetsen. Open vanaf een Windows- of Linux-pc de Chrome- browser en druk op de F12- toets. U kunt ook op de Ctrl + Alt + J of Ctrl + Alt + I drukken in een geopend Chrome - tabblad of -venster.

Druk op macOS op F12 of druk op de toetsen Option + Command + J of Option + Command + I om in plaats daarvan het Chrome DevTools- menu te openen. Hiermee wordt de Chrome -console geopend, met opties om naar andere Chrome - tools boven aan het DevTools- menu te gaan.

Als u wilt, kunt u de broncode van een website bekijken ( door daarbij het tabblad Elementen van het ^(Elements)DevTools- menu te openen) op elke geopende webpagina door met de rechtermuisknop op de en op de optie Inspecteren^{(Inspect )} te klikken .

Chrome DevTools gebruiken^{(Using Chrome DevTools)}

Zoals we al kort hebben aangegeven, kunt u de Chrome DevTools- kit gebruiken om de broncode voor een website te bekijken op het tabblad Elementen . ^(Elements)Hiermee kunt u de code achter de pagina die u heeft geladen analyseren en foutmeldingen bekijken (die wijzen op problemen met hoe de site is geladen) in de Chrome -console onder het tabblad Console .

U kunt ook de verschillende bronnen voor inhoud van een website bekijken op het tabblad Bronnen . ^(Sources)Als een site bijvoorbeeld een content delivery network (CDN)^{(using a content delivery network (CDN))} gebruikt, worden media van een site hier als een andere bron vermeld.

Met de Chrome^(Chrome) -ontwikkelaarsmodus kunt u die inhoud rechtstreeks downloaden of een complexere analyse van de inhoud uitvoeren.

Als u wilt testen hoe een site presteert, kunt u uw netwerkgebruik controleren en registreren op het tabblad Netwerk . ^(Network)Dit toont de snelheid, grootte en het type netwerkverzoeken tussen uw browser en de site.

Wanneer een pagina bijvoorbeeld voor het eerst wordt geladen, laadt de site de pagina-inhoud zelf, maar kan ook gegevens opvragen uit databases van derden. Wanneer u zich bijvoorbeeld aanmeldt, kan dit een database opvragen die hier als een netwerkverzoek zou verschijnen.

U kunt dit verder analyseren op het tabblad Prestaties^{(Performance )} , waar u uw Chrome - browsergebruik diepgaander kunt vastleggen, inclusief het opnemen van schermafbeeldingen op verschillende punten. Hiermee wordt geregistreerd hoe lang het duurt om uw site te laden voor verdere analyse.

Google Chrome heeft de reputatie zwaar te zijn voor uw pc-geheugen^{(being hard on your PC memory)} , dus u kunt het JavaScript - geheugengebruik van uw site testen op het tabblad Geheugen . ^(Memory)Hier kunnen verschillende Chrome^{(Different Chrome)} -testprofielen worden gebruikt, met meer informatie over deze tests op de Chrome DevTools-documentatiepagina^{(Chrome DevTools documentation page)} .

Voor een meer diepgaande analyse van de inhoud van uw site, evenals van de browseropslag die deze mogelijk gebruikt (bijvoorbeeld om gegevens te loggen), kunt u zoeken via het tabblad Toepassing . ^{(Application)}U kunt informatie over sitecookies hier bekijken onder het gedeelte Cookies , of de gebruikte opslag wissen door op de optie Opslag wissen^{(Clear storage)} te klikken .

Als u zich zorgen maakt over de beveiliging van uw site, kunt u controleren hoe goed deze presteert op het tabblad Beveiliging . ^{(Security )}Dit geeft je een snel overzicht van de beveiligingsanalyse van Chrome voor een pagina, inclusief of de pagina een correct en vertrouwd SSL - certificaat heeft.

Als u een rapport wilt genereren over de prestaties van uw site, inclusief of deze voldoet aan de typische gebruikersnormen en als de siteprestaties van invloed kunnen zijn op de optimalisatie van zoekmachines, kunt u op het tabblad Lighthouse klikken. Dit biedt instellingen die u voor uw rapport kunt aan- of uitvinken: klik op Rapport genereren^{(Generate report)} om het te bekijken rapport te maken.

Dit krast nauwelijks de oppervlakte van het potentieel dat de ontwikkelaarsmodus van Chrome kan bieden aan ontwikkelaars. Als je meer wilt weten, zou de Chrome DevTools-documentatie^{(Chrome DevTools documentation)} je moeten helpen met de aangeboden tools en functies, inclusief hoe je er je eigen gebruikerstests mee kunt bouwen. 

Geavanceerde Google Chrome-trucs^{(Advanced Google Chrome Tricks)}

De meeste Chrome-gebruikers zullen nooit weten dat de Google Chrome DevTools- kit in hun browser bestaat, maar voor ervaren gebruikers blijft het een buitengewoon handige manier om websites te testen en te analyseren. Er zijn ook Chrome-extensies van derden voor webontwikkelaars^{(Chrome extensions for web developers)} beschikbaar waarmee u uw site verder kunt testen.

Als u een eenvoudige website bouwt^{(building a basic website)} , kunt u door over te schakelen naar de ontwikkelaarsmodus van Chrome fouten op uw site opsporen die niet meteen zichtbaar zijn. U kunt dit alleen doen als Chrome correct werkt, dus als u worstelt met Chrome-crashes^{(struggling with Chrome crashes)} , moet u mogelijk eerst uw browser opnieuw instellen of opnieuw installeren.

What Is Chrome Developer Mode & What Are Its Uses?

No webѕite is built perfectly. Like all products made by humans, code errors are part of the proceѕs. That’s why it’s important to thoroughly test any new websіte yоu build to make sure that it’s as free of errors as possible to give your users the bеst possible exреrience. 

You shouldn’t test a web site without trying Google Chrome’s DevTools kit first. Chrome developer mode allows you to try out and thoroughly test a new site (or an existing one) to find and fix bugs. It can also give you insight into how other sites are run, including viewing the source code. 

Here’s everything you need to know about the Google Chrome browser developer mode, what tools it has, and how to use it effectively.

What Is Chrome Developer Mode?

When we refer to the Chrome developer mode, we’re not talking about the same developer mode that you’ll see on Chromebooks. What we’re referring to is the extensive Chrome development tools (called Google DevTools) that are built into the browser itself.

These are tools designed to test, analyze, and purposely break (if you need to) a web page you’ve loaded in the Google Chrome browser for testing purposes. At a basic level, you can use DevTools to view the source code for a website, letting you peek under the hood to see how a site has been built and how well it runs.

Google DevTools offers more than this, however. You can use Chrome developer mode to change a page after it’s loaded, run Google Chrome console commands to control and manipulate the page, as well as run speed and network tests to monitor web traffic.

You can also emulate other devices, including different operating systems and screen resolutions, in the Chrome DevTools mode. This lets you see if a site has responsive web design, and where site content and layouts will change depending on the device resolution or type.

While these tools are aimed at professional web developers or testers, it’s also handy for standard Chrome users to know their way around the DevTools suite. If you see a problem with a site that you can’t solve, switching to Chrome developer mode can help you see if the problem is with the site or with your browser.

How To Access Google Chrome DevTools Menu

There are a few ways you can access the Google Chrome DevTools menu, depending on the tool you wish to use.

The easiest method to do this is from the Google Chrome menu. To do this, click the three-dots menu icon in the top-right. From the menu that appears, click More Tools > Developer Tools.

This will open the DevTools kit in a new menu on the right-hand side of your open Chrome tab or window.

You can also do this by using keyboard shortcuts. From a Windows or Linux PC, open the Chrome browser and press the F12 key. You can also press the Ctrl + Alt + J or Ctrl + Alt + I keys in an open Chrome tab or window.

On macOS, press F12 or press the Option + Command + J or Option + Command + I keys to open the Chrome DevTools menu instead. This will open the Chrome console, with options to move to other Chrome tools at the top of the DevTools menu.

If you want, you can view the source code for a website (opening the Elements tab of the DevTools menu in the process) on any open web page by right-clicking the and clicking the Inspect option.

Using Chrome DevTools

As we’ve briefly touched upon, you can use the Chrome DevTools kit to see the source code for a website under the Elements tab. It’ll let you analyse the code behind the page you’ve loaded, as well as view error messages (indicating problems with how the site has loaded) in the Chrome console under the Console tab.

You can also view the different sources for content from a website under the Sources tab. For instance, if a site is using a content delivery network (CDN), media from a site would be listed as a different source here.

Chrome developer mode allows you to download that content directly, or perform more complex analysis of the content.

If you want to test how a site is performing, you can monitor and record your network usage under the Network tab. This will show the speed, size, and type of network requests made between your browser and the site.

For instance, when a page first loads, the site will load the page content itself, but it may also request data from third-party databases. For instance, when you sign in, this may query a database which would show up as a network request here.

You can analyse this further under the Performance tab, where you can record your Chrome browser usage in greater depth, including recording screenshots at different points. This will log how long it takes to load your site for further analysis.

Google Chrome has a reputation for being hard on your PC memory, so you can test your site’s JavaScript memory usage under the Memory tab. Different Chrome testing profiles can be used here, with further information about this testing at the Chrome DevTools documentation page.

For more in-depth analysis of your site content, as well as any browser storage it might be using (for instance, to log data), you can search through the Application tab. You can view site cookie information here under the Cookies section, or clear the storage being used by clicking the Clear storage option.

If you’re worried about your site security, you can check how well it performs under the Security tab. This will give you a quick overview of Chrome’s security analysis for a page, including whether or not the page has a correct and trusted SSL certificate.

If you want to generate a report on your site’s performance, including if it meets typical user standards and if the site performance could be affecting search engine optimization, you can click the Lighthouse tab. This offers settings you can check or uncheck for your report—click Generate report to create the report to view.

This barely scratches the surface of the potential that Chrome developer mode can bring to developers. If you want to learn more, the Chrome DevTools documentation should help you with the tools and features on offer, including how to build your own user tests with it. 

Advanced Google Chrome Tricks

Most Chrome users won’t ever know that the Google Chrome DevTools kit exists in their browser, but for power users, it remains an exceptionally useful way to test and analyse websites. There are also third-party Chrome extensions for web developers available to help test your site further.

If you’re building a basic website, switching to Chrome developer mode could help you spot errors with your site that aren’t immediately visible. You can only do this if Chrome is working correctly, so if you’re struggling with Chrome crashes, you may need to reset or reinstall your browser first.

Related posts

• Automatisch aanvullen van Google Chrome: een complete gids

• De 10 beste privacy-extensies voor Chrome (2022)

• Gebruik deze 4 Chrome-plug-ins om uw Gmail-berichten te versleutelen

• Instellingen voor Google Chrome-inhoud: een volledige gids

• Wat is de beste conference call-service - de beste apps vergeleken?

• Hoe websites werken: ontdek wat er onder de motorkap zit

• Gebruik een oude webcam om uw eigendom gratis te controleren

• Beste programma's om nieuwe functionaliteit toe te voegen aan Windows 10

• 7 manieren om een ​​MDB-bestand te openen zonder Microsoft Access

• Automatisch bestanden verplaatsen, verwijderen of kopiëren in Windows

• Wat is een chatbot en hoe gebruik je er een op je site?

• 5 draagbare apps die u zeker op uw USB-stick wilt hebben

• 3 Hulpmiddelen om problemen met uw monitor te diagnosticeren en op te lossen

• Hoe u dubbele digitale foto's op uw Windows-computer kunt verwijderen

• Hoe de Signal Desktop-app kan helpen uw privacy te beschermen

• Werkt het Windows-bestandsherstel van Microsoft? We hebben het getest.

• 5 beste veilige APK-downloadsites voor Android-apps

• Google Apps Script Editor: alles wat u moet weten om aan de slag te gaan

• Twee transcriptietools voor het omzetten van audio in tekst

• HDG legt uit: wat is markdown en wat zijn de basisprincipes die ik moet weten?