25 secrets des outils de développement de navigateur

Attention ! Cet article a plus de 1 an (2801 jours), ce qui signifie qu'il n'est pas forcément à jour !

Développement

Au travers des dernières années il y a eu un outils qui a aidé tous les développeur plus que tous les autres - les outils de développement de navigateur. Travaillant harmonieusement avec les navigateurs web, l’outil de développement nous permet de manipuler les éléments DOM, les styles CSS, le Javascript et d’autre informations utiles dans la même fenêtre et souvent en temps réel.

Historiquement les développeurs ont utilisé l‘“add-on” Firebug de Firefox pour développer et déboguer leur site web, mais plus récemment chaque navigateurs ont développé leur propre outil et chacun vient avec ses propres avantages et désavantages. De nos jours, il semble dure d’imaginer construire un site web sans un de ces outils pratiques, lesquels sont normalement accessible soit en appuyant sur “F12” dans Windows ou “CMD” ⌘, “Option” ⌥ et “I” sur le Mac, ou par clic-droit sur un élément de la page et sélectionner “Inspect Element”.

Navigateur Outil de développement Type Documentation
Chrome Developer Tools Intégré Documentation
Firefox Firebug Add-on Documentation
Internet Explorer Developer Toolbar Intégré Documentation
Opera Dragonfly Intégré Documentation
Safari Developer Tools Intégré (Defaut fermer) Aperçu

Mais utilisez-vous votre outils de développement à leur plein potentiel? Le plus gros point positif à propos de ces outils est qu’ils sont incroyablement faciles à utiliser, mais en contre-partie les développeurs passe souvent à côté d’une grosse portion des fonctionnalités accessibles. Inspiré par un vidéo de Paul Irish and Pavel Feldman, j’ai compilé une liste de “secrets” des consoles de développement. Je n’espère pas que chacun d’eux vous soient complètement inconnus, mais j’espère que certains vont vous aider à devenir un meilleur développeur web.

Si vous avez d’autres secrets, sentez-vous libre de laisser un commentaire à la fin de cet article et je vais mettre à jour celui-ci une fois vérifié. J’aimerais aussi savoir quel console de développement vous utilisée principalement.

L’onglet “Console”

Le coeur de tout outil de développement est l’onglet “console” où vous pouvez extraire, déboguer, et exécuter des commandes dans votre page actuelle.

Référence à l’élément actuel

Chrome, Firefox, Opera, Safari - Si vous avez un élément actuellement sélectionné dans votre onglet “Elements”, vous pouvez utiliser la référence $0 pour l’appeler à même votre code. Par exemple, pour voir le contenu de votre élément vous insèrerez $0.innerHTML. Dans Chrome et Safari, vous pouvez appeler la console des n’importe quel onglet en appuyant sur “Escape” pour que vous n’ayez pas à toujours alterner d’onglets. Dans Firebug, la console est accessible par une icône à gauche de l’onglet ou en appuyant soit sur CTRL, SHIFT et L sur Windows ou CMD ⌘, SHIFT et L sur Mac.

console1

Dans Opera, vous pouvez sélectionner l’élément qui précède celui surligné en utilisant $1. Dans Chrome et Safari, vous pouvez sélectionner l’Élément qui précède celui surligné en utilisant $1 à $4.

Utiliser console.log pour sortir multiple résultats de valeurs et d’objets en même temps

