Вы правите 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, это не просто «удобная фича». Это способ превратить браузер в полноценную среду для быстрого прототипирования и тестирования гипотез без касания продакшн-кода. Вы экономите циклы «правка → билд → деплой → проверка» и получаете результат мгновенно.

Попробуйте прямо сейчас: откройте любой сайт, включите переопределения и поменяйте цвет заголовка. Обновите страницу. Увидели, что цвет остался? Вот ради этого всё и затевалось.