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

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

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

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

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

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

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

   

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

   

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

   

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

   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, или любой редактор, который требуется изменить файлы. Изменения синхронизируются во всех продуктах, которые получают доступ к файлам в папке переопределений.