Faster HTML/CSS Workflow with Chrome Developer Tools

Dans ce tutoriel, je vais examiner les outils de développement de Chrome, spécifiquement comment ils peuvent aider à accélérer votre HTML / CSS workflow. Je vais aussi évoquer brièvement quelques autres outils de dev qui sont disponibles.
Introduction
Chrome est rapidement devenu un choix populaire parmi les concepteurs de sites Web et les utilisateurs pour sa vitesse, la facilité d'utilisation et de soutien pour l'adoption de fonctions début expérimentales telles que les propriétés CSS3 modernes. Lors de la conférence 2012 de Google I / O, il a été annoncé que Chrome a maintenant plus de 310 millions d'utilisateurs actifs - près du double des 160 millions d'utilisateurs, il se vantait de l'année précédente.
Google Chrome a été libéré le 2 Septembre 2008. Il a été présenté comme une version bêta pour Microsoft Windows XP et versions ultérieures, d'ici 2009, Google avait publié deux versions bêta pour OS X et Linux. Google Chrome 5.0 a été annoncé le 25 mai 2010. Cela a marqué la première version stable de soutenir tous les trois plates-formes.
Une des raisons de sa popularité parmi les concepteurs et les développeurs Web est les outils de développement qui regroupent avec le navigateur. Ces outils de développement nous permettent de tester et déboguer le code facilement et efficacement. Sans ces outils de votre flux de travail peut être beaucoup plus difficile.
Google décrire les outils de développement de Chrome comme

    Les outils de développement, groupés et disponibles dans Chrome, permet aux développeurs web et les programmeurs profonde accès dans les parties internes du navigateur et de leur application web. Les outils de développement sont fortement basées sur l'inspecteur Web WebKit, une partie du projet open source WebKit.
Sous le capot, Chrome Developer Tools est une application web qui est écrit en HTML, JavaScript et CSS. L'application est déclenché à l'exécution Javascript. Une fois déclenché, il nous permet d'interagir avec des pages web et de jouer avec eux.
Dans cet article je vais être à la recherche spécifiquement comment ces outils peuvent aider à accélérer votre flux de travail HTML et CSS. Je serai visais designers qui ne sont pas encore nécessairement connu les outils de dev de Chrome mais je suis sûr que même si vous êtes familier avec eux, vous allez apprendre quelque chose sur le chemin trop.Commencer
Tout d'abord, vous aurez besoin d'ouvrir Chrome et accédez à une page de votre choix. Les outils de développement peuvent être consultés dans l'une des trois façons. Vous pouvez cliquez-droit sur une page Web et sélectionnez "Inspecter l'élément", vous pouvez sélectionner la clé à ergot dans le coin en haut à droite de Chrome et sélectionnez «Outils> Outils de développement". La troisième et dernière façon consiste à utiliser une série de raccourcis que Chrome a mis à notre disposition:
Sous Windows et Linux, appuyez sur

    Contrôle - Maj - touches I pour ouvrir Developer Tools
    Contrôle - Maj - J pour ouvrir les outils de développement et de mettre l'accent à la console.
    Contrôle - Maj - C pour activer le mode Inspectez Element.
Sur Mac, appuyez sur

    ⌥⌘I (Commande - Option - I) les clés pour ouvrir les outils de développement
    ⌥⌘J (Commande - Option - J) pour ouvrir les outils de développement et de mettre l'accent à la console.
    ^ ⌘C (Contrôle - Option - C) pour basculer en mode Inspectez Element.
