Обновление файлов .css из вкладки Стили (css зеркало редактирование)
Редактирование CSS зеркало обеспечивает двустороннее взаимодействие, чтобы изменить CSS в любом случае:
В редакторе кода измените
.cssфайл, изменения отражаются в инструменте Элементы на вкладке Средства разработки Edge .В инструменте Элементы на вкладке Edge DevTools изменения отражаются в
.cssфайле в редакторе кода.
Редактирование CSS зеркало включено по умолчанию в расширении. В результате в расширении DevTools на вкладке Стили в инструменте Элементы при изменении селекторов CSS, правил или значений локальный .css файл автоматически изменяется при изменении значений.
Например, если выбрать значение размера точки для элемента body, а затем нажать клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ, то при .css открытии файла значение автоматически изменится в .css файле в режиме реального времени при изменении значения на вкладке Стили :
Без редактирования css зеркало вкладка Стили в средствах разработки Microsoft Edge отлично подходит для отладки и настройки селекторов CSS и правил CSS. Тем не менее, хотя эти изменения немедленно отображаются в веб-браузере, они не отражаются в вашем .css файле. Это означает, что после изменения CSS на вкладке Стили необходимо скопировать и вставить изменения обратно в .css файл.
Редактирование css зеркало — это функция расширения Microsoft Edge DevTools, которая решает эту проблему. Любое изменение, которое вы вносите на вкладке Стили, также автоматически изменяет .css файл в открытой папке в Visual Studio Code. Вы можете изменить любой селектор CSS или создать новые селекторы CSS на вкладке Стили , и все изменения автоматически отражаются в правильном .css файле.
Css зеркало редактирование также работает для .html файла, содержащего <style> элемент, например страницу Успешно. Это показано в разделе Начало работы, нажав кнопку Запустить экземпляр.
Флажок Редактирование зеркального отображения CSS
Если используется URL-адрес (вместо пути к файлу), css зеркало редактирования требует открытия папки с исходными файлами веб-страницы в Visual Studio Code, что расширение может сопоставить с ресурсами веб-страницы URL-адреса, введенного в адресную launch.json строку или файл. Если у вас нет локальных исходных файлов, но вы хотите изменить CSS в средствах разработки, снимите флажок CSS зеркало редактирование, чтобы предотвратить сообщения об ошибках при сопоставлении и редактировании зеркало. См. раздел Включение редактирования CSS зеркало ниже.
Сохранение изменений в файле .css
Расширение не сохраняет изменения, внесенные в редакторе автоматически. На вкладке .css файла в редакторе появится белый кружок. Изменения необходимо сохранить вручную, если вы хотите сохранить их.
Если закрыть Visual Studio, текущую папку или .css файл, Visual Studio предложит сохранить изменения.
Пример зеркального отображения изменений с вкладки "Стили" в файл .css
В следующем примере index.html открывается в Visual Studio Code, а расширение Microsoft Edge DevTools открыто. Мы выбираем значок flexbox в селекторе .searchbar CSS, а затем изменяем на flex-directioncolumn.
Это изменение отображается на вкладке Edge DevTools и на вкладке Edge DevTools: Browser :
В результате редактирования CSS зеркало Visual Studio Code также автоматически переходит к правильному .css файлу и соответствующему номеру строки и вставляет flex-direction: column код CSS:
Включение редактирования css зеркало
Если у вас есть записываемые, надежные исходные файлы и вы хотите, чтобы изменения CSS в средствах разработки автоматически изменялись в исходных файлах, установите флажок Css зеркало редактирование. Этот параметр выбран по умолчанию.
Очистите поле CSS зеркало редактирования проверка, если вы только экспериментируете, и в адресной строке есть URL-адрес, а не путь к файлу в адресной строке Edge DevTools: Browser, а исходные файлы отсутствуют локально через панель> действий Обозреватель> кнопку Открыть папку, и не хотите получать сообщения об ошибках о сопоставлении и зеркало Редактирования.
Чтобы включить или отключить редактирование css зеркало, выполните приведенные далее действия.
На вкладке Edge DevTools на вкладке Элементы перейдите на вкладку Стили .
Установите или снимите флажок css зеркало редактирования:
Или откройте меню команд, начните вводить слово зеркало, а затем выберите Инструменты Microsoft Edge: Переключить зеркало редактирование в|off для CSS-файлов в рабочей области:
Поддержка исходной карты
Зеркальное отображение CSS также поддерживает такие абстракции, как Sass или CSS-in-JS, если вы настроили проект для создания исходных карт. У нас есть проблема отслеживания на GitHub и мы приветствуем любые отзывы о том, как это можно улучшить: редактирование зеркала CSS с помощью исходных карт: известные проблемы и отзывы.