Windsurf Preview resuelve un problema que todos los desarrolladores conocemos: perder tiempo saltando entre el editor, la terminal y el navegador cada vez que haces un cambio. Si trabajas con una sola pantalla, esta herramienta te deja ejecutar un servidor local y ver tu sitio dentro del propio editor. Es ideal para quien usa Windsurf y Cascade en su flujo diario.

Y aquí viene lo interesante: no solo previsualizas, también seleccionas elementos y los mandas directo al contexto de la inteligencia artificial para modificarlos sin tocar el código.

¿Cómo abro una previsualización del navegador en Windsurf?

Todo arranca desde una sesión limpia de Cascade, el asistente de inteligencia artificial de Windsurf que se encarga de leer y modificar tu código por ti.

El flujo es directo [00:35]:

1. Haz clic en el icono de los tres puntitos en la parte superior.
2. Selecciona Open Preview, que escribe el comando Open a browser preview of my website.
3. Confirma la ejecución en la terminal cuando Cascade te lo pida.

Cascade valida que el servidor de desarrollo se active y luego te da dos botones: abrir en el navegador del sistema o en el navegador interno de Windsurf.

¿Qué es el navegador interno de Windsurf? Es un emulador de navegador que corre dentro del editor como si fuera una pestaña más. No es Google Chrome ni un navegador externo, sino una vista propia de Windsurf con funciones especiales [01:30].

¿Qué puedo hacer con la barra de Windsurf Preview?

La previsualización abre tu página web completa y navegable dentro del editor. Puedes recorrer el homepage, la sección about, los proyectos, las charlas y el blog sin salir de Windsurf [01:45].

Al final de la vista de Cascade aparece una barra con dos funciones clave:

• Mostrar errores de consola de tu sitio.
• Enviar elementos seleccionados directamente a Cascade.

Esa función de enviar elementos se parece mucho al selector de elementos del Dev Tools de Google Chrome. La gran diferencia es que, al hacer clic en un elemento, Windsurf lo manda al contexto de Cascade en lugar de solo inspeccionarlo [02:20].

¿Cómo agrego un elemento al contexto sin describirlo?

Cuando seleccionas un botón, por ejemplo el que dice Ver más de color azul, Windsurf lo añade como @domElement con su enlace y su tipo de componente.

Esto significa que no necesitas explicarle a la inteligencia artificial dónde está el elemento ni cómo se ve. El contexto se arma solo al seleccionarlo [02:40].

¿Para qué sirve enviar un elemento a Cascade? Sirve para darle contexto exacto a la inteligencia artificial sin escribir descripciones. Seleccionas el botón, Cascade ya sabe cuál es, y tú solo le das la instrucción del cambio.

¿Puedo cambiar colores sin tocar el código?

Sí, y esta es la parte más práctica. Con el elemento ya en contexto, le das una instrucción sencilla como "cambia este botón a fondo negro" [03:00].

Cascade identifica que el color actual es azul, entiende que lo quieres en negro y hace el cambio. Del lado izquierdo ves cómo el botón pasa de azul a negro, mientras Cascade sigue explicando qué hizo antes de que aceptes.

La ventaja central es clara: no interactúas con el código directamente, solo le das instrucciones a Cascade y él se encarga de ir al archivo, modificarlo y mostrarte el resultado en el navegador. Tú solo revisas y presionas Aceptar.

Esto vuelve mucho más rápido detectar un bug, identificar algo mal y corregirlo de forma directa, sin abrir el código ni cambiar de ventana.

¿Qué debo hacer al terminar de usar Windsurf Preview?

Un detalle que no debes olvidar: cuando termines, pídele a Cascade que detenga el servidor [03:50].

Si no lo haces, el servidor de desarrollo queda ejecutándose en ese puerto y sigue ocupando recursos. Es un paso pequeño pero importante para mantener tu entorno limpio.

Cuéntame en los comentarios cómo usaste Windsurf Preview y qué problema te ayudó a resolver.