Поделиться через


Переопределение ресурсов веб-страницы с помощью локальных копий (вкладка Переопределения)

Иногда требуется опробовать некоторые возможные исправления для веб-страницы, но у вас нет доступа к исходным файлам, или изменение страницы требует медленного и сложного процесса сборки. Вы можете отлаживать и устранять любые проблемы в средствах разработки. Но изменения не сохраняются; После обновления локального файла вся работа исчезнет. Функция переопределений в средстве "Источники" помогает решить эту проблему.

Теперь вы можете взять ресурс текущей веб-страницы и сохранить его локально. При обновлении веб-страницы браузер не загружает ресурс с сервера. вместо этого браузер заменяет ресурс сервера локальной копией ресурса.

Настройка локальной папки для хранения переопределений

  1. Щелкните правой кнопкой мыши веб-страницу, например https://microsoftedge.github.io/Demos/demo-to-do/, и выберите Пункт Проверить. Откроется devTools.

  2. Выберите инструмент Источники (источники значок).

  3. В области Навигатор (слева) щелкните вкладку Переопределения (сгруппированные по вкладке Страница ); При необходимости нажмите кнопку Другие вкладки (v):

    Средство

  4. Перейдите на вкладку Переопределения , а затем снова нажмите кнопку Другие вкладки , чтобы свернуть вкладки:

    Выбор вкладки

  5. Щелкните + Выбрать папку для переопределений:

    Выбор папки для переопределений

  6. В диалоговом окне навигации по файлам выберите папку на локальном компьютере для хранения файлов ресурсов, которые требуется заменить, например C:\Users\myusername\overrides, и нажмите кнопку Выбрать папку .

    DevTools предупреждает, что у вас должен быть полный доступ к папке и что вы не должны раскрывать конфиденциальную информацию:

    Предоставление доступа DevTools к папке

  7. Нажмите кнопку Разрешить .

    На вкладке Переопределения рядом с параметром Включить локальные переопределения установлен флажок. Справа от параметра Включить локальные переопределения находится значок Очистить конфигурацию , который позволяет удалить параметры локальных переопределений. Теперь вы закончили настройку папки и готовы заменить динамические ресурсы локальными ресурсами:

    Успешная настройка папки переопределений

Добавление файлов в папку Переопределений

Затем добавьте файлы в папку Overrides, как показано ниже. В этом примере будет добавлен CSS-файл.

  1. Выберите инструмент Элементы , а затем на вкладке Стили щелкните имя CSS-файла, например to-do-styles.css:

    Выбор файла в инспекторе стилей

    Откроется инструмент Источники с выбранным файлом, открытым на вкладке в области редактора.

  2. В области редактора щелкните правой кнопкой мыши вкладку файла, например to-do-styles.css, а затем выберите Переопределить содержимое:

    Щелкните правой кнопкой мыши имя файла и выберите

    На вкладке файла добавляется значок страницы с фиолетовой точкой, а на вкладке Переопределения добавляется файл:

    В редакторе источников добавьте имя файла в список переопределений.

    В этом примере файл отображается как: microsoftedge.github.io/Demos/demo-to-do/styles > to-do-styles.css

    Файл хранится в новом каталоге, который находится в папке переопределений (например, в C:\Users\myusername\overrides).

  3. В проводник или Finder убедитесь, что DevTools создала вложенную папку с именем с помощью URL-адреса файла (например, microsoftedge.github.io) и содержит правильную структуру каталогов, например C:\Users\myusername\overrides\microsoftedge.github.io\Demos\demo-to-do\styles. Файл переопределения хранится в этом каталоге.

    В области редактора средства Источники на вкладку файла добавляется значок страницы с фиолетовой точкой. Фиолетовая точка указывает, что файл является локальным файлом, который переопределяет файл, возвращенный с веб-сервера:

    При сохранении файла в папке переопределений на значок страницы добавляется фиолетовая точка

Изменение стиля с помощью файла переопределения

Далее вы можете изменить стили веб-страницы с помощью файла CSS локального переопределения (в этом примере to-do-styles.css). Добавьте толстую красную границу вокруг отображаемого текста веб-страницы следующим образом:

  1. В средствах разработки выберите инструмент Элементы (значок инструмента "), а затем убедитесь, что выбрана вкладка Стили .

  2. Скопируйте следующее свойство стиля CSS, а затем вставьте его в существующее body правило CSS элемента, которое находится в файле переопределения CSS, например to-do-styles.css:

    border: 10px solid firebrick
    

    Постоянное изменение стилей веб-страниц путем изменения файла в папке переопределений

    Толстая красная граница (firebrick) добавляется в текст отрисоваемой веб-страницы, а измененный CSS-файл автоматически сохраняется на компьютере в каталоге Переопределений.

  3. Обновите веб-страницу.

    Толстая красная граница остается на экране, и ни одна из ваших работ не будет потеряна, как это было бы при отрисовке CSS-файла, возвращаемого веб-сервером, вместо использования локального файла переопределения.

Добавление файлов в переопределения из других вкладок или инструментов

  1. Далее выберите инструмент Источники (значок источников).), а затем слева выберите вкладку Страница (сгруппирована с вкладкой Переопределения ).

  2. В дереве файлов ресурсов для страницы разверните папку styles . Файлы, которые уже помещены в папку переопределений (с помощью вкладки Переопределения ), например to-do-styles.css, имеют фиолетовую точку на значке.

  3. Щелкните правой кнопкой мыши другой файл, например (индекс) (который имеет значение index.html), а затем выберите Переопределить содержимое:

    Выбор файла из средства

    На вкладках Страница и Переопределения в инструменте Источники значок файла изменяется на значок страницы с фиолетовой точкой (например, для index.html), а файл добавляется в каталог Переопределений локального диска.

  4. Выберите инструмент Сеть (значок средства сети), щелкните правой кнопкой мыши файл ресурсов веб-страницы, например to-do.js, а затем выберите Переопределить содержимое:

    Выбор файла в средстве

    В пользовательском интерфейсе DevTools значок файла изменяется на значок страницы с фиолетовой точкой (например, для to-do.js), и файл добавляется в каталог Переопределений локального диска.

    При действии переопределений используются файлы ресурсов, расположенные на компьютере в папке Переопределения, а не файлы ресурсов, возвращаемые веб-сервером.

Двустороннее взаимодействие переопределений

Используйте редактор, предоставленный с помощью средства "Источники" devTools, или любой редактор, который требуется изменить файлы. Изменения синхронизируются во всех продуктах, которые получают доступ к файлам в папке переопределений.