Переопределение контента, HTTP заголовков и API в Chrome DevTools
С удивлением обнаружил, что не многие разработчики и тестировщики знают о возможности DevTools переопределять содержимое ответов на запросы, которые делает браузер. Эта возможность может быть полезна как на этапе разработки, так и на этапе тестирования. Данный функционал называется local overrides или локальные переопределения. Давайте же посмотрим на этот функционал.
Обзор
С помощью локальных переопределений вы можете переопределить заголовки ответов HTTP, файлы js, стили css, изображения и любой другой веб контент, включая запросы XHR и fetch, для имитации удаленных ресурсов, даже если у вас нет к ним доступа. Это позволяет разрабатывать приложение, не дожидаясь, пока серверная часть реализует необходимый функционал. Локальные переопределения также позволяют сохранять изменения, внесенные в DevTools, при загрузке страниц.
Суть локального переопределения заключается в создании специальной папки на вашем локальном компьютере в которой будут храниться весь переопределенный контент.
Функционал подмены статических файлов и заголовков HTTP появился в chrome в апреле 2023 года, а сентябре появилась возможность редактировать содержимое запросов XHR и fetch.
Настоятельно рекомендую пройти практику вместе со мной, иначе информацию забудется. Так уж устроен наш мозг.
Подготовка
Создайте в любом, удобном месте на вашем локальном компьютере папку в которой браузер будет сохранять все переопределения в виде отдельных файлов.
Я назвал папку chrome-overrides и разместил ее на рабочем столе моего локального компьютера.
Теперь перейдите в ваш браузер Google Chrome и откройте DevTools. Затем перейдите на вкладку Sources, а затем на левой панели, чуть ниже, на вложенных вкладках откройте Overrides.
Чуть ниже вы увидите кнопку + с надписью Select folder for overrides. Кликните по ней. Появится всплывающее окно в котором нужно выбрать вашу локальную директорию. После подтверждения выбора во всплывающем окне, возможно, браузер попросит дать разрешение на запись данных в эту директорию. Разрешите.
После этого на панели Overrides вы должны увидеть подключенную директорию.
Переопределение веб-содержимого
В качестве испытуемого возьмём веб сайт https://www.wikipedia.org
В DevTools перейдите на вкладку Network, а затем загрузите Википедию. На вкладке Network вы увидите все запросы которые выполнил браузер.
Давайте переопределим входящий HTML. Кликните правой кнопкой мыши на первом запросе и выберете пункт Override Content.
После этого вы снова попадете на вкладки Sources - Overrides, но на этот раз в вашей локальной директории будет создан файл html, который будет получать браузер если запрос совпадет с www.wikipedia.org. Правее, в панели редактирования, вы можете изменить файлы как вам угодно.
Найдите текст "The Free Encyclopedia" и замените его на "Local Overrided". Теперь сохраните изменения нажатием горячих клавиш Ctrl + S (или Сmd + S на Mac). После этого перейдите в DevTools на вкладку Network и перезагрузите страницу. Вы должны увидеть как браузер при совпадении запроса подменит контент HTML. Обратите внимание на детали. На владке Network появился символ Warning который уведомляет пользователя о том, что DevTools может переопределять запросы и нужно быть внимательным. В списке запросов, а так же на дополнительных вкладках появилась фиолетовая точка, которая говорит о том, что этот контент подменен. Таким образом можно легко обнаружить подмененный контент среди других запросов.
Вы так же можете добавить дополнительную колонку Has overrides в таблицу запросов.
А так же вы можете настроить фильтр на показ только подмененных запросов.
Есть несколько фильтров:
has-overrides:content - показать запросы с подменённым контентом
has-overrides:headers - показать запросы с подменёнными заголовками
has-overrides:yes - все запросы с любым подменённым контентом
has-overrides:no - все запросы с неизмененным контентом
Для примера подменим так же изображение. В списке запросов выберете изображение логи википедии, и через выпадающее меню выберете Override content.
Обратите внимание на то, что в панели Overrides появилось изображение которое мы хотим подменить - изображение сохранилось на вашем компьютере.
Подыщите подходящее изображение на замену, дайте имя подменяемого изображения и замените картинку в рабочей директории. Обратите внимание чтобы расширения совпадали. Теперь в DevTools откройте вкладку Network и перезагрузите страницу. Вы должны увидеть подмененное изображение.
Таким же образом вы можете подменять почти любые статические файлы, например файлы стилей CSS, файлы скриптов JavaScript и так далее.
Переопределение заголовков HTTP
Local overriding так же позволяет подменить HTTP заголовки ответов.
Предположим, я как разработчик хочу подставить заголовок ответа, который в будущем будет возвращать backend, но на данный момент этот заголовок не реализован. Это не причина останавливать разработку.
Для того чтобы подменить HTTP заголовок, нам понадобится опция Override headers. Кликните правой кнопкой мыши по первому запросу веб страницы и выбирете нужную опцию.
В данном случае вас перебросит на вкладку Network - Headers. Так как мы уже переопределяли целый файл html - заголовки так же были переопределены заранее (ведь нельзя же вернуть контент html без заголовков).
Но вы можете легко добавить собственный заголовок. Сделать это можно при помощи кнопки Add header, которая находится ниже списка переопределенных заголовков.
Теперь перезагрузите страницу и проверьте, что заголовок появился в переопределенном ответе. Все заголовки, которые были переопределены вручную хранятся в специальном файле .headers.
Таким образом вы легко можете переопределять заголовки http ответов под свои собственные нужды.
Переопределение XHR или fetch
Обычно, при разработке, если необходимо "мокать" (подменять) запросы, запускаются различные инструменты на стороне сервера. Теперь, если вам достаточно переопределить ответ для клиента, это можно сделать прямо в браузере без использования сторонних инструментов.
К сожалению на главной странице Википедии нет XHR запроса, но нам никто не мешает добавить в существующий файл javascript собственный код.
Выберите запрос файла javascript и в выпадающем меню выберете опцию Override content. После создания подменненного файла, в редакторе, добавьте следующий код и сохраните файл.
(async function(){
const res = await fetch('https://baconipsum.com/api/?type=meat-and-filler');
console.log('Response: ', res);
})()Возможно, при вставке, DevTools спросит, точно ли вы доверяете ли вы тексту скрипта. Данный скрипт выполняет XHR запрос на сайт https://baconipsum.com - это обычные API заглушки для тестирования.
Перезагрузите страницу, проверьте, что в консоли вывелось ожидаемое сообщение, а в списке запросов появился fetch запрос.
Теперь действуем так же, как с обычным контентом - опция Override content (или Override headers если нужно подменить только заголовки).
Переопределите данные ответа на fetch запрос. Обратите внимание, такой контент хранится на локальной файловой системе в директории api.
Проверьте, что fetch успешно переопределен.
Отмена переопределения
Так как все файлы хранятся на вашем локальном компьютере, вы можете сколько угодно раз перезагружать веб страницы - переопределения сохранятся.
Если же вам понадобится временно отключить все переопределения, то это можно легко сделать. Перейдите на вкладку Sourses - Overrides и отключите опцию Enable Local Overrides. После перезагрузки страницы, вы увидите весь контент сайта без переопределений. Не беспокойтесь, все переопределения не удалятся и вы можете в любой момент снова включить данную опцию.
Если же вам нужно удалить одно из определений, вы можете переименовать файл переопределения или просто удалить этот файл. Сделать это можно как из панели Overrides. Удаление всей локальной директории переопределений соответственно удалит все переопределения в браузере
Заключение
Инструмент Local overrides позволяет быстро подменить ответ от сервера и продолжить разработку, может помочь протестировать API. Так как все локальные переопределения являются обычными файлами на файловой системе, вы можете вручную создать mock-и на будущие API и статические файлы.
Конечно данный функционал не является заменой существующим большим решениям перехвата запроса. Скорее компактной копией. В любом случае, на мой взгляд, очень полезный инструмент.