En raison de ses fonctionnalités avancées, Google Chrome est l’un des navigateurs Web les plus populaires pour le développement Web. Outils de développement Chrome peut être très utile lors du débogage. La plupart d'entre nous savons 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 nombreux trucs inconnus et cachés de Chrome Dev Tools et nous allons examiner les trucs les plus utiles parmi eux. Pour ouvrir les outils de développement dans Chrome, appuyez sur F12 sur votre clavier et essayez les astuces suivantes.
1. Trouver et ouvrir n'importe quel fichier
Lorsque nous faisons du développement Web, nous traitons de nombreux fichiers HTML, CSS, JS et autres. Lorsque nous souhaitons déboguer quoi que ce soit, nous ouvrons les outils de développement Chrome. Vous pouvez rapidement rechercher et trouver le fichier en question pour faciliter votre travail. Appuyez simplement sur Ctrl + P et commencez à taper le nom du fichier. Cela vous aide à trouver le fichier particulier à partir de 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. presse Ctrl + Maj + F rechercher une chaîne dans des fichiers. Il supporte également les expressions régulières.
3. Aller à la ligne particulière
Une fois que vous avez ouvert un fichier source et que vous souhaitez passer à une ligne donnée, 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
Outils de développement vous permet également de sélectionner des éléments dans la console.
- $() – Retourne la première occurrence du sélecteur CSS correspondant.
- $$() – Il retourne le tableau d'éléments correspondant au sélecteur CSS donné.
Pour plus de commandes sur la console, rendez-vous sur ce post.
5. Utiliser plusieurs carets
Parfois, vous souhaitez définir plusieurs carets à différents endroits et vous pouvez le faire facilement dans les outils de développement de Chrome en maintenant la commande Ctrl clé et en cliquant où vous voulez les placer. Ensuite, commencez à écrire et vous verrez qu’il est placé à divers endroits sélectionnés.
6. Conserver le journal
Conserver le journal vous aide à conserver le journal même lorsque la page est chargée. Cochez l'option à côté de Conserver le journal dans le journal de la console et le journal est préservé. Cela affiche le journal avant la page déchargée et utile pour enquêter sur les bogues.
7. Utiliser un embellisseur de code intégré
Chrome Dev Tools possède l’embellisseur de code intégré appelé joli imprimé “{}”. L'outil Developer affiche le code réduit et n'est pas si facile à lire. Cliquez sur le joli bouton d'impression situé en bas à gauche du fichier source ouvert pour afficher le fichier source au format lisible par l'homme.
8. Votre site Web est-il convivial pour les mobiles? Vérifiez ici
Chrome Dev Tools nous permet également de vérifier si un site Web est compatible avec les appareils mobiles ou non. Vous pouvez vérifier l’apparence de votre site Web sur différents appareils. Rendez-vous sur les outils de développement Chrome et sous Émulation onglet, vous pouvez classer divers appareils. Sélectionnez l'appareil que vous souhaitez et testez l'apparence de votre site Web.
9. Capteurs d'émulation et localisation géographique
Vous pouvez même émuler les capteurs tels que l'écran tactile et les accéléromètres. Vous pouvez même imiter l'emplacement géographique. Pour ce faire, rendez-vous sur Emulation -> Capteurs.
10. Sélectionnez l'occurrence suivante du mot actuel
Si vous souhaitez remplacer le mot dans toutes les occurrences, sélectionnez-le et appuyez sur Ctrl + D pour sélectionner l'occurrence suivante du mot sélectionné. Vous pouvez modifier ce mot dans toutes les occurrences en un coup.
11. Modifier le format de couleur
Juste utiliser Maj + clic sur l'aperçu des couleurs pour modifier les altérations entre les formats rgba, hexadécimal et hsl.
12. Ajouter des modifications aux fichiers locaux via l'espace de travail
Nous sommes en mesure d’éditer les fichiers source et d’apporter certaines modifications dans CSS, Java Script et d’autres fichiers dans les outils de développement de Chrome. Pour ajouter ces modifications aux fichiers locaux, il est inutile de copier-coller les modifications de l’espace de travail aux fichiers sur le disque. Les outils de développement Chrome vous permettent de faire correspondre les fichiers et de mettre à jour le fichier local avec les modifications apportées dans les outils de développement. Pour ce faire, cliquez avec le bouton droit de la souris sur le fichier source situé à gauche de la fenêtre. Sources onglet et sélectionnez Ajouter un dossier à l'espace de travail.
Pour plus d'informations sur les espaces de travail, rendez-vous sur Chrome.com.
