Мало ли кто не знает. Как мокать ответы API в девтулзах Google Chrome

Frontend

Первый гайд на блоге. Так волнительно…

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

Представим ситуацию…

Я зашел за google.com, открыл консоль и попробовал дернуть выдуманную мной ручку /mock нативным fetch. Результат ожидаемый — запрос ушел, сервер вернул 404, и все закончилось ошибкой. Л — логично.

Нас это не устраивает, давайте исправлять

Мокаем ответ

Задача простая — нажать правой кнопкой мыши по запросу к нашей несуществующей ручке и выбрать опцию Override content. После этого (если вы делаете это впервые на текущем компьютере) вам предложат выбрать директорию в которой будут храниться JSON-файлы с моками. Также Chrome спросит разрешения изменять файлы в этой директории. Нам не остается ничего кроме как согласиться.

После этого откроется вкладка Sources и редактор, в котором мы сможем изменить ответ сервера так, как нам это нужно. При этом контентом по умолчанию будет то, что ответил нам google.com. Исправим содержание на нужный нам для разработки и теста JSON.

Не забудьте сохранить изменения. Ну и напоминаю, что один `CMD+S` не считается

Тестируем

Теперь зайдем в консоль и снова вызовем нашу выдуманную ручку /mock и сразу посмотрим на то как прошел вызов ручки во вкладке Network. Как видим — все успешно. И даже нерасторопных разработчиков гугла ждать не пришлось.

Если зайдем в Preview или Response, увидим желаемый ответ.

Также рядом с названием ручки мы увидим маленький кружок, который означает что ответ замокан.

Отменяем мок

Пока мы баловались с Хромом, бэкендер освободился и сделан нужную нам ручку. Нужно удалить мок, чтобы браузер ходил в настоящий бэкенд. Как это сделать? Просто удалите файл с моком и все вернется на круги своя.

Вот такая нехитрая наука, которой меня обучили наши доблестные сотрудники по тестированию (пользуясь случаем, передаю привет Кате и Але)

Симо Мофин
Симо Мофин

Senior Frontend Developer
Главный по блогу