L'auteur de l'article que nous traduisons utilise les outils de développement Chrome presque tous les jours. Ici, il veut parler des caractéristiques peu connues de ces outils. Il dit que s'il les connaissait auparavant, alors ils lui seraient certainement utiles.
1. Un moyen simple d'obtenir un lien vers n'importe quel élément à l'étude
Les outils de développement Chrome vous permettent d'obtenir un lien vers n'importe quel élément en cours d'investigation dans la console. Pour ce faire, en travaillant dans le panneau
Elements , cliquez avec le bouton droit sur un élément et sélectionnez
Store as global variable dans le menu déroulant.
Un moyen simple d'obtenir un lien vers n'importe quel élément faisant l'objet d'une enquête2. Création d'expressions interactives attachées à la console
Dans les outils du développeur, vous pouvez créer des expressions interactives attachées en haut de la console, dont les valeurs sont constamment mises à jour. La procédure de création de telles expressions est illustrée dans la figure suivante. Si vous savez que certains éléments de la page doivent être mis à jour, cette fonctionnalité peut être très utile pour les observer.
Expressions interactives dans Chrome3. Simulez des connexions Internet lentes
L'onglet
Network des outils de développement Chrome vous permet de simuler une connexion de navigateur à différents réseaux. Cette fonctionnalité peut être extrêmement utile pour évaluer le comportement d'une page dans une situation où le chargement prend plusieurs secondes.
Explorer une page simulant diverses façons de se connecter à Internet4. Désactiver le cache, enregistrer les journaux lors du basculement entre les pages
J'ai dû faire face à de nombreux problèmes qui, en fin de compte, n'étaient pas des erreurs. Leur cause était un chargement incorrect du code mis en cache. Afin de vous débarrasser de ces problèmes, vous pouvez désactiver complètement la mise en cache en utilisant les capacités de l'onglet
Network . Il s'agit d'une case à cocher
Disable cache . Veuillez noter que le cache ne fonctionne pas uniquement lorsque la barre d'outils du développeur est ouverte.
L'enregistrement des journaux est une autre fonctionnalité utile en raison de laquelle la console n'est pas effacée lorsque la page sous enquête est rechargée. Active cette case à cocher
Preserve log sous l'onglet
Network .
Désactiver le cache et enregistrer les journaux5. Faire des captures d'écran
Les outils de développement Chrome incluent un outil de capture d'écran intégré. Pour l'utiliser, vous devez, avec la fenêtre d'outils ouverte, appliquer la combinaison de
Ctrl+Shift+P , puis saisir la
screenshot du mot clé dans le champ qui apparaît et sélectionner la méthode souhaitée pour créer une capture d'écran.
Création d'une capture d'écran à partir de la barre d'outils du développeur6. La commande console.log () est loin d'être le seul moyen de consigner quelque chose sur la console
Tout le monde utilise la commande
console.log() pour consigner les données de débogage. Cependant, cette commande n'épuise pas les capacités de journalisation. En particulier, les commandes
console.warn() et
console.error() sont à la disposition du développeur.
Ces commandes affichent des messages de différents niveaux de connexion à la console - ce sont, respectivement, des avertissements et des messages d'erreur. Ils sont mis en évidence dans différentes couleurs et icônes. Les messages affichés dans la console par différentes commandes peuvent être filtrés.
Console.warn () et console.error ()Vous pouvez utiliser la commande
console.table() pour afficher certaines données structurées formatées de manière pratique dans un format de tableau.
Commande console.table ()Les possibilités de travailler avec la console ne sont pas limitées à ces commandes. Par exemple, il existe également des commandes telles que
console.assert() et
console.group() . Vous trouverez ici une histoire détaillée sur ces équipes.
7. La construction $ _ renvoie l'expression calculée la plus récente
La construction
$_ peut être utilisée pour renvoyer la valeur d'une opération précédente effectuée dans la console.
Utilisation de la construction $ _8. La commande $ () est un raccourci pour document.querySelector ()
Vous pouvez utiliser la commande
$() dans la console pour sélectionner rapidement un élément. Soit dit en passant, les fonctionnalités de jQuery ne sont pas appliquées, bien qu'à première vue, il puisse sembler que ce n'est pas le cas.
De même, la commande
$$() est un raccourci pour
document.querySelectorAll() .
Utilisation de $ ()9. Activation des états d'élément, tels que le survol ou le focus, dans le panneau Styles
Si, lors de l'étude d'un élément, il est nécessaire d'étudier son comportement à l'état
hover , cela peut être une tâche intimidante, car pour traduire un élément dans cet état, il serait nécessaire d'avoir un pointeur de souris dessus. La solution à ce problème peut être facilitée en tirant parti des capacités du panneau
Styles . Ici, vous pouvez forcer le transfert d'éléments vers des états tels que le
hover ou la
focus .
Forcer l'élément à indiquer10. La combinaison de la pression de la touche Ctrl et du clic de la souris permet de trouver une définition de règle CSS
Avez-vous déjà eu besoin de savoir où une règle CSS est décrite? Cette tâche est très facile à résoudre en appuyant sur la touche
Ctrl et en cliquant sur la règle qui vous intéresse. MacOS utilise
Cmd au lieu de
Ctrl .
Ctrl + clic - rechercher l'emplacement de définition de la règle CSSChers lecteurs! Qu'aimeriez-vous ajouter à la liste des fonctionnalités peu connues des outils de développement Chrome ici?