Ouvrez Chrome Developer ToolsLe ci-dessus montrant le menu contextuel lorsque vous cliquez droit sur une page Web dans Chrome.Outils HTML: The Elements Pane
Si vous êtes un concepteur de sites Web que vous vous surprendrez à passer un peu de temps dans la section «Éléments» de l'application. Cette application vous permet de voir tout ce qui dans le modèle objet de document (DOM pour faire court).
Il affiche les DOM comme un arbre, de sorte que vous pouvez facilement trouver votre chemin dans le document html. La grande chose à propos de l'outil inspecteur est que vous survolez un élément DOM dans l'arbre, il mettra en évidence le mot-clé pertinent sur la page Web que vous consultez. En sélectionnant la petite loupe dans le coin inférieur gauche de l'inspecteur, vous pouvez facilement sélectionner un nœud de dom directement sur la page Web que vous consultez et il sera mis en évidence. Cela peut être un grand gain de temps pour si vous voulez vérifier rapidement le nom ou le type de l'attribut d'un élément a sur votre page.Inspecter l'élément de ChromeL'éditeur vous permet de trouver des éléments et de leur relative CSS ID ou classe rapidement et facilement.
Vous pouvez modifier le code HTML des nœuds DOM, en double-cliquant. De cela, vous êtes en mesure de modifier les attributs tels que les valeurs, les ID et classes de ou même le type de balise HTML.
Lorsque vous cliquez avec le bouton droit sur un nœud il mettra en place un menu contextuel, qui vous permet de copier le code HTML pour elle, ou de le supprimer complètement. Vous pouvez également copier le XPath du noeud. Le XPath est un langage de requête pour sélectionner des noeuds d'un document. Cela peut venir utile lorsque vous utilisez des choses telles que Query Language de Yahoo (YQL).
Une chose que vous pouvez aussi le faire est d'éléments HTML glisser autour de la page. Pour ce faire, sélectionnez un nœud et faites-la glisser ailleurs dans l'arbre. Ce sera ensuite réfléchi sur la page Web que vous inspectez.Inspecter le menu élément de contect de Chrome
En bas de l'inspecteur des éléments vit un bar qui vous permet de naviguer le long des éléments parents. Cela laisse une trace des éléments ancêtres sélectionnés, vous permettant de visualiser et de trouver des éléments parents rapidement et facilement.
Une autre pratique petite fonctionnalité du panneau éléments est pour quand vous travaillez avec des images. Simplement survolez la balise d'image et vous serez accueillis par un petit contextuel affichage de l'image, les dimensions de l'image rendue et la taille de l'image originale. La taille de rendu peut parfois être plus grande que la taille de l'image originale qui peut être causée lors de l'ajout des choses comme les frontières ou rembourrage.
Il est important de noter que la taille de rendu se réfère à la taille de l'élément rendu et pas nécessairement de la taille de l'image réelle.CSS Outils: La sélection de styles
Les outils de développement de Chrome viennent dans ultra utile quand il vient au débogage CSS. Parfois styles CSS peuvent effondrer provoquer des effets visuels indésirables se produisent. En étant capable d'inspecter des règles de style qui sont appliquées à l'élément par le navigateur, nous sommes en mesure de trouver la racine du problème et corriger le bug.
La section 'de style calculé »vous permet de voir ce que les styles le moteur de rendu du navigateur applique à l'élément. Ceci est la dernière série de styles qui sont appliquées à la page web. En cliquant sur la petite flèche à gauche d'un style calculé particulier, vous pouvez voir où ce style est en descente à partir. Donc, si vous ne pouvez pas comprendre la raison pourquoi que div est constamment en cours de style avec un fond noir, ou pourquoi ce texte ne veut tout simplement pas aller audacieuse. Jetez un œil dans la section de style calculé et il vous permettra de voir ce que voit le navigateur.Styles & Règles CSS appariées
La section 'Styles' et le travail 'règles CSS et appariés dans une sorte semblable de façon à l'autre. Ils ont tous deux vous permettent d'ajouter, de supprimer et de modifier les règles CSS à un élément. Le panneau 'element.style' vous permet d'ajouter des propriétés à cet élément particulier, indépendamment des id ou de classe, il a - penser à ceux-ci comme des styles en ligne. Cela diffère de la section 'assortie CSS règles telles que les règles que vous modifiez dans cette section réfléchir sur tout autre élément avec cet ID ou classe particulière.
Vous pourrez noter que la règle a un style barré. Cela est généralement parce que ça étant remplacée par une autre règle d'une autre propriété. Pour aller au fond du pourquoi il est annulé, vous pouvez utiliser la section 'de style informatisée », comme mentionné ci-dessus.
Plus de designers que je ai parlé récemment se détournent de l'approche de la conception d'un site spécifique dans un logiciel de montage comme Photoshop et Fireworks et évoluent vers une "conception dans le navigateur" approche. Cette nouvelle approche vous permet de voir votre travail comme le navigateur voit.
Les outils d'édition tels que Photoshop ont différents moteurs de rendu à ceux des navigateurs qui peut signifier que les polices et les couleurs apparaissent différemment. Il met également la conception in situ et vous permet de voir comment il apparaît dans le navigateur. Sans oublier les avantages qu'il a quand il vient à la conception en réponse et pour la vaste gamme de types d'appareils que nous avons maintenant à traiter. Bien sûr, des logiciels comme Photoshop joue encore un grand rôle dans mon flux de travail même si je trouve que je suis l'utiliser pour créer des ensembles de style de nos jours, par opposition aux schémas réels.
Une caractéristique pratique de cette nouvelle approche est la façon dont vous êtes en mesure de sélectionner les couleurs. En cliquant sur l'icône d'engrenage dans le coin en haut à droite de panneau 'Styles vous êtes capable de basculer entre les différents modes de couleur. Ils sont:

    couleurs Hex - c.-à-# 000000
    RGB - c.-à-rgb (0,0,0)
    HSL - c.-à-hsl (0, 0%, 0%)
