Ви правите CSS на бойовому сайті, перемикаєтеся на іншу сторінку, і всі зміни зникають. Прикро? Ще б пак. Панель Elements у Chrome DevTools чудово підходить для швидкого редагування стилів і розмітки, але донедавна будь-які експерименти жили рівно до першого F5. А повертатися в редактор коду, перезбирати білд і заново деплоїти заради перевірки гіпотези — це витрата часу, яку ніхто не любить.

На щастя, у Chrome є вбудований механізм, що вирішує цю проблему. Він називається Local Overrides і дає змогу зберігати зміни локально так, що браузер застосовує їх навіть після оновлення сторінки. Фіча з’явилася ще в Chrome 65, але за минулі роки обросла новими можливостями: тепер можна підміняти не лише файли, а й HTTP-заголовки відповідей, а також мокати API-запити прямо з браузера.

У цьому посібнику, від увімкнення до відстеження правок: усе, що потрібно розробнику для продуктивної роботи з локальними перевизначеннями.

💡 Швидкий огляд:

• Вмикаєте Local Overrides на вкладці Sources і вибираєте папку для зберігання перевизначених файлів.
• Правите CSS, JS або HTML на вкладці Sources, зміни автоматично зберігаються локально.
• Оновлюєте сторінку або переходите на іншу, Chrome продовжує застосовувати ваші правки.
• Відстежуєте diff змін на вкладці Changes і керуєте файлами через Overrides.

Як увімкнути локальні перевизначення

Відкрийте DevTools (F12 або Ctrl+Shift+I) і перейдіть на вкладку Sources (Джерела). У лівій частині панелі знайдіть вкладку Overrides (Перевизначення). Якщо її не видно, натисніть на значок >> для відображення прихованих вкладок.

Натисніть кнопку Select folder for overrides (Вибрати папку для перевизначень). Chrome запитає дозвіл на доступ до файлової системи, виберіть наявну папку або створіть нову. Саме в ній зберігатимуться всі перевизначені файли.

Після вибору папки прапорець Enable Local Overrides увімкнеться автоматично. Зверніть увагу: на вкладці Network (Мережа) з’явиться значок-попередження, він сигналізує, що частину мережевих запитів може бути перехоплено та замінено локальними версіями файлів. Це нормально й означає, що перевизначення активні.

Як вносити та зберігати зміни

Тепер найцікавіше, редагування. Відкрийте будь-який файл через вкладку Sources: знайдіть потрібний CSS або JavaScript у дереві файлів ліворуч і двічі клацніть. Внесіть правки та натисніть Ctrl+S, файл збережеться у вашу локальну папку, а Chrome почне використовувати локальну версію замість серверної.

Важливий нюанс: правте розмітку саме на вкладці Sources, а не Elements. Панель Elements зручна для візуальної роботи з DOM, але зміни HTML, зроблені в ній, не зберігаються як локальні перевизначення. Перемкніться на Sources, знайдіть потрібний HTML-файл і редагуйте там, фіолетова крапка поруч з іменем файлу підтвердить, що файл перевизначено.

Оновіть сторінку або перейдіть на іншу, Chrome продовжить застосовувати ваші правки. Хочете повернути оригінал? Видаліть файл із папки перевизначень або зніміть прапорець Enable Local Overrides.

Окремо варто згадати перевизначення HTTP-заголовків, можливість, додану в пізніших версіях Chrome. Зайдіть на вкладку Network, клацніть правою кнопкою по запиту та виберіть Override headers. Chrome створить файл .headers у вашій локальній папці, де можна задати кастомні заголовки відповіді. Це незамінно для тестування CORS-політик, Content-Security-Policy і кешування без правок на сервері.

Як відстежувати внесені правки

Коли ви активно перевизначаєте десятки файлів, легко забути, що саме і де змінювалося. Для цього в DevTools є два корисні інструменти.

Вкладка Overrides (на панелі Sources) показує повний список перевизначених файлів, згрупованих за доменами. Звідси можна відкрити будь-який файл для подальшого редагування або видалити непотрібне перевизначення, права кнопка → Delete.

