Переопределить веб-контент и заголовки ответов HTTP локально

Sofia Emelianova

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

Используйте локальные переопределения для имитации удаленных ресурсов, даже если у вас нет к ним доступа. Вы можете имитировать ответы на запросы и различные файлы, например, заголовки HTTP-ответов и веб-контент , включая запросы XHR и fetch .

Например, локальные переопределения могут быть полезны в следующих случаях:

• Создавайте макеты API и тестируйте исправления API, прежде чем они будут внедрены в рабочую среду.
• Если вы уже знакомы со структурами данных, которые будет использовать бэкэнд, создавайте прототипы новых вариантов дизайна пользовательского интерфейса.
• Например, при тестировании исправлений производительности следует исключить ошибки CLS , чтобы заранее убедиться в их значимости.

Примечание: Чтобы узнать больше о вариантах использования, посмотрите видео выше.

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

Как это работает

• При внесении изменений в Инструменты разработчика, программа сохраняет копию измененного файла в указанную вами папку.
• При перезагрузке страницы DevTools предоставляет доступ к локальному, измененному файлу, а не к сетевому ресурсу.

Примечание: Локальные настройки автоматически отключают кэширование.

Вы также можете сохранять изменения непосредственно в исходные файлы. См. раздел «Редактирование и сохранение файлов с помощью рабочих областей» .

Ограничения

Локальные переопределения работают для заголовков сетевых ответов и для большинства типов файлов, включая запросы XHR и fetch, за несколькими исключениями:

• Кэширование отключается, если включены локальные переопределения .
• Инструменты разработчика не сохраняют изменения, внесенные в DOM-дерево панели «Элементы» .
• Если вы редактируете CSS в панели «Стили» , и источником этого CSS является HTML-файл, инструменты разработчика не сохранят изменения.

Вместо этого вы можете редактировать HTML-файлы на панели «Источники» .

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

В панели «Сеть» вы можете сразу же переопределить веб-контент или заголовки ответа:

1. Откройте инструменты разработчика , перейдите на панель «Сеть» , щелкните правой кнопкой мыши запрос, который хотите переопределить, и выберите в раскрывающемся меню «Переопределить заголовки» или «Переопределить содержимое» .
2. Если вы еще не настроили локальные переопределения, в панели действий вверху DevTools предложит вам:
   1. Выберите папку для хранения файлов переопределения.
   2. Нажмите « Разрешить» , чтобы предоставить инструментам разработчика права доступа к этому ресурсу.
3. Если у вас настроены локальные параметры переопределения, но они отключены, DevTools автоматически их включат.

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

   • Панель «Источники» позволяет вносить изменения в веб-контент .
   • Редактор находится в меню «Сеть» > «Заголовки» > «Заголовки ответа» , что позволяет вносить изменения в заголовки ответа .

Чтобы временно отключить локальные переопределения или удалить все файлы переопределений, перейдите в раздел Источники > Переопределения и снимите флажок «Включить локальные переопределения» нажмите Очистить» соответственно.

Чтобы удалить отдельный файл переопределения или все переопределения в папке, щелкните правой кнопкой мыши файл или папку в меню «Источники» > «Переопределения» , выберите «Удалить» , а затем нажмите «ОК» в диалоговом окне. Это действие необратимо, и вам придется вручную воссоздать удаленные переопределения.

Чтобы быстро просмотреть все переопределения, в панели «Сеть» щелкните правой кнопкой мыши запрос и выберите «Показать все переопределения ». Инструменты разработчика переведут вас в раздел «Источники» > «Переопределения» .

Переопределение веб-контента

Чтобы переопределить содержимое веб-сайта:

1. Настройте локальные переопределения .
2. Вносите изменения в файлы и сохраняйте их в инструментах разработчика.

Примечание: Вы не можете переопределить файлы, сопоставленные с исходным кодом . Если вы щелкнете правой кнопкой мыши запрос на панели «Сеть» и выберете «Переопределить содержимое», инструменты разработчика отобразят диалоговое окно, которое перенаправит вас к исходным файлам.

Например, вы можете редактировать файлы в разделе «Источники» или CSS в разделе «Элементы > Стили» , если только CSS не находится в HTML-файлах .

