Share
Les développeurs Web doivent comprendre et utiliser les outils de développement de navigateur. Dans ce didacticiel, je vais vous présenter les outils de développement Chrome. Vous apprendrez quelques notions de base, à commencer par le balisage et le style d'une page Web..
Une note rapide pour les utilisateurs d'outil de développement existantsLe but de ce didacticiel est de fournir une introduction relativement basique aux outils de développement de Chrome. Si vous utilisez un outil de développement quelconque, tel que Firebug dans Firefox ou les outils de développement d'IE, vous constaterez peut-être que vous connaissez déjà une grande partie des informations couvertes dans ce didacticiel..
Les outils de développement de navigateur vous permettent d’explorer une page Web et d’inspecter à peu près tout ce qui se trouve dans la page. Par exemple, vous pouvez:
Avant d’explorer les outils de développement de Chrome, je souhaite vous donner un bref aperçu des outils de développement fournis par les principaux navigateurs. Notez qu'il ne s'agit pas d'un aperçu complet de ces outils et de leurs fonctionnalités, mais je fournis des informations de base pour chaque outil..
Vous pouvez utiliser les outils de développement de Chrome, Chrome Canary et même Chromium..
Safari utilise le code du référentiel Web Inspector; cependant, vous constaterez peut-être que cette mise à jour n’est pas mise à jour aussi souvent que Chrome..
Pyromane
Firefox dispose désormais de son propre ensemble d’outils de développement, qui met l’accent sur le côté visuel des choses. Pour ceux qui sont habitués à Firebug, c'est toujours disponible en tant qu'add-on.
Remarque: ce tutoriel utilise la version Canary de Chrome. Par conséquent, certaines fonctionnalités décrites dans cet article peuvent ou non être disponibles dans les versions bêta ou stable.
Avant de jeter un coup d’œil au contenu de la Éléments panneau, prenons un peu de temps pour comprendre les petites commandes en haut et en bas. Veuillez vous reporter à la liste numérotée sous l'image suivante, qui explique les différents éléments de l'interface utilisateur dans la fenêtre de l'outil..
Il est bon de choisir une mise en page avec laquelle vous êtes à l'aise. Cliquez une fois sur le coin inférieur gauche et remarquez comment le volet des outils de développement se détache de la fenêtre principale - idéal pour les configurations à plusieurs moniteurs. Cliquez sur l'icône en bas à gauche et maintenez-la enfoncée pour accéder à droite, comme ceci:
le Éléments Le panneau répertorie le balisage de la page tel qu’il est rendu dans le navigateur. Toute modification apportée au DOM via JavaScript est reflétée dans les éléments trouvés dans ce panneau..
Familiarisons-nous avec ce panneau. Comme précédemment, reportez-vous à la liste ci-dessous la capture d’écran suivante qui identifie les différentes parties du Éléments panneau.
Le pouvoir que nous ont donné les outils de développement n’est rien de moins qu’incroyable.
Accentsconagua
La section des polices affiche uniquement les polices que le navigateur a dû télécharger.
Modification du DOM dans le Éléments Le panel est un processus assez simple. Pour supprimer un nœud, faites simplement un clic droit dessus et sélectionnez Supprimer le noeud. Comme on pouvait s'y attendre, la suppression d'un nœud parent supprime également ses enfants. Astuce pratique: Vous pouvez également appuyer sur la touche Suppr de votre clavier pour supprimer le nœud sélectionné..
Changer le type d'un élément est possible en double-cliquant sur le nom de l'élément lui-même. Par exemple: le p partie sur une balise de paragraphe. Naturellement, le changement d'un élément d'un type à un autre entraîne le changement des balises d'ouverture et de fermeture..
Afficher les ressources de la page est essentiel pour le débogage.
Ajout d'attributs peut être obtenu en faisant un clic droit sur l’élément et en sélectionnant Ajouter un attribut. Le curseur se positionne immédiatement là où vous le souhaitez et vous pouvez commencer à saisir les attributs que vous souhaitez ajouter à l'élément. Par exemple: class = "titre". Appuyez sur la touche de tabulation de votre clavier pour positionner le curseur sur la position d'attribut suivante..
Modification des attributs est similaire à les ajouter. Recherchez l'attribut que vous souhaitez modifier, puis double-cliquez sur le nom de l'attribut ou sur sa valeur. Le premier met en évidence le nom de l'attribut, et le second met en évidence la valeur.
Édition HTML brute est activé en faisant un clic droit sur un élément et en sélectionnant Modifier en HTML.
Les outils de développement fournissent quelques techniques utiles pour localiser des éléments dans le document. En survolant des éléments de la Éléments volet provoque la mise en surbrillance des éléments rendus correspondants dans la page. C'est un excellent moyen de rechercher l'élément correspondant dans les outils de développement qui correspond à l'élément de la page..
Naturellement, nous ne voyons pas d’éléments en dehors de la fenêtre de visualisation du navigateur mis en surbrillance lorsque vous survolez les éléments correspondants dans la vue. Éléments vitre. Heureusement, nous voyons une info-bulle indiquant la direction de l'élément hors vue. La cerise sur le gâteau, cependant, est le Défiler dans l'affichage fonctionnalité trouvée dans le menu contextuel d'un élément. Il fait exactement ce que son dit: il fait défiler l'élément dans la vue.
Les outils de développement ont également une fonctionnalité de recherche. Lorsque le volet des outils de développement est activé, appuyez sur Ctrl + f pour ouvrir le champ de recherche. Ceci est une simple boîte de recherche de texte; alors, en tapant "body", on trouvera la première instance du texte "body" dans le document.
Avant d’arriver aux volets de style (le côté droit) de la Éléments onglet, nous pouvons accéder à certaines informations de style directement à partir d’un élément s’il possède les trois marges, rembourrages et bordures spécifiés dans la feuille de style. Survoler l'un de ces éléments nous donne un aperçu de son modèle de boîte, comme ceci:
Lorsque vous vous demandez pourquoi certains éléments flottants ne se comportent pas comme prévu, l'affichage des informations de marge / remplissage peut aider à diagnostiquer le problème. Par exemple, vous constaterez peut-être qu’un élément est plus large que ce à quoi vous vous attendiez en raison du remplissage supplémentaire..
En ce qui concerne les marges / les marges / les bordures, passons à la zone des styles de la Éléments panneau et consultez le volet "Métriques".
Cela vous permet d’explorer en profondeur et d’identifier les problèmes éventuels de la restitution d’un élément. C'est aussi un excellent outil d'apprentissage. si vous n’avez pas compris le modèle de boîte CSS, le Métrique Le diagramme est un excellent outil visuel.
le Métrique Le volet vous permet d’afficher les dimensions, le rembourrage, les bordures et les marges des éléments. Remarquez comment vous pouvez surligner chaque partie pour obtenir une représentation visuelle du rendu dans le navigateur. le Métrique Le diagramme donne également des mesures en pixels pour chaque partie de l'élément, par ex. une règle de style de rembourrage: 10px 5px (10px en haut et en bas, 5px droite et gauche) montrera les mesures exactes de chaque côté de l'élément.
Afficher des informations sur le style est amusant, mais bricoler immédiatement avec le style de n'importe quelle page occupe un rang bien plus élevé sur l'indicateur de plaisir. Que ce soit pour nous éduquer, expérimenter avec un design ou même pour communiquer des idées à nos pairs, le pouvoir que nous ont donné les outils de développement n’est rien de moins que d’incroyable.
Assurer le modes Le panneau est élargi et cliquez juste à droite du crochet d’ouverture. Vous remarquerez qu'un curseur se positionne automatiquement de sorte que vous puissiez écrire une propriété de style. Tapez un nom de propriété, appuyez sur la touche de tabulation pour déplacer le curseur sur la partie de la valeur et tapez la valeur. Je vais ajouter le CSS suivant:
bordure: 1px vert solide
le Éléments panneau répertorie le balisage de la page tel qu'il est rendu dans le navigateur.
Lorsque vous commencez à saisir le nom de la propriété, Google Chrome fournit des suggestions vous permettant de compléter automatiquement le processus. Impressionnant! En appuyant sur l'onglet sélectionne la correspondance la plus proche de ce que vous avez tapé et déplace le curseur sur la position de la valeur. Cependant, en appuyant sur touche flèche droite fait que le curseur reste dans la partie de propriété mais remplit la correspondance la plus proche de celle que vous avez saisie.
La complétion automatique fonctionne également avec les valeurs de propriété. Par exemple, taper "pos" * tab * "fi" * tab * crée une propriété de style de position: fixe. Lors de la saisie de valeurs en pixels / en pourcentage, telles que 15% ou 10 px, nous pouvons incrémenter et décrémenter ces valeurs à l’aide des touches fléchées haut et bas. Pour incrémenter de 10, utilisez les touches Maj + Flèche haut.
La modification des valeurs de couleur devient un jeu d'enfant grâce au sélecteur de couleur. Après avoir saisi une valeur de couleur, cliquez une fois sur le petit carré de couleur situé à gauche de la valeur pour afficher l'outil de sélection de couleur. Vous pouvez également basculer entre les formats de valeurs de couleur en maintenant la touche Maj enfoncée et en cliquant sur le petit carré coloré..
Vous pouvez créer une nouvelle règle de style en cliquant sur la petite icône + dans le volet de styles. Le balisage qui ressemble à:
Bonjour
Génère automatiquement la règle de style suivante:
#quelque chose
Le balisage qui ressemble à:
Bonjour
Génère automatiquement les éléments suivants:
.une classe
Le balisage qui ressemble à:
Bonjour
Génère:
.h1
Le balisage qui ressemble à:
salut
Génère automatiquement:
.class1.class2.class3
Bien sûr, les règles de style peuvent être modifiées à votre guise.
le Éléments Le panneau vous donne beaucoup de puissance avec la structure et le style de la page, mais les outils de développement nous donnent beaucoup plus d'outils essentiels à notre travail..
le Ressources Le panneau indique les ressources utilisées par une page. Jetons un coup d'oeil à ce qu'il fournit.
le Métrique le volet vous permet d'afficher les dimensions, le remplissage, les bordures et les marges des éléments.
stockage local.sessionStorage.Les outils de développement ont également une fonction de recherche.
stockage local, cookies, ou tout autre mécanisme de stockage de données. De plus, certaines ressources, telles que stockage local peut être modifié via les outils de développement.Malgré l’absence d’utilisation des cadres sur les sites Web actuels, comprendre comment inspecter une page comportant plusieurs cadres est une compétence précieuse. Dans la capture d'écran suivante, vous remarquerez une page à colonnes où chaque colonne représente un cadre différent:
Vous pouvez enregistrer une ressource sur votre ordinateur
Chaque cadre est placé dans son propre dossier. Chaque dossier contient les ressources de chaque page. Vous pouvez cliquer sur chaque page pour afficher son contenu. Voir le contenu d'une page HTML est utile, mais nous pouvons approfondir chaque page et voir ses ressources. JavaScript, CSS, des images et même des polices peuvent être consultés! Les actifs contenant du code sont affichés dans la visionneuse de code des outils de développement, accompagnée de la coloration syntaxique et des numéros de ligne..
Il est important de noter que les polices système, telles que Arial ou Helvetica, ne sont pas répertoriées sous Polices; la section des polices affiche uniquement les polices que le navigateur a dû télécharger.
La police est mise à l'échelle afin de pouvoir s'intégrer dans la zone de contenu de la ressource. Par conséquent, le redimensionnement de la zone de contenu de la ressource redimensionne également l'actif.!
Il est clair que de la pensée est allée dans l'interface utilisateur de visualisation d'image.
Les outils de développement affichent l'image dans la zone de contenu et l'échelle est redimensionnée en fonction de la taille de la zone de contenu. Les images avec transparence (comme celle de la capture d'écran ci-dessus) sont affichées avec un damier à l'arrière-plan, ce qui facilite la visualisation de l'image. D'autres informations utiles, telles que les dimensions, la taille du fichier et le type MIME, sont affichées sous l'image..
Le JavaScript! Cliquer sur un fichier de script affiche son contenu, mais pas grand chose d'autre.
Mais ne désespérez pas; L'affichage des actifs est simplement: l'affichage des actifs. Dans un prochain tutoriel, nous examinerons le support et les fonctionnalités JavaScript des outils de développement..
Vous pouvez afficher les différentes feuilles de style que le navigateur a chargé pour la page Web..
Comme avec les fichiers JavaScript, vous ne pouvez pas faire grand chose avec les ressources de la feuille de style.
Parfois, le navigateur ne pourra pas charger une ressource particulière en raison de problèmes de réseau ou d'une erreur de développement..
Lorsque cela se produit, une petite notification rouge apparaît à droite de l'actif. Le nombre indique combien d'erreurs se sont produites et le volet de contenu fournit plus de détails sur l'erreur..
Chaque ressource a un menu contextuel; il suffit de cliquer avec le bouton droit de la souris sur une ressource pour afficher un menu semblable à celui-ci:
Vous pouvez enregistrer une ressource sur votre ordinateur, ouvrir une ressource dans un nouvel onglet et effectuer de nombreuses autres tâches. Double-cliquez sur la ressource pour ouvrir l'actif dans un nouvel onglet..
Comme je l'ai déjà mentionné, vous pouvez afficher les informations sur les cookies d'un site Web particulier. Par exemple, naviguer sur Twitter tout en étant connecté peut présenter des informations similaires à celles présentées dans cette capture d'écran:
Ici, on voit:
Lorsque vous vous demandez pourquoi certains éléments flottants ne se comportent pas comme prévu, l'affichage des informations de marge / remplissage peut aider à diagnostiquer le problème..
.twitter.com permet à n'importe quel sous-domaine sur twitter.com.Vous pouvez supprimer un cookie en cliquant avec le bouton droit de la souris sur un cookie et en sélectionnant Effacer du menu contextuel.
Il est intéressant de noter comment les navigateurs utilisent les informations de cookies pour déterminer si vous êtes un utilisateur authentifié. Lors de la connexion à Twitter, la suppression des cookies "auth_token" et "_twitter_sess" nous invite à nous connecter après l'actualisation de la page. Twitter stockera probablement notre statut connecté et d'autres informations sensibles dans ces cookies..
Stockage et affichage des paires clé / valeur dans stockage local est plutôt facile. Plutôt que de stocker nos propres clés, nous utiliserons un site Web existant à titre d'exemple. La capture d'écran suivante montre la vue du stockage local d'une application exemple d'évier de cuisine réalisée avec le cadre d'application Web mobile Sencha Touch..
Lors de la première consultation de la page, le navigateur demande un fichier CSS. Actualiser la page semble beaucoup plus vif parce que Sencha a stocké le CSS dans un stockage local. L'application de l'évier de cuisine a quelques paires clé / valeur intéressantes. Par exemple, une clé ressemble à ceci:
3a867610-670a-11e1-a90e-4318029d18bb-http: //dev.sencha.com/deploy/touch/examples/production/kitchensink/resources/css/app.css
La valeur de cette clé commence par ceci:
/ * 45e6f4ffe818855b26f3dcbfc156025eca58e4f5 * / code, pre, pre * font-family: Menlo, Monaco, Courrier, monospace
Steve Souders a écrit sur le stockage d’actifs dans un stockage local; c'est une utilisation intéressante et passionnante du stockage local qui peut améliorer les performances, en particulier sur les appareils mobiles.
Le cache de l’application indique au navigateur quelles ressources il doit mettre en cache, et le Cache d'application la catégorie nous permet de voir ce qui a été mis en cache.
Il y a trois colonnes avec cette vue:
Consultez ce tutoriel si vous n'êtes pas familier avec le cache d'applications HTML5.
Nous commençons à peine. Dans la deuxième partie, nous examinerons un plus grand nombre de panneaux légèrement axés sur les performances afin de pouvoir offrir une meilleure expérience utilisateur..
