Fecha de publicación: 22 de octubre de 2025
Chrome dejará de admitir la función de edición en vivo de fuentes de JavaScript. Se trasladará a una función experimental en Chrome 142 y planeamos quitarla por completo en Chrome 145 (febrero de 2026). No quitaremos otras funciones potentes relacionadas con los archivos fuente, como Invalidaciones locales, Espacios de trabajo o Fragmentos, que seguirán siendo totalmente compatibles.
El equipo de Herramientas para desarrolladores de Chrome trabaja constantemente para proporcionarles a los desarrolladores herramientas potentes y confiables. Como parte de este esfuerzo, a veces debemos retirar funciones que ya no son útiles. Esta decisión no se tomó a la ligera y se basa en el costo de mantenimiento desproporcionadamente alto de la función, su bajo uso y la existencia de alternativas modernas superiores. Sabemos que los cambios en cualquier flujo de trabajo pueden ser perjudiciales, y el objetivo de esta publicación es explicar claramente nuestros motivos.
¿Qué era la edición en vivo?
La edición en vivo te permite reemplazar el contenido de un archivo de secuencia de comandos en tiempo de ejecución, sobre la marcha. Esto incluso funcionaba cuando la secuencia de comandos se pausaba en un punto de interrupción. Podrías modificar el código JavaScript en el panel Sources y aplicar el cambio guardando el archivo (Cmd+S / Ctrl+S). Luego, el depurador parchearía las funciones que ya se habían definido en el tiempo de ejecución. Si la función modificada estaba en la pila de llamadas, también se reiniciaría.
El objetivo era proporcionar una forma de probar pequeños cambios sin una recarga de página completa, que de otro modo borraría el estado de la aplicación. De esta manera, su objetivo era similar al que logra el reemplazo en caliente de módulos (HMR) en las pilas de desarrollo modernas.
¿Por qué lo quitaremos?
La experiencia del usuario en la edición en vivo siempre fue un desafío. El atajo relacionado (Comando+S / Ctrl+S) suele asociarse con guardar un archivo, pero no con otros efectos secundarios, lo que puede ser sorprendente. Cuando falla, los comentarios pueden ser poco claros: Es posible que Herramientas para desarrolladores muestre un mensaje de advertencia como "LiveEdit failed: Functions that are on the stack (currently being executed) can not be edited", que se puede pasar por alto, lo que deja al desarrollador sin saber si se aplicó su cambio.
La situación empeora aún más cuando la edición en vivo interactúa con otras funciones de Herramientas para desarrolladores relacionadas con los archivos fuente. Por ejemplo, editar en vivo el contenido de un fragmento de código de Herramientas para desarrolladores puede confundir a Herramientas para desarrolladores con referencia a la identidad de la fuente del fragmento de código, lo que hace que la nueva versión se muestre como un archivo de solo lectura. Cuando la función Workspaces está habilitada, Herramientas para desarrolladores puede observar los cambios en el código fuente en el sistema de archivos y aplicar estos cambios sin problemas a la página activa. Este comportamiento puede ser esperado o sorprendente según el entorno del usuario y la configuración de su cadena de herramientas.
El problema original que intentaba resolver la edición en vivo (realizar cambios sin perder el estado de la aplicación) ahora se resuelve de manera más eficaz con el reemplazo de módulo en caliente (HMR). La HMR es una función estándar en los frameworks de desarrollo web modernos, como React, Angular o Vue. Logra el mismo efecto en el espacio del usuario y en un nivel de abstracción más alto. La edición en vivo en Herramientas para desarrolladores puede interferir con él, lo que genera un comportamiento inesperado y defectuoso.
Estos problemas contribuyen a una experiencia del usuario difícil. Además, según nuestras estadísticas de uso, la función no se convirtió en una parte fundamental de los flujos de trabajo de la mayoría de los desarrolladores. La cantidad de usuarios que interactúan con esta función es muy baja y presenta una tendencia a la baja.
Alto costo de mantenimiento y complejidad técnica
Reemplazar código en una página publicada no es sencillo en términos de definir una semántica razonable, sino también en su implementación. Esto impone un costo de ingeniería significativo en el motor de JavaScript V8 y en las Herramientas para desarrolladores de Chrome, lo que requiere una consideración cuidadosa en muchas partes de V8. A menos que se tenga mucho cuidado, la edición en vivo puede provocar fallas difíciles de reproducir y depurar. Por ejemplo, si la nueva versión de una función contiene una cantidad diferente de literales de expresión regular, objeto o función que la versión anterior, la estructura de datos que realiza un seguimiento de estos literales debe conciliarse con cuidado.
Esta carga de mantenimiento ralentiza la implementación de nuevas funciones de JavaScript y desvía recursos de la mejora de las funciones de Herramientas para desarrolladores más utilizadas.
Esta complejidad también generó muchas situaciones no admitidas, incluidas las siguientes:
- Editar una función que está en la pila de llamadas, pero no en el marco superior
- Editar funciones o generadores asíncronos
- Editar el código de nivel superior de un módulo de ES
Alternativas
Como se mencionó anteriormente, el reemplazo en caliente de módulos (HMR) es una alternativa más popular y superior a la edición en vivo en algunos aspectos clave:
- La edición en vivo reemplaza partes de la versión anterior de la página publicada a nivel del código fuente. Por otro lado, la HMR reemplaza la versión anterior en el nivel de abstracción previsto por el framework web, lo que aumenta la probabilidad de migrar correctamente el componente y el estado de la aplicación durante una actualización en vivo.
- La HMR funciona en el código fuente que creaste. Editas tus archivos originales (por ejemplo, TypeScript, JSX) en tu editor, y la herramienta de compilación controla la actualización en el navegador, mientras que la edición en vivo solo afecta los archivos fuente implementados, que, en muchos casos, son el resultado de la compilación que genera la cadena de herramientas.
- Es robusto y está bien integrado. La HMR es una parte fundamental de la cadena de herramientas de desarrollo moderna, ya que proporciona una experiencia confiable con comentarios claros cuando las actualizaciones se realizan correctamente o fallan.
La eliminación de la edición en vivo no afecta otras dos funciones potentes de Chrome DevTools:
- Invalidaciones locales te permite interceptar una solicitud de red y entregar un archivo local en su lugar. Es ideal para crear prototipos de cambios en un sitio de producción activo en el que no tienes acceso al código fuente. Los cambios persisten cuando se vuelve a cargar la página.
- Workspaces convierte Herramientas para desarrolladores en un editor más potente, ya que crea una vinculación bidireccional entre el panel Sources y los archivos de tu proyecto local. Cuando guardas un cambio en Herramientas para desarrolladores, se guarda directamente en tu sistema de archivos. Esto puede activar el proceso de HMR o de recarga en vivo del servidor de desarrollo.
Conclusión
Quitaremos la edición en vivo porque su alto costo de mantenimiento y su bajo uso la hacen insostenible. El ecosistema moderno de desarrollo web proporcionó una solución muy superior en el reemplazo dinámico de módulos.
Al retirar esta función, podemos enfocar nuestros esfuerzos de ingeniería en las partes más importantes de Herramientas para desarrolladores de Chrome. Este es el cronograma de eliminación:
- En el futuro cercano, la función se trasladará a un experimento en Chrome 142 y estará disponible como una marca de Chrome (chrome://flags/#devtools-live-edit).
- Chrome 145 (febrero de 2026): Se quitarán por completo la función y la marca de Chrome correspondiente.
Agradecemos tus comentarios sobre este cambio. Agrega tus comentarios sobre el problema de comentarios.