Вкладка Changes (Зміни) розташована в нижній частині DevTools, поруч із вкладкою Console. Вона показує diff між оригінальним файлом і вашою локальною версією, порядково, як у Git. Зручно для швидкого аудиту: що саме ви змінили в кожному файлі та наскільки сильно зміни відрізняються від початкового коду.

Швидка порада: перед рефакторингом або експериментом на бойовому сайті робіть snapshot змін через Changes — це ваш локальний «коміт», до якого завжди можна повернутися.

Перевизначення як інструмент performance-тестування

Окрім зручного прототипування, Local Overrides відкривають цікавий сценарій для аналізу продуктивності. Ви маєте можливість змінювати код на нелокальному сайті та одразу ж заміряти вплив цих правок на швидкість завантаження і рендерингу.

Наприклад, ви підозрюєте, що сторонній скрипт аналітики гальмує відмальовування першого екрана. Перевизначте запит, замініть оригінальний скрипт порожнім файлом або відкладеною версією та запустіть Lighthouse. Різниця в метриках наочно покаже, чи виправдана оптимізація.

Інший сценарій: шрифти. Підмініть CSS-файл, прибравши @font-face для кастомного шрифту, і подивіться, наскільки зміниться LCP (Largest Contentful Paint). Або поекспериментуйте з порядком завантаження скриптів, перенесіть критичний JS із <head> у кінець <body> і порівняйте показники.

Гаррі Робертс і Умар Ханса, відомі експерти з вебпродуктивності, випустили скринкасти з наочними прикладами такого підходу. Їхні демонстрації показують: Local Overrides перетворюють браузер на пісочницю для performance-гіпотез, де кожна ітерація займає секунди, а не хвилини.

Якщо ви працюєте з локальним сервером розробки, цінність перевизначень нижча, ви й так контролюєте вихідний код. Але коли потрібно швидко протестувати ідею на проді або на чужому сайті без доступу до кодової бази, цей інструмент незамінний.

⁉️🤔 Часті запитання

Чи зберігаються локальні перевизначення після закриття браузера?

Так, усі файли зберігаються у вибраній вами папці на диску. Після перезапуску Chrome перевизначення автоматично підхоплюються, за умови, що прапорець Enable Local Overrides залишився увімкненим. Самі файли нікуди не зникають, оскільки це звичайні файли у вашій файловій системі.

Чи можна перевизначити відповідь API (JSON), а не лише статичні файли?

Так, починаючи з Chrome 117 це працює. На вкладці Network клацніть правою кнопкою по запиту та виберіть Override content, Chrome створить локальний файл із тілом відповіді, який ви можете відредагувати. Під час наступного запиту браузер поверне вашу локальну версію замість відповіді сервера.

Чому мої зміни, зроблені в панелі Elements, скидаються після оновлення?

Панель Elements редагує DOM у пам’яті, а не вихідні файли. Щоб зміни пережили F5, перемкніться на вкладку Sources, знайдіть відповідний файл і правте його там. Збережіть через Ctrl+S, і Chrome створить локальне перевизначення.

Як поділитися локальними перевизначеннями з колегою?

Просто надішліть вміст папки з перевизначеннями. Колега кладе файли у свою папку, вказує її в DevTools через Select folder for overrides, і всі правки застосовуються на його машині. Для командної роботи зручно тримати папку перевизначень у Git-репозиторії проєкту.

Чи можна використовувати Local Overrides у Firefox або інших браузерах?

У Firefox аналога Local Overrides немає, збереження змін між перезавантаженнями не підтримується. Edge, заснований на Chromium, має ту саму функціональність, що й Chrome, оскільки використовує спільну кодову базу DevTools. Brave і Opera також підтримують перевизначення як Chromium-браузери.

Для чого вам локальні перевизначення насправді

Local Overrides у Chrome DevTools — це не просто «зручна фіча». Це спосіб перетворити браузер на повноцінне середовище для швидкого прототипування та тестування гіпотез без торкання продакшн-коду. Ви економите цикли «правка → білд → деплой → перевірка» й отримуєте результат миттєво.

Спробуйте прямо зараз: відкрийте будь-який сайт, увімкніть перевизначення та змініть колір заголовка. Оновіть сторінку. Побачили, що колір залишився? Ось заради цього все й затівалося.