Saltar al contenido principal
La pestaña Code te permite ver y editar el código fuente de tu app directamente, dándote control sobre la funcionalidad, el diseño y el comportamiento de tu app mientras ves los cambios al instante.
La pestaña Code es para desarrolladores que quieren más control. Para cambios más simples, usa el editor visual y las herramientas de IA de Base44.
La interfaz de la pestaña Code mostrando el código fuente de tu app

​
Acceder a la pestaña Code

Para abrir la pestaña Code:
  1. Ve al panel de tu app.
  2. Haz clic en la pestaña Code.
La pestaña Code muestra tus archivos del proyecto en un explorador de archivos a la izquierda, con el editor de código ocupando el espacio principal.
Acceso a la pestaña Code desde el panel de tu app
Usa la función Files used in this page para ver qué archivos están detrás de la página que estás previsualizando. Esto te muestra exactamente qué archivos de código se están ejecutando, así sabes a dónde ir cuando quieras editar la página o investigar un problema. Cada entrada en la lista muestra el nombre del archivo y su ruta de carpeta, agrupados por ubicación en tu proyecto, como pages o components. Para ver los archivos usados en una página:
  1. Ve al editor de tu app.
  2. Haz clic en el icono More Actions en la parte superior derecha.
  3. Haz clic en Files used in this page.
Visualización de los archivos usados en una página de tu app
Si quieres pasar de esta vista enfocada a la estructura completa de archivos, haz clic en See all files. Esto te lleva a la vista completa de archivos de código para que puedas seguir explorando desde ahí.

​
Edita con vista previa en vivo

La pestaña Code ofrece una vista de pantalla dividida que muestra tu código en un lado y una vista previa en vivo de tu app en el otro. Esto te permite ver los cambios al instante sin cambiar de contexto.
Vista de pantalla dividida mostrando el código y la vista previa en vivo
Para editar con vista previa en vivo:
  1. Abre un archivo en la pestaña Code.
  2. Haz clic en el conmutador de pantalla dividida en la esquina superior derecha.
  3. Edita tu código a la izquierda y ve los cambios a la derecha.
Cada vez que realices cambios en el código:
  • Haz clic en Save en la parte inferior de la pantalla para aplicar tus cambios y actualizar la vista previa con el código más reciente.
  • Haz clic en Discard en la parte inferior de la pantalla si quieres descartar todas las ediciones sin guardar y volver a la última versión guardada del archivo.
Importante: Si realizas cambios en el código de tu app, asegúrate de hacer clic en Publish para que se publiquen en tu app.
Cuando estés listo para salir de la pantalla dividida, haz clic en Exit split. Para desarrollo local con tu propio IDE, consulta Integración con GitHub.

​
Revisa los cambios de código de la IA

Cuando la IA edita tu app, puedes abrir el modal Code changes para ver exactamente lo que cambió antes de publicar. El modal muestra cada archivo que la IA tocó, agrupado por carpeta, con una vista de diff para cada uno. Para abrir el modal Code changes:
  1. Ve al chat de IA en el editor de tu app.
  2. Pasa el cursor sobre un mensaje donde la IA editó o creó un archivo.
  3. Haz clic en el icono de tres puntos junto a ese cambio y selecciona View Changes.
Se abre un modal con un árbol de archivos a la izquierda y el diff del archivo seleccionado a la derecha. Una barra de estadísticas en la parte superior desglosa cuántos archivos se añadieron, modificaron y eliminaron. Los archivos del árbol están codificados por colores según su estado:
  • Verde para archivos recién añadidos.
  • Ámbar para archivos modificados, que se abren en una vista de diff lado a lado.
  • Rojo para archivos eliminados.
Haz clic en cualquier archivo del árbol para ir directamente a su diff.

​
Preguntas frecuentes

Sí. Puedes abrir y editar cualquier archivo de código que aparezca en el panel de archivos de código, incluidas las páginas, los componentes, los layouts y los helpers de entidades. Si una parte de la app se genera por ti, sigue apareciendo como código normal que puedes modificar.
No. Puedes trabajar en el editor de código a ancho completo si prefieres más espacio. La pantalla dividida es útil cuando quieres ver la vista previa junto a tu código, pero puedes desactivarla en cualquier momento y volver a abrirla más tarde.
Discard elimina todos los cambios sin guardar en el archivo activo y restaura la última versión guardada. Esto es útil si pruebas algo que no funciona y quieres volver atrás rápidamente. Una vez que haces clic en Discard, no puedes recuperar el código sin guardar de esa sesión.
No necesitas ser un experto, pero te ayuda tener familiaridad básica con React y JSX. Puedes empezar con cambios pequeños, como actualizar texto, intercambiar componentes o cambiar estilos simples, y luego pasar a lógica más avanzada a medida que ganes confianza.
Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la versión en inglés.