Windows

Outils de développement Chrome Didacticiels, astuces et astuces

Tutoriel : Créer une extension pour navigateur

Tutoriel : Créer une extension pour navigateur

Table des matières:

Anonim

Google Chrome est l`un des navigateurs Web les plus populaires pour le développement Web. Les outils de développement Chrome peuvent être très utiles lors du débogage. La plupart d`entre nous savent déjà que nous pouvons éditer le CSS en utilisant Chrome Dev Tools, mais il y a plus de conseils que nous partagerons avec vous aujourd`hui.

Conseils sur les outils de développement Chrome

Il existe de nombreux astuces inconnues et cachées Outils et nous allons regarder dans les astuces 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 voulons déboguer quoi que ce soit, nous ouvrons les outils Chrome Dev. Vous pouvez rapidement rechercher et trouver le fichier particulier pour faciliter votre travail. Juste, appuyez 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 le tour précédent, 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 + Maj + F pour rechercher une chaîne dans les fichiers. Il prend également en charge les expressions régulières.

3. Aller à la ligne

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

4. En sélectionnant les éléments DOM dans l`onglet Console

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

  • $ () - Renvoie la première occurrence du sélecteur CSS correspondant.
  • $$ () - Renvoie le tableau des éléments correspondant au sélecteur CSS donné

Pour plus de commandes de 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 Chrome en maintenant la touche Ctrl enfoncée et en cliquant à l`endroit où vous souhaitez les placer. Puis commencez à écrire et vous verrez qu`il est placé à divers endroits sélectionnés.

6. Conserver le journal

Le journal de conservation vous permet de conserver le journal même si la page est chargée. Cochez l`option Conserver le journal dans le journal de la console et le journal est conservé. Cela affiche le journal avant la page dans déchargé et utile pour enquêter sur les bogues.

7. Utiliser l`embellisseur de code intégré

Chrome Dev Tools a l`embellisseur de code intégré appelé joli print "{}". l`outil de développement montre le code minimisé et n`est pas si facile à lire. Cliquez sur le joli bouton d`impression qui est montré en bas à gauche sur le fichier source ouvert, pour montrer le fichier source dans le format lisible par l`homme.

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

Chrome Dev Tools nous permet également de vérifier si un site Web est compatible avec les mobiles ou non. Vous pouvez vérifier l`aspect de votre site Web sur différents appareils. Rendez-vous sur les outils de développement Chrome et sous l`onglet Émulation , vous pouvez classer différents périphériques. Sélectionnez l`appareil de votre choix et testez l`apparence de votre site Web sur cet appareil.

Pour plus d`informations, consultez la vidéo suivante.

9. Émuler les capteurs et l`emplacement géographique

Vous pouvez même émuler les capteurs comme l`écran tactile et les accéléromètres. Vous pouvez même émuler l`emplacement géographique. Pour ce faire, allez à Émulation -> Capteurs.

10. Sélectionnez l`occurrence suivante du mot courant

Si vous souhaitez remplacer le mot Dans toute son apparition, sélectionnez le mot et appuyez sur Ctrl + D pour sélectionner l`occurrence suivante du mot sélectionné. Le, vous pouvez modifier ce mot dans toutes ses occurrences en un seul coup.

11. Alter Color Format

Il suffit d`utiliser Shift + Click dans 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 de faire des changements dans CSS, Java Script et dans d`autres fichiers dans les outils de développement Chrome. Pour ajouter ces modifications aux fichiers locaux, il n`est pas nécessaire de copier les modifications de l`espace de travail vers les 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 que vous avez apportées aux outils de développement. Pour ce faire, cliquez sur le fichier source situé à gauche de l`onglet Sources et sélectionnez Ajouter un dossier à l`espace de travail.

Pour plus d`informations sur les espaces de travail, rendez-vous sur Chrome.com.