Share
Dans ce didacticiel, nous examinerons les outils de développement Chrome et plus particulièrement leur contribution à l’accélération de votre flux de travail HTML / CSS. Je vais aussi regarder brièvement quelques autres outils de développement disponibles..
Chrome est rapidement devenu un choix populaire parmi les concepteurs et les utilisateurs Web pour sa rapidité, sa convivialité et sa capacité à adopter les premières fonctionnalités expérimentales telles que les propriétés CSS3 modernes. Lors de la conférence I / O de Google en 2012, il a été annoncé que Chrome comptait désormais plus de 310 millions d'utilisateurs actifs, soit près du double des 160 millions d'utilisateurs de l'année précédente..
Google Chrome a été lancé pour la première fois le 2 septembre 2008. Il a été introduit en tant que version bêta pour Microsoft Windows XP et ses versions ultérieures. En 2009, Google avait publié des versions bêta pour OS X et Linux. Google Chrome 5.0 a été annoncé le 25 mai 2010. Il s'agissait de la première version stable à prendre en charge les trois plates-formes..
L'une des raisons de sa popularité parmi les concepteurs et les développeurs Web réside dans les outils de développement fournis avec le navigateur. Ces outils de développement nous permettent de tester et de déboguer le code facilement et efficacement. Sans ces outils, votre flux de travail pourrait être beaucoup plus difficile.
Google décrit les outils de développement de Chrome comme étant:
Les outils de développement, fournis et disponibles dans Chrome, permettent aux développeurs et aux programmeurs d’accéder aux ressources internes du navigateur et de leur application Web. Les outils de développement sont largement basés sur WebKit Web Inspector, une partie du projet open source WebKit..
Sous le capot, Chrome Developer Tools est une application Web écrite en HTML, JavaScript et CSS. L'application est déclenchée à l'exécution de Javascript. Une fois déclenché, il nous permet d’interagir avec des pages Web et de jouer avec elles..
Dans cet article, je vais examiner spécifiquement comment ces outils peuvent aider à accélérer votre flux de travail HTML et CSS. Je viserai les concepteurs qui n'ont pas encore expérimenté les outils de développement de Chrome, mais je suis sûr que même si vous les connaissez bien, vous apprendrez également quelque chose en cours de route..
Tout d'abord, vous devez ouvrir Chrome et accéder à la page de votre choix. Les outils de développement sont accessibles de trois façons. Vous pouvez cliquer avec le bouton droit sur une page Web et sélectionner "Inspecter l'élément", sélectionner la clé à molette située dans le coin supérieur droit de Chrome et sélectionner "Outils> Outils de développement". La troisième et dernière méthode consiste à utiliser une série de raccourcis mis à notre disposition par Chrome:
Sous Windows et Linux, appuyez sur
Sur Mac, appuyez sur
Si vous êtes un concepteur de sites Web, vous passerez beaucoup de temps dans la section "Éléments" de l'application. Cette application vous permet de tout voir dans le modèle d'objet document (DOM pour faire court).
Il affiche le DOM comme un arbre, de sorte que vous puissiez facilement vous repérer dans le document HTML. L’intérêt de l’outil d’inspecteur est que lorsque vous survolez un élément DOM dans l’arborescence, il met en évidence la balise correspondante sur la page Web que vous visualisez. En sélectionnant la petite loupe dans le coin inférieur gauche de l'inspecteur, vous pouvez facilement sélectionner un nœud dom directement sur la page Web que vous consultez et celui-ci sera mis en surbrillance. Cela peut vous faire gagner beaucoup de temps si vous souhaitez vérifier rapidement le nom ou le type d'attribut d'un élément sur votre page..
Vous pouvez éditer le code HTML des noeuds dom en double-cliquant dessus. À partir de cela, vous pouvez modifier des attributs tels que des valeurs, des ID et des classes ou même le type de balise HTML..
Lorsque vous cliquez avec le bouton droit sur un nœud, un menu contextuel apparaît, vous permettant de copier le code HTML correspondant ou de le supprimer complètement. Vous pouvez également copier le XPath du nœud. XPath est un langage de requête permettant de sélectionner des nœuds dans un document. Cela peut s'avérer utile lors de l'utilisation d'éléments tels que le langage de requête Yahoo (YQL).
Une chose que vous pouvez également faire est de faire glisser des éléments HTML autour de la page. Pour ce faire, sélectionnez un nœud et faites-le glisser ailleurs dans l'arborescence. Cela sera ensuite reflété sur la page Web que vous inspectez.
Au bas de l'inspecteur d'éléments se trouve une barre qui vous permet de naviguer le long des éléments parents. Cela laisse une trace des ancêtres des éléments sélectionnés, vous permettant de visualiser et de trouver des éléments parents rapidement et facilement..
Une autre petite fonctionnalité utile du panneau des éléments est lorsque vous travaillez avec des images. Passez simplement la souris sur l’étiquette d’image et vous serez accueilli par un petit menu contextuel affichant l’image, les dimensions de l’image rendue et la taille de l’image originale. La taille du rendu peut parfois être supérieure à la taille de l'image d'origine, ce qui peut être causé par l'ajout d'éléments tels que des bordures ou des marges intérieures..
Il est important de noter que la taille de rendu fait référence à la taille de l'élément rendu et pas nécessairement à la taille de l'image réelle..
Les outils de développement de Chrome sont extrêmement utiles pour le débogage de CSS. Parfois, les styles CSS peuvent s’effondrer et provoquer des effets visuels indésirables. En pouvant vérifier les règles de style appliquées à l'élément par le navigateur, nous sommes en mesure de trouver la racine du problème et de corriger le bogue..
La section "style calculé" vous permet de voir les styles que le moteur de rendu du navigateur applique à l'élément. Ceci est le dernier ensemble de styles appliqués à la page Web. En cliquant sur la petite flèche à gauche d'un style calculé, vous pouvez voir d'où il décroît. Donc, si vous ne pouvez pas comprendre la raison pour laquelle cette div est constamment stylée avec un arrière-plan noir, ou pourquoi ce texte ne sera tout simplement pas en gras. Jetez un coup d’œil dans la section style calculée et cela vous permettra de voir ce que le navigateur voit.
La section "Styles" et les "règles CSS correspondantes" fonctionnent de manière similaire. Ils vous permettent tous deux d'ajouter, de supprimer et de modifier des règles CSS à un élément. Le panneau "element.style" vous permet d’ajouter des propriétés à cet élément, quel que soit son identifiant ou sa classe - considérez-les comme des styles inline. Cela diffère de la section "Matched CSS Rules", car les règles que vous modifiez dans cette section seront répercutées sur tout autre élément ayant cet ID ou cette classe particulière..
Vous remarquerez parfois qu'une règle a un style barré. Cela est généralement dû au fait qu’elle est remplacée par une autre règle d’une autre propriété. Pour comprendre la raison de son remplacement, vous pouvez utiliser la section "Style calculé" comme indiqué ci-dessus..
De plus en plus de designers auxquels j'ai parlé récemment s'éloignent de la conception d'un site spécifique dans un package d'édition tel que Photoshop et Fireworks et s'orientent désormais vers une approche de "conception dans le navigateur". Cette nouvelle approche vous permet de voir votre travail comme le navigateur le voit.
Les outils d'édition tels que Photoshop ont des moteurs de rendu différents de ceux des navigateurs, ce qui peut signifier que les polices et les couleurs semblent différentes. Il met également la conception in situ et vous permet de voir comment elle apparaît dans le navigateur. Sans parler des avantages qu’il présente en matière de conception réactive et de la vaste gamme de types d’appareils que nous devons maintenant traiter. Bien entendu, un logiciel comme Photoshop joue toujours un rôle important dans mon flux de travail, même si je constate que je l'utilise pour créer des jeux de styles, contrairement aux mises en page réelles..
Une fonction pratique pour cette nouvelle approche est la possibilité de sélectionner des couleurs. En cliquant sur l'icône représentant une roue dentée dans le coin supérieur droit du panneau "Styles", vous pouvez basculer entre différents modes de couleur. Elles sont:
Si, par exemple, vous utilisez le noir, puis que vous visualisez la page Web en direct et que vous remarquez qu’elle est un peu trop sombre pour l’esthétique que vous visez, vous pouvez simplement cliquer sur la petite zone de couleur située en regard de la valeur de la propriété. un sélecteur de couleur qui vous permet ensuite de réduire légèrement la luminosité du noir. Cela est vraiment utile pour la conception à la volée.
En ajustant les marges, les rembourrages et le positionnement, nous pouvons voir en temps réel la largeur à donner à cette div pour la positionner correctement. Cela permet certainement de gagner beaucoup de temps entre le navigateur et votre éditeur de code, puis de sauvegarder votre document et de l'actualiser..
Dans le coin supérieur droit des "styles" à côté de l'icône d'engrenages, une petite icône apparaît. En cliquant dessus, nous pouvons basculer entre les différents états d'un élément. Ces différents états sont
En activant l’une de ces options, l’état choisi restera activé et vous pourrez modifier ses propriétés..
L'une des fonctionnalités préférées de l'inspecteur de styles de dev tools est la possibilité de trouver rapidement dans la feuille de style la localisation de la propriété que vous modifiez. Si vous regardez à droite de la propriété que vous modifiez, vous verrez le nom de la feuille de style et le numéro de la ligne indiquant où il se trouve. En cliquant sur le lien, vous accédez à la "vue sources". Cela montre essentiellement votre feuille de style dans son intégralité. À partir de là, vous pouvez travailler comme dans l’éditeur de code. La seule différence est que vous voyez vos résultats en temps réel..
Vous pouvez également enregistrer votre feuille de style en faisant glisser le panneau latéral. Si vous cliquez avec le bouton droit de la souris sur son nom, un nouveau menu contextuel s'ouvre et vous pouvez choisir d'ouvrir la feuille de style dans le navigateur et de l'enregistrer. L'avantage est que, en cliquant sur "Modifications locales", vous pouvez voir un historique complet des révisions de toutes les modifications que vous avez apportées. Donc, si vous vous êtes trompé et que vous souhaitez revenir à certaines modifications que vous avez apportées il y a dix minutes, Chrome a le dos.
De retour dans la barre d’éléments, nous avons le panneau des mesures. Avec ce panneau, vous pouvez afficher et modifier les paramètres du modèle de boîte de l'élément actuel. Cela donne une représentation visuelle de ces paramètres, notamment:
Les outils de développement Chrome figurent parmi les outils les plus utiles pour accélérer mon processus de conception Web HTML / CSS.
Bien sûr, ils ont de nombreuses autres utilisations, telles que l’analyse des temps de chargement des pages et des performances des scripts. Il existe également d'autres outils qui effectuent des tâches similaires, telles que Firebug pour Firefox. La dernière version de Firefox est également livrée avec des outils utiles qui n'ont pas encore été implémentés dans l'équivalent de Chrome, bien que nous espérons qu'ils le seront bientôt. Ceux-ci incluent des choses comme la vue "3D". La vue 3D vous permet de voir une représentation 3D d'un site Web sur lequel vous pouvez faire pivoter et vous orienter. Cela facilite la visualisation de l'imbrication de votre contenu. Ils ont également introduit le "mode réactif" qui met le site Web dans un cadre que vous pouvez redimensionner pour voir son apparence à différentes tailles de point d'arrêt..
Je ne dis pas nécessairement que les outils de développement de Chrome sont les meilleurs qui soient. Pour moi, c’est le seul que j’ai jamais utilisé et je sais combien de temps il m’a sauvé ainsi que mon flux de travail. C'est pourquoi je voulais partager avec vous certains des conseils que j'ai découverts et espère qu'ils vous feront également gagner un peu de temps.!
Accentsconagua