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

София Емельянова
Sofia Emelianova
GitHub

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

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

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

Ограничения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Значок фиолетовой точки с подсказкой рядом с вкладкой «Ответ».

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

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

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

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

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

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

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

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

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

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

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

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

    Редактор заголовков ответов.

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

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

    Изменение существующего значения заголовка, добавление нового и удаление переопределения.

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

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

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

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

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

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

    Заголовок переопределяет ссылку рядом с разделом «Заголовки ответов».

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

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

    Редактирование файла .headers.

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

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

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

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

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