Инструменты разработчика сохраняют измененные файлы, отображают их список в разделе «Источники > Переопределения» и показывают вам их содержимое. значок рядом с переопределенными файлами в соответствующих панелях и окнах: Элементы > Стили , Сеть и Источники > Переопределения .

Кроме того, на панели «Сеть» рядом с вкладкой «Ответ» запроса с переопределенным веб-контентом отображается значок фиолетовой точки с всплывающей подсказкой.

Переопределяйте запросы XHR или Equest для имитации удаленных ресурсов.

При использовании локальных переопределений вам не нужен доступ к бэкэнду и не нужно ждать, пока он поддержит ваши изменения. Моделируйте и экспериментируйте на лету:

1. Настройте локальные переопределения .
2. В разделе «Сеть» отфильтруйте запросы XHR/fetch , найдите нужный, щелкните по нему правой кнопкой мыши и выберите «Переопределить содержимое» .
3. Внесите изменения в полученные данные и сохраните файл.
4. страницу и убедитесь , что изменения вступили в силу.

Чтобы ознакомиться с этим рабочим процессом, посмотрите следующее видео:

Отслеживайте изменения на локальном уровне.

Вы можете отслеживать все изменения, внесенные в веб-контент, в одном месте — на вкладке « Изменения» .

Кроме того, в разделе «Источники» > «Переопределения» вы можете щелкнуть правой кнопкой мыши по сохраненному файлу и выбрать в контекстном меню пункт «Открыть в содержащей папке» . Это откроет папку, которую вы выбрали при настройке переопределений . Там вы можете редактировать файлы с помощью вашего любимого редактора кода.

Переопределение заголовков HTTP-ответа

В панели «Сеть» можно переопределять заголовки HTTP-ответа без доступа к веб-серверу.

С помощью переопределения заголовков ответа вы можете локально создавать прототипы исправлений для различных заголовков, включая, помимо прочего:

• Заголовки CORS (Cross-Origin Resource Sharing)
• Заголовки политики разрешений
• Заголовки изоляции между источниками

Чтобы переопределить заголовок ответа:

1. Настройте локальные переопределения и откройте страницу, которую хотите отладить.
2. Перейдите в раздел «Сеть» , найдите запрос, щелкните по нему правой кнопкой мыши и выберите «Переопределить заголовки» . Инструменты разработчика переведут вас в редактор «Заголовки» > «Заголовки ответа» .

3. Наведите курсор на значение заголовка ответа и установите его в этом месте.

   

   В качестве альтернативы, чтобы включить редактор заголовков ответа , наведите курсор на значение заголовка ответа и нажмите кнопку «Редактировать » .

4. Изменить или добавить новый заголовок.

   Примечание: В этом примере добавляется заголовок Access-Control-Allow-Origin: * для устранения ошибки CORS .

   

   • Чтобы изменить значение заголовка, щелкните по нему.
   • Чтобы добавить новый заголовок, нажмите кнопку заголовок» .
   • Чтобы удалить переопределение заголовка, нажмите кнопку рядом с ним. Это удалит добавленные вами заголовки или вернет измененные значения к исходным.

   На панели «Сеть» измененные заголовки выделены зеленым цветом , а удаленные переопределения — красным и перечеркнуты . Кроме того, на вкладке «Заголовки» отображается значок фиолетовой точки с всплывающей подсказкой, сообщающей о том, что заголовки были переопределены.

5. страницу, чтобы применить изменения.

Отредактируйте все переопределения заголовков ответа.

Чтобы редактировать все переопределения заголовка в одном месте:

1. Нажмите .headers рядом с разделом «Заголовки ответа» .

   

   В инструментах разработчика вы перейдете к соответствующему файлу .headers в разделе «Источники» > «Переопределения» .

2. Отредактируйте файл .headers :

   

   • Чтобы добавить новое правило переопределения, нажмите «Добавить правило переопределения» . Правило здесь представляет собой набор заголовков и значений, а также один или несколько запросов, к которым оно применяется.

     Примечание: Вы можете использовать подстановочные знаки для одновременного указания нескольких запросов. Обозначьте несколько символов символом * , а один — символом ? .

   • Чтобы добавить пару заголовок-значение в правило, наведите курсор на другую пару и нажмите .

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

3. Сохраните файл .headers , нажав Command / Control + S.

4. страницу, чтобы применить изменения.