🪄 Магія DevTools: Як підмінити відповідь бекенда за 1 хвилину (без Charles та Postman)

Привіт, екіпаж! Понеділок — чудовий день, щоб навчитися трохи "ламати" матрицю. ☕️Знайомий біль: Вам потрібно протестувати, як фронтенд покаже помилку сервера (статус 500), або що буде, якщо в юзера від'ємний баланс чи ім'я на 300 символів. Але бекенд працює ідеально, а доступу до бази даних, щоб змінити собі баланс, у вас немає. Більшість іде качати складні проксі-інструменти типу Charles чи Fiddler. Але мало хто знає, що прямо у вашому Chrome є вбудована функція Local Overrides (Локальні підміни). Вона дозволяє "перехопити" відповідь сервера і підсунути браузеру свій власний JSON.Як стати хакером за 4 кроки (зберігайте шпаргалку):📂 Крок 1: Вмикаємо оверрайди
Відкриваємо DevTools (F12) -> йдемо у вкладку Sources -> зліва на панелі шукаємо вкладку Overrides (якщо її немає, натисніть на >>). Тиснемо Select folder for overrides і вибираємо будь-яку пусту папку на своєму комп'ютері. Браузер попросить дозвіл на доступ — погоджуємось (Allow).
🎯 Крок 2: Ловимо запит

Йдемо у звичну вкладку Network. Знаходимо той самий API-запит, який повертає ваші дані (наприклад, ваш профіль із балансом {"balance": 100}).
✍️ Крок 3: Підміняємо реальність
Клікаємо по цьому запиту правою кнопкою миші -> вибираємо Override content (Підмінити контент). Браузер автоматично перекине вас у редактор коду. Прямо там міняємо 100 на -999999 або замість імені пишемо величезний текст. Зберігаємо файл гарячими клавішами Ctrl+S (або Cmd+S).
🔥 Крок 4: Магія!

Просто оновлюємо сторінку (F5). Браузер проігнорує реальну відповідь сервера і підтягне ваш відредагований файл. Баланс на екрані став від'ємним! Верстка попливла? Вітаю, ви знайшли баг.
Чому це маст-хев для Manual QA?

Ви можете імітувати будь-які крайові значення (null, пусті масиви, спецсимволи), не смикаючи розробників і не створюючи сотні тестових акаунтів. А щоб вимкнути магію — достатньо просто зняти галочку Enable Local Overrides у вкладці Sources.📌 Перешліть цей лайфхак у робочий чат, нехай ваші фронтендери почнуть нервувати, що ви тепер можете змокати будь-який стан UI!

😉

А як ви зазвичай тестуєте нестандартні відповіді від сервера?

👇🔥 — DevTools Overrides — мій улюблений інструмент!

👀 — Використовую Charles / Proxyman для такого.

🤯 — Просив(ла) розробників хардкодити помилки... Тепер буду робити сам!