web-dev-qa-db-fra.com

Afficher toutes les modifications apportées via Chrome Outils de développement

Comment afficher toutes les modifications que j'ai apportées à l'aide de Chrome Outils de développement?

Exemple:

  1. ouvrir un site Web.
  2. ouvrir Chrome Developer Tool .
  3. changer l'attribut de style d'une balise.
  4. ajouter un nouveau style à un fichier css.
  5. changer une fonction JavaScript.

Comment voir ces changements? Quelque chose comme:

    page.html:56 Change style attribute of foo to bar.
    page.css:21 Lines added: 21,22,23,24.
    page.js:12 Line modified.
cssgoogle-chromebrowsergoogle-chrome-devtools
43
MaciejLisCK

Ainsi, les modifications locales fonctionnent pour toutes les modifications apportées aux fichiers que vous apportez, mais elles ne vous aident pas si vous ajoutez des styles en ligne ou modifiez votre DOM de quelque manière que ce soit.

J'aime utiliser une méthode où je capture le DOM avant et après mes modifications.

copy(document.getElementsByTagName('html')[0].outerHTML)

Cela place l'état actuel du DOM dans le tampon de copie.

Collez-le dans la colonne de gauche d'un outil de diff comme vimdiff, http://www.mergely.com/ ou Meld.

Ensuite, je termine mes modifications et réexécute la commande de copie. Je le colle dans la colonne de droite de l'outil de comparaison, puis je peux voir mes modifications.

diff view

Article complet ici: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a

14
RoccoB

Depuis Chrome 65 il y a un onglet de changements !!

Oui vraiment, c'est incroyable :)

https://developers.google.com/web/updates/2018/01/devtools#changes

12
CrazyTim

Vous voudrez peut-être essayer la fonction Modifications locales :

Les DevTools conservent également un historique des révisions de toutes les modifications apportées aux fichiers locaux. Si vous avez modifié un script ou une feuille de style et enregistré des modifications à l'aide des outils, vous pouvez cliquer avec le bouton droit sur un nom de fichier dans Sources (ou dans la zone source) et sélectionner "Modifications locales" pour afficher cet historique.

enter image description here

Le panneau des modifications locales apparaîtra affichant:

  • Un diff des changements
  • L'heure à laquelle le changement a été effectué à
  • Le domaine sous lequel un fichier a été modifié
9
apaul