Des ressources pour accélérer l’intégration HTML et CSS avec Google Chrome
Notez cet article

Aujourd'hui, je vous propose de découvrir une dizaine d'extensions pour le navigateur Google Chrome qui vous permettront de gagner du temps lors de vos intégrations.

La console de developpement Google Chrome 

Je pense que tous les développeurs Javascript et les intégrateurs parmi vous connaissent déjà les outils de développeurs de Chrome.

Cette petite console que l'on peut afficher avec CTRL+SHIFT+i, ou bien en allant du menu "plus d'outils" permet d'effectuer de nombreuses tâches utiles lors du développement d'un site, de l'audit à l'édition live du DOM et du CSS

Même si vous pensez bien les connaitre, attention, les outils pour développeurs de google chrome sont plus puissant que beaucoup ne le supposent !

Saviez-vous par exemple qu'il est possible d'enregistrer les modifications effectuées dans l'éditeur CSS directement dans les fichiers ? Si cela vous intéresse, je vous propose la documentation officielle des outils de développement (en anglais) ainsi qu'une réponse très documentée et illustré sur Stack Overflow (en anglais aussi).

https://developer.chrome.com/devtools/docs/workspaces

http://stackoverflow.com/questions/6843495/how-to-save-css-changes-of-styles-panel-of-chrome-developer-tools

Sachez aussi qu'il est possible de travailler directement avec vos fichiers SASS où SCSS a la place des fichiers générés, grace à l'utilisation de fichiers map. Pour plus d'informations, je vous propose le lien suivant (en anglais aussi).

https://developer.chrome.com/devtools/docs/css-preprocessors

JaSON

Jason est un analyseur, lecteur et débuguer pour les fichiers json et XML.

Pendule

Pendule est une extension pleine de possibilités. Édition de CSS, analyse et débug de formulaires, suppression de cookies, cette extension peut à elle seule suffire à tous vos besoins !

CSS Dig

CSS Dig est une application permettant d'analyser les fichiers CSS de votre page, pour en tirer les différents styles redondants.

CSS-Shake

CSS-Shake est un éditeur graphique sous la forme d'application chrome, que vous pourrez donc lancer depuis votre navigateur. Je le trouve malheureusement un peu basique, ce qui est tres dommage vu le niveau de finitions.

Eat my cookies

Cette petite extension vide simplement les cookies que vous avez sur une page spécifique, ni plus ni moins. Croyez-moi, c'est bien plus agréable que de devoir vider les cookies depuis la console de développement Javascript a chaque appel !

WhatFont

Vous êtes-vous déjà demande quelles étaient les polices utilisées sur tel ou tel site ? Cette petite extension vous permettra de combler votre curiosité le plus rapidement possible.

Page Ruler

Cette application vous permettra de mesurer très précisément les espaces et éléments de votre site Web.

colorZilla

Cette extension est une véritable boite à outils pour tout ce qui touche à la couleur. Récupérez la palette utilisée sur un site où simplement une couleur grace à un color-picker, générez des gradients CSS, et beaucoup d'autres choses !