Шпаргалка QA: 5 фішок Chrome DevTools, про які ви (можливо) не знали 🛠Якщо ваш дебаг обмежується вкладками Elements та Console, ви втрачаєте 80% потужності браузера. Зберігайте чек-ліст для суворого тестування:1️⃣ DOM Breakpoints (Хто змінив мій код?)Кнопка несподівано зникає або змінює колір, а ви не розумієте чому?Як: ПКМ на елемент в HTML -> Break on -> attribute modifications. Браузер намертво зупинить виконання JS рівно в ту мілісекунду, коли якийсь скрипт спробує змінити цей елемент, і покаже рядок коду винуватця. 2️⃣ Local Overrides (Тестування без бекенду)Вам треба перевірити, як фронтенд обробить помилку 500, але бекенд працює ідеально?Як: Вкладка Network -> ПКМ на запит -> Override content. Тепер ви можете написати власний кривий JSON або поміняти статус-код. Браузер буде підміняти реальну відповідь сервера вашим фейком на льоту. (Забудьте про складні налаштування Charles). 3️⃣ Sensor Simulation (Телепортація)Тестуєте локалізацію чи пуш-сповіщення за часом?Як: Натисніть Esc у DevTools, відкрийте меню з трьома крапками -> Sensors. Ви можете в один клік змінити свою геолокацію (наприклад, на Токіо) та змінити системну таймзону. Ідеально для тестування багів з датами. 4️⃣ Copy as Fetch (Миттєвий Postman)Побачили складний запит в Network і хочете покрутити його руками?Як: ПКМ на запит -> Copy -> Copy as fetch. Вставляєте це прямо в Console або будь-який термінал, і запит повторюється з усіма потрібними токенами та куками. 5️⃣ CPU Throttling (Симуляція дешевого смартфона)У вас на MacBook Pro (M3) все літає, а юзери скаржаться на "тормоза"?Як: Вкладка Performance -> шестірня (Capture settings) -> CPU: 4x / 6x slowdown. Тільки так можна реально перевірити, наскільки важкий ваш Angular/React додаток для звичайних пристроїв.