Обновлять исходный файл при изменении CSS с помощью инструментов разработчика Chrome

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

Что я сейчас делаю,

  • Откройте мой проект в chrome (localhost/project)
  • Щелкните правой кнопкой мыши и проверьте элемент
  • изменить css (скажем, изменить цвет тега h1)
  • скопируйте их и вставьте в мой style.css

Что я хочу сделать, так это

  • Откройте мой проект в chrome (localhost/project)
  • Щелкните правой кнопкой мыши и проверьте элемент
  • изменить css (скажем, изменить цвет тега h1)
  • изменения автоматического обновления (изменение цвета тега h1) в style.css

Есть ли какой-либо инструмент или скрипт для достижения этой цели?


google-chrome css google-chrome-devtools inspect-element
person Vind    schedule 11.06.2014    source источник
comment
Вы хотите, чтобы Chrome редактировал ваши файлы на стороне сервера?   -  person Salman A    schedule 11.06.2014
comment
@SalmanA Нет только файлов локального сервера.   -  person Vind    schedule 11.06.2014

Ответы (2)


arrow_upward
14
arrow_downward

Я только что узнал, что это возможно. Вот инструкции (или просмотрите эту страницу для получения актуальных инструкций):

  • Откройте инструменты разработчика Chrome
  • Нажмите на значок Настройки (значок ⠇ в правом верхнем углу инструментов разработчика).
  • Перейдите на вкладку Рабочее пространство.
  • Нажмите кнопку Добавить папку и выберите локальную папку, содержащую нужные файлы (например, C:\www\project\).
  • Если появится предупреждение, нажмите Разрешить.

Следующий шаг:

  • Откройте нужную веб-страницу (например, http://localhost/project/)
  • Откройте вкладку Источники в инструментах разработчика.
  • При необходимости откройте панель Навигатор (это левый столбец на вкладке источников, щелкните значок левого треугольника чуть ниже верхнего левого угла инструментов разработчика, чтобы открыть его)
  • Прокрутите вниз до конца списка, где вы найдете папку рабочей области, добавленную ранее.
  • Разверните папку и найдите нужный файл (например, css/styles.css)
  • Щелкните файл правой кнопкой мыши и выберите Сопоставить с сетевым ресурсом...
  • Появится всплывающее окно с полным или отфильтрованным списком файлов, загруженных веб-страницей.
  • Выберите URL-адрес, соответствующий выбранному локальному файлу (например, http://localhost/project/css/styles.css).
  • Когда появится предупреждение о перезапуске инструментов разработчика, нажмите ОК.

Теперь вы можете:

  • Проверьте элемент и отредактируйте его CSS, изменения будут немедленно сохранены в локальном файле.
  • Отредактируйте сопоставленный файл на исходной панели, изменения будут сохранены в локальном файле, когда вы Сохранить файл
  • Отредактируйте сопоставленный файл в своем любимом редакторе вне Chrome; когда вы вернетесь в Chrome, он автоматически перезагрузит файл/обновит стили.
person Salman A    schedule 11.06.2014
comment
Классно, чувак !! Это то, что я ожидал. 5 звезд для вас. - person Vind; 11.06.2014

arrow_upward
0
arrow_downward

В хроме есть функция, которая решает эту проблему.

Здесь: http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/

вы можете прочитать кое-что о том, как сеть соответствует вашей локальной машине, и автоматически сохранять изменения, которые вы делаете в chrome.

person Friedrich    schedule 11.06.2014