1

Я использую gulp/live reload в своем рабочем процессе разработки. При стилизации элемента с использованием CSS я иногда корректирую правила стиля этого элемента (Edit: using event.style {} под панелью элементов) непосредственно с помощью инструментов Chrome Dev; а затем, когда у меня есть их, как я их хочу, я копирую их в Sublime Text и сохраняю их в проекте.Удалите все диагностические стили, созданные в chrome devtools во время разработки

Проблема заключается в том, что те временные изменения, которые я сделал, продолжают блокировать любые изменения, внесенные в файл CSS после его сохранения, поэтому они существенно переопределяют Live Reload, что означает, что я должен перезагрузить страницу стандартным способом, чтобы увидеть (реальных) изменений, сделанных в самом файле css, что затрудняет эффективность живой перезагрузки.

Я могу отключить правило стиля для определенного элемента, если я только изменил его, и это работает отлично, но в случае более сложных элементов, таких как меню, например, когда стиль может включать более одного элемента, то трудно вспомнить, какие из них были изменены внутри devtools, чтобы отключить их.

Есть ли способ глобально отключить или удалить эти правила локального стиля?

ответ

0

Я не думаю, что вы можете отключить изменение стилей, поскольку это то, для чего созданы средства разработки. не

Ни один из этих Chrome состояния средства разработки ресурсов, что это возможно:

Даже если Dev инструменты будут отслеживать добавленную/измененную элемент стилей, они могли быть изменены скриптами между ними. Сброс/удаление, вероятно, приведет к приложению.


Но вы можете удалить те изменения, которые вы внесли непосредственно в загруженные стили.

Что касается вашего комментария, вы действительно хотите удалить все стили inline/element, так как это кажется невозможным, вам следует рассмотреть возможность изменения только загруженных таблиц стилей. Затем вы сможете отменить изменения.

Перейти к просмотру источника в .css подать нажмите Ctrl-Z в нем:

Screenshot: dev tools: Sources -> File (Press Ctrl-Z to revert the styles)

(Файлы с изменениями, помечены звездочкой)

В качестве альтернативы вы можете покажите изменения и верните их нажатием кнопки: щелкните правой кнопкой мыши .css-файл, затем Локальные модификации .... История открыта. Нажмите на вернуться

Screenshot: dev tools: Sources -> File -> right click in the source view -> click "Local modifications ..."; in the "History" tab click revert

+0

Спасибо за ваш int но это не изменения в файлах, о которых я говорю (очень интересно в то же время) ... но это стили прямого элемента (те, что находятся в элементе element.style {} на панели элементов), которые я пытаюсь удалять – byronyasgur

5

Я нашел текстовой способ сделать это, чтобы просто держать Ctrl-Z вниз на несколько секунд, и это, кажется, отменить все через различные панели от того, что я могу видеть ,

1

Не самое лучшее решение, но мне кажется, он работал для меня:

  • когда отладчик открыты
  • открытых настроек отладчика Настройки и управления Dev инструменты (меню три точки)
  • идет в настройки
  • сбросить настройки с помощью «Восстановить значения по умолчанию и перезагрузить»