TOUS - Nous savons que console.log() est incroyablement utile pour sortir des éléments à déboguer dans la console, et est préféré à “alerts”, mais il peut être fastidieux de sortir un “string” suivi d’un “object” si vous n’êtes pas au courant de cette méthode de consignation(logging). Utiliser console.log(‘message:’ + $(‘#message’)) va seulement vous dire que votre message est un objet, et consigner cet objet en soi peut devenir confus si la consignation arrive dans le milieu d’une boucle.

console.log() accepte actuellement plusieurs paramètres, donc vous pouvez sortir des objets et des chaînes de caractères avec la même commande en utilisant console.log(‘message:’, $(‘#message’)); ou n’importe quelle combinaison de Javascript que vous pouvez penser.

console2

Vous pouvez utiliser console.warn() pour un message d’avertissement, console.error() pour un message d’erreur et console.info() pour un message d’information. Vous pouvez aussi utiliser console.assert() pour tester des expressions pour avoir “true” ou “false”.

You can use console.warn() for warning messages; console.error() for error messaging and console.info() for information messages. You can also use console.assert() to test expressions for true or false. (Merci à Masklinn pour les informations additionnelles)

Réutiliser une commande Javascript

TOUS - Si vous avez inséré une commande dans la console Javascript et vous souhaitez l’exécuter à nouveau, simplement appuyer sur la touche HAUT pour naviguer au travers de la liste de commandes que vous avez précédemment entrées.

Persistance des données

Chrome, Firefox - Le bouton dans Firefox pour avoir la persistance des données est très évident en étant à droite au-dessus de la console, mais pour Chrome c’est moins évident. Clic-droit dans la console pour révéler le menu avec l’option “Preserve Log upon Navigation”.

Voir la source d’un objet

Firefox - Firefox supporte la méthode toSource() ce qui veut dire que dans Firebug vous pouvez afficher le contenu d’un objet comme chaîne de caractères dans la console.

console3

Changer de cadre

Firefox - Exécuter des commandes Javascript dans la console est incroyablement utile, mais si vous avez un “iframe” cela devient un problème. Par chance, vous pouvez utiliser la commande suivante pour focusser dans le cadre en question et exécuter votre commande à nouveau.

console4

Chrome - Chrome vous permet de changer de cadre d’une façon différente. Sur une page qui contient des cadres, vous devez aller dans l’onglet console et choisir votre cadre dans le menu déroulant au bas de la console.

console5

Opera - Opera a lui aussi un menu déroulant pour changer de cadre, lequel est accessible dans l’onglet Console et Documents. Le menu va seulement apparaître dans la console s’il y a un cadre à sélectionner dans la page.

console6

(Merci à Paul Irish et Daniel Herzog pour les informations additionnelles)

Copier votre code directement dans le Presse-papier

Chrome, Firefox, Safari - Utiliser la commande copy() directement dans la console de l’outil de développement, vous pouvez copier le contenu d’une commande directement dans le presse-papier.

Faire des calcul dans le navigateur

Tous - Ce truc fait beaucoup de sens, mais c’est surprenant comment personne ne l’utilise. Si vous devez avoir une réponse à un calcul mathématique rapidement (exemple: la largeur de trois colonnes dans un conteneur de 456px) vous n’avez pas à ouvrir une calculatrice. Juste inscrire la question mathématique dans la console de l’outil de développement et il va vous retourner la réponse. À propos, la réponse est 152.

L’onglet “scripts”

Le lieu où tous les Javascript roule sur la page, l’onglet “script” contient un menu déroulant vous permettant de sélectionner le script que vous souhaitez déboguer.

Gestion des Javascripts compressés

Chrome, Internet Explorer, Safari - Placer un “breakpoints” dans Javascript rend le débogage beaucoup plus facile, mais si votre code est déjà en production alors surement il a été compressé. Comment pouvez-vous déboguer? Très efficace, quelques navigateurs ont une option pour décompresser votre Javascript.

Dans Chrome et Safari, simplement sélectionner l’onglet Script, trouver le fichier relatif dans le menu déroulant et appuyer sur l’icône “{ }” (pretty print) situé dans bas du panneau.

console7

Dans Internet Explorer 9, appuyer sur l’icône juste à côté du menu déroulant de sélection du script et trouver l’option “format the Javascript”

console8

Surveiller des variables

Tous - Un outil très commun dans le développement .NET, “watch” vous permet de surveiller une liste de variables, situé en haut à droite sur l’onglet “scripts”. Surveiller une variable est vraiment facile, vous n’avez qu’à insérer le nom de la variable et “watch” va garder sa valeur à jour.

console9

Éditer et exécuter du Javacript sur le moment

Chrome - Au lieu d’éditer dans un éditeur séparé et de rafraîchir la page, avec Chrome vous pouvez éditer directement dans la page. Simplement à double-cliquer où vous voulez changer le code, et taper! Appuyer sur CTRL/CMD et S pour sauvegarder.

Créer un “breakpoint” à l’endroit où un erreur Javascript apparaît

Tous - Simplement cliquer sur le bouton pause dans l’onglet Script de votre outil de développement pour pauser le script quand la première erreur Javascript apparaît. La ligne qui a causée une erreur va être surligner pour vous.

Créer un “breakpoint” basé sur un changement du DOM

Chrome, Firefox - Si vous savez que votre page brise quand une certaine partie du DOM change, ou vous voulez juste voir quel script est responsable pour le changement de l’attribut, Chrome et Firebug permettent de mettre un “breakpoint” Javascript vous permettant de trouver le responsable dans votre code. Simplement surligner l’élément que vous voulez surveiller et faîtes une clic-droit pour sélectionner la condition du “break”.

(Merci à Jason Wilson pour les informations additionnelles)


console10

L’onglet “Elements”

Connu comme l’onglet “HTML” dans Firefox et “documents” dans Opera, l’onglet “éléments” nous donne le DOM dans son état actuel. Sur Internet Explorer, vous allez avoir besoin d’appuyer sur “refresh” pour voir le DOM actuel.

Avoir les dimensions d’un conteneur

Chrome, Safari - Je suis un grand fan de l’utilisation du overflow:auto pour contenir les éléments en “float”, mais cela cause des problèmes dans les vieilles versions d’Internet Explorer à moins que vous spécifiez une largeur (auto et 100% ne vont pas suffire). Les dimensions peuvent être trouvées dans l’onglet “computed style” lequel est pratique mais tout de même en quelques cliques. Utiliser Chrome ou Safari, vous pouvez facilement voir la dimension d’un élément en le survolant dans le code source dans l’onglet “Elements”, ou en utilisant la loupe dans le toolbar du bas.

console11

Firebug, Internet Explorer, Opera - Vous allez devoir sélectionner l’onglet “Layout” dans le panneau de droite ou de naviguer dans le “computed style” dans le panneau de droite.

(Merci à Masklinn pour les informations additionnelles)

Expansion de la vue de tous les éléments

Firefox, Opera - Dans Firebug, sur l’onglet “HTML” appuyer sur l’astérisque (*) sur le clavier numérique permet l’expansion de tous les éléments excepté les scripts et feuilles de styles. Maintenir le bouton SHIFT et appuyer sur astérisque va aussi permettre l’expansion de ces derniers.

Dans Dragonfly sur Opera, il y a un bouton dans l’onglet “Documents” pour effectuer la même tâche, comme montré ci-bas.

console12

Augmenter le margin, padding, width, height, border et même color

Tous- Si vous avez un élément que vous voulez modifier le margin, padding, width ou height, vous pouvez utiliser les flèches pour augmenter/diminuer la grosseur.

  • Simplement utiliser “haut” et “bas” pour augmenter/diminuer l’unité de 1.
  • Dans Chrome, Firebug et Safari vous pouvez augmenter/diminuer l’unité par 10 en maintenant la touche “Shift” en appuyant sur les flèches.
  • Dans Chrome et Safari, vous pouvez augmenter/diminuer l’unité de 0.1 en maintenant la touche “Alt” en appuyant sur les touches “Haut” et “Bas”.
  • Dans Chrome et Safari, vous pouvez aussi augmenter/diminuer un unité par 100 en maintenant la touche “Shift” en appuyant sur “Page-up” et “Page-down”.

Ces raccourcis sont spécifiquement pratique quand vous n’êtes pas sure exactement de la grosseur que vous avez de besoin. Dans Chrome, Safari et Opera vous pouvez aussi utiliser les touches “haut” et “bas” pour augmenter/diminuer la valeur d’une couleur.

(Merci à mikkelrom pour les informations additionnelles)

Styliser les états :active, :hover, :focus, :visited

Chrome, Firefox, Opera - Styliser le CSS directement dans la console est stupéfiant, mais devient un peut difficile quand vient le temps de tester d’autres états d’éléments comme le “hover”. Dieu merci, il y a une solution.

Chrome possède un bouton pour cette tâche. Dans l’onglet “Elements”, la colonne de droite, chercher pour l’icône de sélection en pointillé lequel vous permet d’essayer d’autres états.

console13

Pour Firebug, dans la colonne de droite, appuyer sur la flèche au côté de l’onglet “Style” et sélectionnez l’état désiré.

Dans Opera, c’est l’icône qui ressemble à une liste en dessous de “style”.

Rotation des définitions de couleur

Chrome, Safari - Les couleurs peuvent être définis de différentes façons sur une page web, par nom, en hexadécimal (valeur de 3 ou 6), en RGB ou en HSL (ou sa version avec alpha). Vous pouvez avoir ces différentes définitions en rotation dans Chrome et Safari en cliquant le carré de couleur au côté de la valeur de couleur.

(Merci à Masklinn pour les informations additionnelles)

Pipette de couleur

Opera - Dans Opera, en cliquant sur le carré de couleur vous allez pouvoir choisir différente couleur avec un interface de pipette de couleur.

console14

L’onglet “Resources”

L’onglet “Resources” liste tous les stylesheets, Javascript et images utilisé sur votre page. Cet onglet n’existe malheureusement pas dans Firebug ou Internet Explorer, bien que quelques uns de ces fonctions sont intégrées dans d’autres onglets.

Sauvegarder vos changements

Chrome, Internet Explorer, Safari - Faire des changements au CSS et au Javascript est plaisant, mais cela reste compliqué de réimplanter votre code modifié dans l’original une fois que vous êtes satisfait.

Dans Internet Explorer, sur chaque onglet un icône “save” est à votre disposition pour enregistrer le fichier.

L’onglet “Resources” dans Chrome et Safari ont une fonction très pratique qui conserve vos changements dans une révision spécifique vous permettant de rapidement naviguer au travers de vos changements. Trouver le fichier où vous avez appliqué vos changements (lesquels sont facilement accessible en cliquant sur le nom de fichier de l’élément que vous avez changé), et une liste de révisions vous sera proposé. Dans Chrome, clic-droit sur le nom de fichier pour sauvegarder une nouvelle version de votre fichier. Dans Safari, vous allez malheureusement être obligé de copier et coller.

console15

Cookies” et “Storage”

Chrome, Opera, Safari - Aussi dans la liste des ressources il y a une liste d’options de “storage” avec toutes les données stockées pour chaque option. Opera a un onglet “Storage” qui fait le même boulot.

console16

L’onglet “Network”

L’onglet “network” montre toutes les ressources et fichiers téléchargés durant l’exécution de la page. Dans la plupart des cas, l’onglet nécessite d’être ouvert au chargement pour montrer les informations, donc vous pouvez devoir rafraîchir la page. L’onglet est connu sous le nom de “net” dans Firefox. Pour Internet Explorer, il n’est accessible que dans la version 9 et les plus récentes.

Désactiver le cache du navigateur

Tous - Tous les navigateurs supportent la désactivation du cache, mais il n’y a pas de standard sur le comment.

Dans Chrome, vous allez trouver l’option dans les paramètres (la petite roue dentelée). Dans Firebug, vous allez trouver l’option dans la petite flèche au côté de l’onglet “net”. Dans Internet Explorer, l’option est caché sous l’onglet “Cache”

Dans Opera, pour effacer le cache, cliquez sur l’onglet Network, sélectionnez l’onglet secondaire Network Options et choisir la première option. Dans Safari, vous pouvez désactiver votre cache sous l’onglet “Develop menu” dans la barre de menu.

Pour effacer le cache (et autre donnés) sur n’importe quel navigateur sous Windows appuyer CTRL, SHIFT et DELETE.

(Merci à Steven et karl pour les informations additionnelles)

Latence

Tous - Dans Chrome et Safari, l’onglet “Network” vous permet de voir combien de temps prends le serveur pour répondre à une requête. Les lignes de couleur en transparence pour chaque ressource indique quand une requête a été lancé, et quand la réponse a été reçu. La couleur unie indique quand la ressource a été téléchargé. Dans Chrome, vous pouvez passer au-dessus de ces lignes pour voir la compilation de où le temps a été dépensé.

Dans Opera, les mêmes principes s’appliquent excepté la latence est démontré par une ligne grise.

console17

Dans Internet Explorer, la latence est marqué en jaune et en passant la souris dessus, le navigateur vous donnera plus d’informations.

Dans Firebug, la latence est marqué par la couleur mauve avec l’inscription “waiting”. En passant la souris au-dessus, Firebug donne des détails sur comment le temps a été dépensé.

DOMContentLoaded, charger les évènements déclenchées

Chrome, Safari - L’onglet network pour Chrome et Safari révèle aussi 2 informations supplémentaires, une ligne bleu pour le DOMContentLoaded et une ligne rouge pour les évènements déclenchées.

console18

Les lignes DOMContentLoaded indiquent quand le navigateur a fini d’interpréter le document (mais d’autres ressources comme l’image et les feuilles de styles peuvent être téléchargées), les lignes de chargement indiquent quand ces ressources ont été complétées.

Si les deux évènements ont été déclenchés en même temps, la ligne va être mauve.

(Merci à Steven et Joey pour les informations additionnelles)

Plantage

Tous - Quelques fois les outils de développement plantent et ne répondent plus au clique de souris. Au lieu de simplement fermer complètement le navigateur, j’ai réalisé que fermer et ouvrir l’outil de développement par raccourci réglait le problème.

J’espère que ces fonctions et secrets vont être utile pour vous, bien que votre niveau de talent et d’expérience n’est pas déterminé par combien de ces trucs est nouveau pour vous. J’ai délibérément pas inclus “profiling” et “remote debugging” dans la liste, comme j’aimerais couvrir en détails ces sujets dans un article futur. Sentez-vous libre de laisser un commentaire, corrections et vos propres trucs.

SOURCE Original: http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/

Catégories :

HTML CSS Javascript