af83

Persisting changes - chrome dev tools

Pourquoi ne pas utiliser chrome dev tools pour faire de la css ?

Ne connaît-on pas trop bien le workflow qui suit ?

  1. Je rajoute des styles dans mon inspecteur chrome
  2. J'arrive à mon objectif
  3. J'ouvre mon éditeur de texte préféré
  4. J'essaye de me souvenir des changements que je viens de rentrer dans mon inspecteur afin de les rapporter dans ma feuille de style définitive
  5. Je pense avoir terminé et refresh mon navigateur pour voir le résultat
  6. Horreur ! Le résultat n'est pas celui que j'avais précédemment et en plus je viens de perdre toutes mes modifications css
  7. Énervé, je tente de retrouver mon objectif
  8. Je retourne à l'étape 3 et en fonction de la santé de ma mémoire, je peux parcourir les étapes 3/ à 8/ une fois, ou bien un nombre de fois qui tend vers l'infini…

Trêve de plaisanteries, je pense que nous nous sommes tous plus ou moins reconnus dans ce workflow peu glorieux.

Heureusement, il est possible grâce aux chrome dev tools de pallier ce problème : Les "Persisting Changes".

Pour faire joujou, vous aurez besoin d'une version dev de chrome.

Revenons à la fin de l'étape 2 de notre workflow et continuons :

En exemple j'ai rajouté un text-align: left et un position: absolute sur .page.

Il est possible de cliquer sur la feuille de style afin qu'elle s'ouvre dans l'onglet "Sources" (voir ci-dessous)

Screenshot 1

style.css à été modifié, les modifications sont visibles.

Avec un clic droit sur le fichier style.css, il est également possible de sélectionner "local modifications" (voir ci-dessous)

Screenshot 2

Une timeline apparaît en bas de l'inspecteur dans laquelle les modifications ont été versionnées ce qui permet de choisir ou revenir à l'état attendu. Vous pouvez visualiser l'historique complet de vos étapes de développement. (voir ci-dessous)

Screenshot 3

En enregistrant style.css dans un repo git (voir ci-dessous) il est possible de faire un git diff pour vous faire une idée des changements apportés. Tant que l'inspecteur est ouvert, le fichier est actualisé dès lors qu'une révision est appliquée.

Screenshot 4

Dans un prochain post, nous pourrons nous pencher sur l'utilisation de cette technique dans le cadre d'un projet SASS ou LESS.

Pour plus d'informations :

blog comments powered by Disqus