Aucun site Web n'est construit parfaitement. Comme tous les produits fabriqués par des humains, les erreurs de code font partie du processus. C'est pourquoi il est important de tester minutieusement tout nouveau site Web que vous créez pour vous assurer qu'il est aussi exempt d'erreurs que possible afin d'offrir à vos utilisateurs la meilleure expérience possible. 

Vous ne devriez pas tester un site Web sans avoir d'abord essayé le kit DevTools de Google ^(DevTools)Chrome . Le mode développeur de Chrome^(Chrome) vous permet d'essayer et de tester minutieusement un nouveau site (ou un site existant) pour trouver et corriger les bogues. Il peut également vous donner un aperçu de la façon dont d'autres sites sont exécutés, y compris l'affichage du code source. 

Voici tout ce que vous devez savoir sur le mode développeur du navigateur Google Chrome , les outils dont il dispose et comment l'utiliser efficacement.

Qu'est-ce que le mode développeur Chrome ?^{(What Is Chrome Developer Mode?)}

Lorsque nous parlons du mode développeur de Chrome , nous ne parlons pas du même mode développeur^{(same developer mode)} que vous verrez sur les Chromebooks . Nous faisons référence aux nombreux outils de développement Chrome (appelés Google DevTools ) qui sont intégrés au navigateur lui-même.

Ce sont des outils conçus pour tester, analyser et casser délibérément (si nécessaire) une page Web que vous avez chargée dans le navigateur Google Chrome^{(Google Chrome)} à des fins de test. À un niveau de base, vous pouvez utiliser DevTools pour afficher le code source d'un site Web, vous permettant de jeter un coup d'œil sous le capot pour voir comment un site a été construit et s'il fonctionne bien.

Cependant, Google DevTools^{(Google DevTools)} offre plus que cela. Vous pouvez utiliser le mode développeur de Chrome pour modifier une page après son chargement, exécuter les commandes de la console Google Chrome pour contrôler et manipuler la page, ainsi que pour exécuter des tests de vitesse et de réseau pour surveiller le trafic Web.

Vous pouvez également émuler d'autres appareils, y compris différents systèmes d'exploitation et résolutions d'écran, en mode Chrome DevTools . Cela vous permet de voir si un site a une conception Web réactive et où le contenu et les mises en page du site changeront en fonction de la résolution ou du type d'appareil.

Bien que ces outils soient destinés aux développeurs ou aux testeurs Web professionnels, il est également pratique pour les utilisateurs standard de Chrome de se familiariser avec la suite ^(Chrome)DevTools . Si vous constatez un problème avec un site que vous ne parvenez pas à résoudre, le passage au mode développeur de Chrome peut vous aider à voir si le problème vient du site ou de votre navigateur.

Comment accéder au menu Google Chrome DevTools^{(How To Access Google Chrome DevTools Menu)}

Il existe plusieurs façons d'accéder au menu Google Chrome DevTools , en fonction de l'outil que vous souhaitez utiliser.

La méthode la plus simple consiste à utiliser le menu Google Chrome . Pour ce faire, cliquez sur l' icône du menu à trois points^{(three-dots menu icon)} en haut à droite. Dans le menu qui s'affiche, cliquez sur More Tools > Developer Tools .

Cela ouvrira le kit DevTools dans un nouveau menu sur le côté droit de votre onglet ou fenêtre Chrome ouvert.^(Chrome)

Vous pouvez également le faire en utilisant des raccourcis clavier. Depuis un PC ^{(Linux PC)}Windows ou Linux , ouvrez le navigateur Chrome et appuyez sur la touche F12 . Vous pouvez également appuyer sur les Ctrl + Alt + J ou Ctrl + Alt + I dans un onglet ou une fenêtre Chrome ouvert .

Sur macOS, appuyez sur F12 ou appuyez sur les touches Option + Command + J ou Option + Command + I pour ouvrir le menu Chrome DevTools à la place. Cela ouvrira la console Chrome , avec des options pour passer à d'autres outils Chrome en haut du menu ^(Chrome)DevTools .

Si vous le souhaitez, vous pouvez afficher le code source d'un site Web (en ouvrant l' onglet Éléments du menu ^(Elements)DevTools dans le processus) sur n'importe quelle page Web ouverte en cliquant avec le bouton droit sur et en cliquant sur l' option Inspecter .^{(Inspect )}

Utilisation des outils de développement Chrome^{(Using Chrome DevTools)}

Comme nous l'avons brièvement évoqué, vous pouvez utiliser le kit Chrome DevTools pour voir le code source d'un site Web sous l' onglet Éléments . ^(Elements)Il vous permettra d'analyser le code derrière la page que vous avez chargée, ainsi que d'afficher les messages d'erreur (indiquant des problèmes de chargement du site) dans la console Chrome sous l' onglet Console .

Vous pouvez également afficher les différentes sources de contenu d'un site Web sous l' onglet Sources . Par exemple, si un site utilise un réseau de diffusion de contenu (CDN)^{(using a content delivery network (CDN))} , les médias d'un site seront répertoriés comme une source différente ici.

Le mode développeur de Chrome^(Chrome) vous permet de télécharger ce contenu directement ou d'effectuer une analyse plus complexe du contenu.

Si vous souhaitez tester les performances d'un site, vous pouvez surveiller et enregistrer votre utilisation du réseau sous l' onglet Réseau . ^(Network)Cela montrera la vitesse, la taille et le type des requêtes réseau effectuées entre votre navigateur et le site.

