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

Sofia Emelianova

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

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

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

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

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

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

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

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

Примечание. Локальные переопределения автоматически отключают кеш.

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы переопределить веб-контент:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

   Альтернативно, чтобы включить редактор заголовков ответов , наведите указатель мыши на значение заголовка ответа и нажмите «Изменить » .

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

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

   

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

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

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

Изменить все переопределения заголовков ответов

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

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

   

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

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

   

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

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

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

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

3. Сохраните файл .headers с помощью Command / Control + S.

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