Сводка ваших изменений CSS в Chrome Dev Tools

Question

Есть ли способ получить список пользовательских изменений CSS, которые вы применили в инструментах Chrome Dev?

Когда вы играете с CSS в инструментах Chrome Dev, чтобы ваша веб-страница выглядела правильноможет пригодиться, чтобы легко отследить сделанные вами изменения.

Я знаю о рабочих пространствах, но вариант использования - это угловое приложение 5, в котором ваш CSS связан и, возможно, минимизирован.

Чтобы уточнить:У меня есть страница, которая выглядит довольно далеко от того, на что она похожа => я делаю 20 исправлений CSS в инструментах разработчика, пока она не выглядит хорошо => теперь я хочу получить (css) дельту с исходной страницы, поэтому у меня есть списокизменений, которые я теперь должен реализовать в настоящих стилях CSS.

Answer 1

На самом деле вы можете сделать именно то, что вы хотите:

Это под Sources->MyCssFile->Local Modifications...

Перейдите на вкладку Sources, выберите нужный файл CSS, а затем щелкните правой кнопкой мыши и выберите Local modificationsдаст вам стиль ваших локальных изменений в стиле diff, как вы и просили.

Или - вы можете просто сохранить изменения непосредственно влокальный файл CSS путем сопоставления этого локального файла, чтобы инструменты разработчика Chrome автоматически сохраняли все сделанные вами изменения в этом файле CSS.

Answer 2

, это зависит от того, как вы применяете исправления CSS, если вы применяете код CSS inline , поэтому вы не можете получить файл со списком исправлений, которые вы сделали, но если вы внесли свои изменения в inspector-stylesheet Вы можете найти этот файл со всеми своими исправлениями в Вкладка «Источник» >> из левого списка откройте localhost >> Вы можете увидеть файл с именем inspector-stylesheet ... здесь вы можете выбрать все свои исправления.

пользовательское исправление css (изображение)

файл изменений css (изображение)

Еще один способ выбрать исправления CSS из вкладки 'Элементы' в инструменте разработчика: вы можете легко скопировать сделанные вами изменения и вставить их в файл CSS своего проекта, или вы можете редактировать сам исходный файл из Вкладка 'Source' в инструменте разработчика, вам нужно сделать две вещи, чтобы сохранить сделанные вами изменения:

1 - нажав Ctrl + S или команду + S, чтобы сохранить изменения и автоматически сохранитизменения в вашем корневом CSS-файле в файлах вашего проекта.

2 - вы можете скопировать и пропуститьВ редакторе кода вы перейдете из инструмента dev в ваш файл css