Показать все изменения, внесенные с помощью инструментов разработчика Chrome

Вопрос. Как отобразить все изменения, которые я сделал с помощью инструментов Chrome Developer?

Фон:

  • Я открываю веб-сайт.
  • Я открываю инструмент для разработчиков Chrome.
  • Я изменяю атрибут стиля для некоторого тега.
  • Я добавляю новый стиль в некоторый файл css.
  • Я изменяю некоторые функции JavaScript.

  • Как увидеть список изменений, которые я сделал? Должно быть что-то вроде этого:

    page.html:56 Change style attribute of foo to bar.
page.css:21 Lines added: 21,22,23,24.
page.js:12 Line modified.

Ответы

Ответ 1

Вы можете попробовать Локальные модификации:

DevTools также ведет историю изменений всех изменений, внесенных в локальные файлы. Если вы отредактировали script или таблицу стилей и сохранили изменения используя Инструменты, вы можете щелкнуть правой кнопкой мыши по имени файла в Источниках (или в области источника) и выберите "Локальные изменения", чтобы просмотреть это история.

enter image description here

Появится панель локальных изменений:

  • Разница в изменениях
  • Время, когда изменения были сделаны на
  • Домен, в котором был изменен файл

Ответ 2

Таким образом, локальные изменения работают для любых изменений в файлах, которые вы делаете, но они не помогают вам, если вы добавляете встроенные стили или каким-либо образом изменяете свой DOM.

Мне нравится использовать метод, в котором я фиксирую DOM до и после моих изменений.

copy(document.getElementsByTagName(‘html’)[0].outerHTML)

Это помещает текущее состояние DOM в буфер копирования. Вставьте это в левый столбец инструмента сравнения, например http://www.mergely.com/ или Meld.

Затем я завершу свои модификации и снова запустил команду копирования. Я вставляю это в правый столбец инструмента diff, а затем вижу мои изменения.

diff view

Полная статья здесь: https://medium.com/@theroccob/get-code-out-of-chrome-devtools-and-into-your-editor-defaf5651b4a