Si, par exemple, vous utilisez noir, puis affichez la page Web en direct et remarquez qu'il est un peu trop sombre pour l'esthétique que vous visez, alors vous pouvez simplement cliquer sur la petite boîte de couleur à côté de la valeur de la propriété et il apportera un sélecteur de couleur qui vous permet ensuite de renverser la luminosité du noir un peu. Cela est très utile lors de la conception à la volée.Dev couleur outils du sélecteur de ChromeSélecteur de couleurs de Chrome, il est facile d'expérimenter avec vos créations en temps réel
En ajustant les marges, les rembourrages et le positionnement que nous sommes capables de voir en temps réel combien de largeur nous avons besoin de donner à cette div pour le rendre positionner correctement. Cela permet d'économiser des charges de temps certainement plus avoir à passer entre le navigateur et votre éditeur de code, puis avoir à enregistrer votre document et rafraîchir.
Dans le coin supérieur droit de la «styles» à côté de l'icône des engrenages vit une petite icône de chapiteau. En cliquant sur ce que nous sommes en mesure de basculer entre les différents états d'un élément. Ces différents états sont

    : Actif
    : Hover
    : Focus
    : Visited
En activant l'un de ces l'état choisi reste allumé et vous serez en mesure de modifier ses propriétés.Les outils de dev de Chrome inspecter l'étatMontrant les différents états que vous pouvez sélectionner.Montage direct et Historique des révisions
Un de mes fonctionnalités préférées de l'inspecteur des styles outils de dev est la capacité à être en mesure de trouver rapidement le lieu dans votre feuille de style de la propriété que vous modifiez vie. Si vous regardez à la droite de la propriété que vous modifiez, vous verrez le nom du numéro de feuille de style et de la ligne à la localisation, il est. En cliquant sur le lien, vous êtes redirigé vers la «sources vue». Cela montre fondamentalement votre feuille de style en plein. De là, vous êtes capable de travailler sur elle comme vous le feriez dans votre éditeur de code. La seule différence étant 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 sur le nom de celui-ci un nouveau menu contextuel ouvre où vous pouvez choisir d'ouvrir la feuille de style dans le navigateur et l'enregistrer. La grande chose à ce sujet est que, en cliquant sur «des modifications locales», vous êtes en mesure de voir une histoire de révision complète de tous les changements que vous avez faits. Donc, si vous avez foiré et que vous voulez revenir à certaines modifications apportées il ya dix minutes, puis Chrome a votre dos.Les outils de dev de Chrome de modification localeVous pouvez maintenant sauvegarder votre feuille de style édité directement dans les outils de développement. Cela vous donne aussi une histoire de révision des modifications que vous avez apportées récemment.Métrique
Retour sur dans la barre latérale éléments que nous avons le panneau métriques. Avec ce panneau, vous êtes en mesure de visualiser et de modifier les paramètres du modèle de boîte de l'élément en cours. Ceci donne une représentation visuelle de ces paramètres qui comprennent:

    marge
    rembourrage
    frontière
    position
Conclusion
Outils Chrome Developer figurer parmi les outils les plus utiles pour accélérer mon HTML / CSS design web workflow.
Bien sûr, il ya beaucoup d'autres usages pour eux, comme les pages d'analyse temps et la performance de son chargement. Il ya aussi d'autres outils qui font le même genre d'emplois tels que Firebug pour Firefox. La dernière version de Firefox est également livré avec des outils utiles qui ne l'ont pas encore été mises en œuvre dans l'équivalent de Chrome, mais nous espérons qu'ils seront un jour prochain. Ceux-ci comprennent des choses comme la vue '3D'. Vue 3D vous permet de voir une représentation 3D d'un site Web que vous pouvez faire pivoter et orienter autour. Cela rend plus facile de visualiser la nidification de votre contenu. Ils ont également introduit mode "réactif" qui met le site à l'intérieur d'un cadre qui vous pouvez redimensionner pour voir comment il va apparaître à différentes tailles de points d'arrêt.
Je ne dis pas nécessairement les outils de développement de Chrome sont les meilleurs là-bas. Pour moi, le seul son que je ai jamais utilisé et je sais combien de temps cela moi et mon flux de travail a sauvé. Voilà pourquoi je voulais partager avec vous quelques-uns des conseils que je l'ai découvert et espérons qu'ils vous permettent de gagner un peu de temps aussi!Liens supplémentaires lectures et ressourcesAdobe Shadow - Maintenant, vous pouvez utiliser l'inspecteur Chrome sur votre bureau pour le débogage des problèmes de périphériques mobiles tels que l'iPhone. De la même manière comme il le fait pour le bureau des modifications que vous apportez seront reflétés en temps réel sur votre appareil.Chrome DevTools Autosave - cette extension chrome vous permet de faire des changements en direct à CSS et JavaScript locale fichiers directement à partir de l'intérieur des outils de développement de Chrome. Les modifications apportées à l'intérieur du navigateur sont automatiquement enregistrés dans leurs fichiers locaux correspondants.Chrome Developer Tools Evolution - Vidéo de I / O 2012 sur les nouveautés de l'outil.