Опубликовано: 22 октября 2025 г.
Chrome прекращает поддержку функции редактирования исходных кодов JavaScript в режиме реального времени . В Chrome 142 она будет перенесена под экспериментальный статус, и мы планируем полностью удалить её в Chrome 145 (февраль 2026 г.). Мы не уберём другие мощные функции, связанные с исходными файлами, такие как локальные переопределения , рабочие области и фрагменты кода , которые по-прежнему будут полностью поддерживаться.
Команда Chrome DevTools постоянно работает над тем, чтобы предоставить разработчикам мощные и надёжные инструменты. В рамках этой работы нам иногда приходится отказываться от функций, которые больше не выполняют свою функцию. Это решение далось нелегко и продиктовано непропорционально высокой стоимостью поддержки этой функции, её низкой востребованностью и наличием более совершенных современных альтернатив. Мы знаем, что изменения в любом рабочем процессе могут нарушить работу, и в этой публикации мы стремимся чётко объяснить наши решения.
Что такое монтаж в реальном времени?
Функция редактирования в реальном времени позволяла заменять содержимое файла скрипта во время выполнения, «на лету». Это работало даже при остановке скрипта в точке останова. Вы могли изменить код JavaScript на панели «Источники» и применить изменения, сохранив файл ( Command+S / Ctrl+S ). После этого отладчик исправлял функции, уже определённые во время выполнения. Если изменённая функция находилась в стеке вызовов, она также перезапускалась.
Цель состояла в том, чтобы предоставить возможность тестировать небольшие изменения без полной перезагрузки страницы, которая в противном случае сбросила бы состояние приложения. Таким образом, задача была аналогична задаче горячей замены модулей (HMR) в современных стеках разработки.
Почему мы его убираем?
Пользовательский опыт редактирования в реальном времени всегда был сложным. Сочетание клавиш (Command+S / Ctrl+S) обычно связано с сохранением файла, но не с дальнейшими побочными эффектами, что может показаться неожиданным. В случае сбоя реакция может быть неясной: DevTools может вывести предупреждение типа «Ошибка LiveEdit: Функции, находящиеся в стеке (выполняемые в данный момент), не могут быть отредактированы», которое можно пропустить, и разработчик не будет уверен, что его изменения были применены.
Ситуация становится ещё хуже, когда редактирование в режиме реального времени взаимодействует с другими функциями DevTools, связанными с исходными файлами. Например, редактирование содержимого фрагмента кода DevTools в режиме реального времени может привести к тому, что DevTools запутается в идентификации исходного кода фрагмента, в результате чего новая версия будет отображаться как файл, доступный только для чтения. При включении функции «Рабочие области» DevTools может отслеживать изменения исходного кода в файловой системе и автоматически применять их к текущей странице. Такое поведение может быть ожидаемым или неожиданным в зависимости от среды пользователя и настроек его набора инструментов.
Первоначальная проблема, которую пыталась решить функция живого редактирования — внесение изменений без потери состояния приложения — теперь решается более эффективно с помощью горячей замены модулей (HMR). HMR — стандартная функция современных фреймворков веб-разработки, таких как React, Angular и Vue. Она обеспечивает тот же эффект в пользовательском пространстве и на более высоком уровне абстракции. Живое редактирование в DevTools может помешать её работе, что приводит к неожиданному и ошибочному поведению.
Эти проблемы усложняют работу пользователей. Кроме того, наша статистика использования подтверждает, что эта функция не стала неотъемлемой частью рабочего процесса большинства разработчиков. Число пользователей, использующих эту функцию, очень мало и имеет тенденцию к снижению.
Высокая стоимость обслуживания и техническая сложность
Замена кода на работающей странице — непростая задача как с точки зрения определения разумной семантики, так и с точки зрения её реализации. Это требует значительных инженерных затрат на JavaScript-движок V8 и инструменты разработчика Chrome, требуя тщательного анализа многих компонентов V8. Если не соблюдать осторожность, редактирование в процессе работы может привести к трудновоспроизводимым и трудноотлаживаемым сбоям. Например, если новая версия функции содержит другое количество регулярных выражений, объектов или литералов функций, чем предыдущая версия, необходимо тщательно согласовать структуру данных, отслеживающую эти литералы.
Эта нагрузка по обслуживанию замедляет реализацию новых функций JavaScript и отвлекает ресурсы от улучшения более широко используемых функций DevTools.
Эта сложность также привела к появлению множества неподдерживаемых сценариев, включая:
- Редактирование функции, которая находится в стеке вызовов, но не в самом верхнем фрейме.
- Редактирование асинхронных функций или генераторов.
- Редактирование кода верхнего уровня модуля ES.
Альтернативы
Как уже упоминалось ранее, горячая замена модулей (HMR) является более популярной альтернативой и превосходит живое редактирование по нескольким ключевым аспектам:
- При редактировании в режиме реального времени части старой версии страницы заменяются на уровне исходного кода. С другой стороны, HMR заменяет старую версию на уровне абстракции, предусмотренном веб-фреймворком, что повышает вероятность корректной миграции компонента и состояния приложения во время обновления в режиме реального времени.
- HMR работает с вашим исходным кодом. Вы редактируете исходные файлы (например, TypeScript, JSX) в редакторе, а инструмент сборки обрабатывает обновления в браузере, тогда как редактирование в режиме реального времени затрагивает только развёрнутые исходные файлы, которые во многих случаях являются результатом сборки, сгенерированной цепочкой инструментов.
- Он надёжен и хорошо интегрирован. HMR — ключевой элемент современной цепочки инструментов разработки, обеспечивающий надёжный опыт и чёткую обратную связь при успешном или неудачном обновлении.
Удаление возможности редактирования в реальном времени не влияет на две другие мощные функции Chrome DevTools:
- Функция локальных переопределений позволяет перехватывать сетевой запрос и вместо него использовать локальный файл. Это идеально подходит для прототипирования изменений на работающем сайте, где нет доступа к исходному коду. Изменения сохраняются при перезагрузке страницы.
- Workspaces превращает DevTools в более мощный редактор, создавая двустороннюю связь между панелью «Источники» и локальными файлами проекта. При сохранении изменений в DevTools они сохраняются непосредственно в вашей файловой системе. Это может затем запустить HMR или процесс живой перезагрузки на вашем сервере разработки.
Заключение
Мы отказываемся от функции редактирования в реальном времени, поскольку её высокая стоимость обслуживания и низкая востребованность делают её нежизнеспособной. Современная экосистема веб-разработки предлагает гораздо более эффективное решение для горячей замены модулей.
Отказавшись от этой функции, мы сможем сосредоточить усилия разработчиков на более важных аспектах Chrome DevTools. Сроки удаления указаны ниже:
- Ближайшее будущее: эта функция будет перемещена в экспериментальную версию Chrome 142 и будет доступна в виде флага Chrome (chrome://flags/#devtools-live-edit).
- Chrome 145 (февраль 2026 г.): эта функция и соответствующий флаг Chrome будут полностью удалены.
Мы будем рады вашим отзывам об этом изменении. Оставьте свои комментарии по вопросу обратной связи .