Google Chrome est l'un des navigateurs Web les plus populaires pour le développement Web, en raison de ses fonctionnalités avancées. Les outils de développement Chrome^{(Chrome Developer Tools)} peuvent être très utiles lors du débogage. La plupart d'entre nous savent déjà que nous pouvons modifier le CSS en direct à l' aide de Chrome Dev Tools , mais il existe d'autres astuces que nous partagerons avec vous aujourd'hui.

Conseils sur les outils de développement Chrome

Il existe de nombreuses astuces inconnues et cachées de Chrome Dev Tools et nous examinerons les astuces les plus utiles parmi elles. Pour ouvrir les outils de développement dans Chrome , appuyez sur F12 sur votre clavier et essayez les astuces suivantes.

1. Trouvez et ouvrez n'importe quel fichier

Lorsque nous faisons du développement Web, nous traitons de nombreux fichiers HTML , CSS , JS et autres. Lorsque nous voulons déboguer quoi que ce soit, nous ouvrons les outils de développement Chrome . ^{(Chrome Dev)}Vous pouvez rapidement rechercher et trouver le fichier particulier pour vous faciliter la tâche. Appuyez simplement^(Just) sur Ctrl + P et commencez à taper le nom du fichier. Cela vous aide à trouver le fichier particulier dans la liste des fichiers.

2. Rechercher dans le fichier source

Dans l'astuce précédente, nous avons appris à rechercher un fichier particulier. Vous pouvez même rechercher une chaîne particulière dans tous les fichiers chargés. Appuyez sur Ctrl + Shift + F pour rechercher une chaîne dans les fichiers. Il prend également en charge les expressions régulières.

3. Aller à une ligne particulière

Une fois que vous avez ouvert un fichier source et que vous souhaitez passer à une ligne particulière, appuyez sur Ctrl + G et donnez le numéro de ligne et appuyez sur Entrée.

4. Sélection des éléments DOM dans l' onglet Console

Dev Tools vous permet également de sélectionner des éléments dans la console.

• $() – Renvoie^(Returns) la première occurrence du sélecteur CSS correspondant.^(CSS)
• $$() – Il renvoie le tableau d'éléments correspondant au sélecteur CSS donné.^(CSS)

Pour plus de commandes de console, rendez-vous sur ce post.^{(this post.)}

5. Utilisez plusieurs carets

Parfois, vous souhaitez définir plusieurs carets à différents endroits et vous pouvez le faire facilement dans les outils de développement Chrome en maintenant la touche ^{(Chrome Dev)}Ctrl enfoncée et en cliquant à l'endroit où vous souhaitez les placer. Ensuite, commencez à écrire et vous verrez qu'il est placé à divers endroits sélectionnés.

6. Conserver le journal

Conserver^(Preserve) le journal vous aide à conserver le journal même si la page est chargée. Cochez l'option à côté de Conserver le journal^{(Preserve log )} dans le journal de la console et le journal est conservé. Cela affiche le journal avant que la page ne soit déchargée et utile pour enquêter sur les bogues.

7. Utilisez l'embellisseur de code intégré

Chrome Dev Tools a l'embellisseur de code intégré appelé jolie impression "{}"^{(pretty print “{}”)} . L'outil de développement affiche le code minimisé et n'est pas si facile à lire. Cliquez^(Click) sur le joli bouton d'impression qui s'affiche en bas à gauche sur le fichier source ouvert, pour afficher le fichier source dans un format lisible par l'homme.

8. Votre site Web est-il adapté aux mobiles ? Vérifiez ici

Chrome Dev Tools nous permet également de vérifier si un site Web est adapté aux mobiles ou non. Vous pouvez vérifier l'apparence de votre site Web sur différents appareils. Rendez-vous sur les outils Chrome Dev et sous l'onglet ^{(Chrome Dev)}Emulation , vous pouvez classer divers appareils. Sélectionnez l'appareil que vous voulez et testez l'apparence de votre site Web sur cet appareil.

Pour plus d'informations, regardez la vidéo suivante.

9. Émuler les capteurs et l'emplacement géographique^{(Geographical Location)}

Vous pouvez même émuler les capteurs comme les écrans tactiles et les accéléromètres. Vous pouvez même imiter l'emplacement géographique. Pour ce faire, rendez-vous sur Emulation -> Sensors.

10. Sélectionnez la prochaine occurrence du mot actuel

Si vous souhaitez remplacer le mot dans toutes ses occurrences, sélectionnez le mot et appuyez sur Ctrl + D pour sélectionner l'occurrence suivante du mot sélectionné. Ensuite, vous pouvez modifier ce mot dans toutes ses occurrences en une seule fois.

11. Modifier le format de couleur

Utilisez simplement Shift + Click sur l'aperçu des couleurs pour modifier les modifications entre les formats rgba, hexadécimal et hsl.

12. Ajouter^(Add) des modifications aux fichiers locaux via l'espace de travail

Nous sommes en mesure de modifier les fichiers source et d'apporter des modifications au CSS , JavaScript et à d'autres fichiers dans les outils de développement Chrome . ^{(Chrome Dev)}Pour ajouter ces modifications aux fichiers locaux, il n'est pas nécessaire de copier-coller les modifications de l'espace de travail vers les fichiers sur le disque. Les outils de développement Chrome^{(Chrome Dev)} vous permettent de faire correspondre les fichiers et de mettre à jour le fichier local avec les modifications que vous avez apportées dans les outils de développement. Pour ce faire, cliquez avec le bouton droit sur le fichier source sur le côté gauche de l' onglet Sources et sélectionnez ^{(Sources )}Ajouter un dossier à l'espace de travail.^{(Add Folder to workspace.)}

J'espère que cela t'aides.

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one of the poрular web browsers fоr web development, due tо its advanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Meilleur Google Chrome Tips and Tricks pour Windows PC utilisateurs

• 3 trucs et astuces utiles pour utiliser les notes autocollantes

• Comment télécharger un Font d'un Website en utilisant Developer Tools

• Restart Chrome, Edge or Firefox sans perdant des onglets en Windows 11/10

• Conseils sur l'utilisation du Inspect Element de Google Chrome browser

• Comment mettre Google Chrome dans Dark Mode

• Comment arrêter Chrome de demander de sauvegarder des mots de passe

• Correction de la lecture automatique de YouTube ne fonctionnant pas

• Comment aller incognito dans Chrome, Firefox, Edge et Opera

• Make InPrivate or Incognito shortcuts pour Firefox, Chrome, Edge, Opera, ou Internet Explorer

• Comment désactiver les notifications Chrome sur Android: le guide complet

• Comment activer Java dans tous les principaux navigateurs Web

• Comment effacer les cookies de Chrome : tout ce que vous devez savoir

• Comment utiliser le mobile browser emulator dans Chrome, Firefox, Edge et Opera

• Comment imprimer un article sans annonces dans tous les grands navigateurs

• Où sont stockés des cookies dans Windows 10 pour tous les grands navigateurs?

• Quelle version de Chrome ai-je? 6 façons de savoir

• Comment changer Your Name sur Google Meet

• Activer Flash pour Specific Websites dans Chrome

• Comment réparer le code d'erreur Netflix M7111-1101