Par exemple, lors du premier chargement d'une page, le site chargera le contenu de la page lui-même, mais il peut également demander des données à des bases de données tierces. Par exemple, lorsque vous vous connectez, cela peut interroger une base de données qui apparaîtrait ici comme une requête réseau.

Vous pouvez analyser cela plus en détail sous l' onglet Performances^{(Performance )} , où vous pouvez enregistrer plus en profondeur l'utilisation de votre navigateur Chrome , y compris l'enregistrement de captures d'écran à différents moments. Cela enregistrera le temps qu'il faut pour charger votre site pour une analyse plus approfondie.

Google Chrome a la réputation d' être dur sur la mémoire de votre PC^{(being hard on your PC memory)} , vous pouvez donc tester l' utilisation de la mémoire JavaScript de votre site sous l' onglet Mémoire . ^(Memory)Différents^{(Different Chrome)} profils de test Chrome peuvent être utilisés ici, avec plus d'informations sur ces tests sur la page de documentation de Chrome DevTools^{(Chrome DevTools documentation page)} .

Pour une analyse plus approfondie du contenu de votre site, ainsi que de tout stockage de navigateur qu'il pourrait utiliser (par exemple, pour enregistrer des données), vous pouvez effectuer une recherche via l' onglet Application . Vous pouvez afficher les informations sur les cookies du site ici dans la section Cookies ou effacer le stockage utilisé en cliquant sur l' option Effacer le stockage .^{(Clear storage)}

Si vous vous inquiétez de la sécurité de votre site, vous pouvez vérifier ses performances sous l' onglet Sécurité . ^{(Security )}Cela vous donnera un aperçu rapide de l'analyse de sécurité de Chrome pour une page, y compris si la page possède ou non un certificat SSL correct et fiable.^(SSL)

Si vous souhaitez générer un rapport sur les performances de votre site, y compris s'il répond aux normes d'utilisation typiques et si les performances du site peuvent affecter l'optimisation des moteurs de recherche, vous pouvez cliquer sur l' onglet Phare . ^(Lighthouse)Cela offre des paramètres que vous pouvez cocher ou décocher pour votre rapport. Cliquez sur Générer le rapport^{(Generate report)} pour créer le rapport à afficher.

Cela effleure à peine la surface du potentiel que le mode développeur de Chrome peut apporter aux développeurs. Si vous souhaitez en savoir plus, la documentation de Chrome DevTools^{(Chrome DevTools documentation)} devrait vous aider avec les outils et fonctionnalités proposés, y compris comment créer vos propres tests utilisateur avec. 

Astuces avancées de Google Chrome^{(Advanced Google Chrome Tricks)}

La plupart des utilisateurs de Chrome ne sauront jamais que le kit Google Chrome DevTools existe dans leur navigateur, mais pour les utilisateurs expérimentés, il reste un moyen exceptionnellement utile de tester et d'analyser des sites Web. Il existe également des extensions Chrome^{(Chrome extensions for web developers)} tierces pour les développeurs Web disponibles pour vous aider à tester davantage votre site.

Si vous créez un site Web de base^{(building a basic website)} , le passage au mode développeur de Chrome peut vous aider à repérer les erreurs de votre site qui ne sont pas immédiatement visibles. Vous ne pouvez le faire que si Chrome fonctionne correctement. Par conséquent, si vous rencontrez des problèmes de plantage de Chrome^{(struggling with Chrome crashes)} , vous devrez peut-être d'abord réinitialiser ou réinstaller votre navigateur.

What Is Chrome Developer Mode & What Are Its Uses?

Nо website is built perfectly. Like all products mаde by humans, cоde errors are part of the procesѕ. That’s whу it’s important to thoroughly test any new website уou bυild to make sure that it’s as free оf errors as possible to give your users thе best possible experience. 

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

• Remplissage automatique de Google Chrome : un guide complet

• Les 10 meilleures extensions de confidentialité pour Chrome (2022)

• Utilisez ces 4 plugins Chrome pour chiffrer vos messages Gmail

• Paramètres de contenu de Google Chrome : un guide complet

• Quel est le meilleur service de conférence téléphonique - Les meilleures applications comparées

• Comment l'application de bureau Signal peut aider à protéger votre vie privée

• Les 4 meilleures alternatives à Google Chromecast

• 7 meilleurs outils de suppression de Bloatware pour Windows

• Utilisez HP Print and Scan Doctor pour résoudre les problèmes d'imprimante courants

• 5 meilleurs modules complémentaires de confidentialité de Firefox pour la sécurité en ligne

• Choses à considérer avant de créer votre propre wiki

• 5 applications portables que vous voulez absolument avoir sur votre clé USB

• 5 meilleurs outils de scanner IP pour Windows, Mac, iOS et Android

• 11 meilleurs logiciels de capture d'écran gratuits pour Windows

• 4 excellents outils pour créer des packages d'installation Windows

• Deux outils de transcription pour transformer l'audio en texte

• 5 meilleurs logiciels pour gérer deux moniteurs

• Comment bloquer des sites avec un logiciel de contrôle parental gratuit

• Un didacticiel Microsoft Planner: tout ce que vous devez savoir

• Meilleurs éditeurs Markdown : toutes les plateformes et en ligne