Puertos y vista previa

Abre desde tu iPhone los servidores de desarrollo de tu ordenador, comparte uno por un tiempo y mira las peticiones que le llegan.

Todo esto necesita coderemote 0.2.0 o posterior en el ordenador. Con uno más antiguo la app lo dice: ejecuta coderemote update (o npm install -g coderemote@latest) y vuelve a iniciar coderemote up.

La pestaña Ports

Lista los puertos TCP en los que escucha tu usuario, actualizado cada pocos segundos:

• Started in Code Remote: servidores que iniciaste desde un terminal de la app, con un acceso directo de vuelta a ese terminal.
• Other: todo lo demás que se ejecuta en una carpeta de proyecto, como un servidor que iniciaste en el propio ordenador.
• Background: apps y servicios del sistema, ocultos hasta que los pidas.

Desliza un puerto para detener el proceso que hay detrás (recibe SIGTERM, como Ctrl+C); mantenlo pulsado para Force Stop (SIGKILL). Solo se puede detener un proceso que esté escuchando ahora mismo, y nunca el de otro usuario. Detener otro agente de coderemote pregunta primero, ya que todos los dispositivos emparejados con él pierden su carpeta.

Vista previa

Toca un puerto para abrirlo en la app. La primera vez tarda unos segundos mientras el ordenador lo abre en el túnel; después carga como cualquier página, ya con tu sesión iniciada.

• Funcionan los servidores en localhost, 127.0.0.1 o ::1: no hace falta que tu servidor de desarrollo escuche en todas las interfaces.
• Las peticiones llegan a tu servidor dirigidas a localhost:<port>, así que los servidores que comprueban el nombre de host (Vite, por ejemplo) las aceptan tal cual.
• Copy Link y Open in Safari te dan la dirección de la vista previa. Es privada: Safari te pide primero iniciar sesión con la misma cuenta.
• Stop Preview quita el puerto del túnel. Tu servidor sigue funcionando.
• Cuando tu servidor se detiene (lo paras en la pestaña Ports, cierras su terminal, pulsas Ctrl+C o falla), su vista previa termina sola cuando nada ha escuchado en el puerto durante 30 segundos, enlace público incluido. Un servidor que se reinicia en ese tiempo conserva su vista previa. Uno que detienes desde la pestaña Ports la pierde al instante. Necesita coderemote 0.3.8 o posterior.

Los puertos previsualizados se marcan en la pestaña Ports.

Comparte un enlace público

Para enseñar tu trabajo a alguien sin cuenta, abre el menú de la vista previa y elige Share Publicly, durante una hora, ocho horas o un día. Hasta entonces, cualquiera con el enlace puede abrir ese puerto sin iniciar sesión.

• Solo se comparte ese puerto. El agente, sus archivos y su terminal siguen siendo privados, en un túnel propio.
• Un banner muestra hasta cuándo es público el enlace, con Make Private para terminarlo ya. La pestaña Ports marca el puerto con un globo terráqueo.
• El enlace también deja de funcionar cuando detienes la vista previa o el agente.

Recuerda que es un servidor de desarrollo: compártelo con personas a las que enseñarías tu pantalla, y vuelve a hacerlo privado cuando termines.

Peticiones

El icono de lista en una vista previa muestra las peticiones que llegaron a ese puerto, las más recientes primero y en vivo: método, ruta, estado, hora y tamaño, coloreados según el estado. Toca una para ver sus cabeceras y cuerpos; el JSON se muestra con sangría y los cuerpos comprimidos se descomprimen.

• Funciona con todo lo que llega por el enlace de vista previa: la propia página, sus llamadas a la API, un webhook que apuntaste a un enlace compartido.
• Se conservan las últimas 200 peticiones por puerto, con cuerpos de hasta 64 KB. Los WebSockets (hot reload) pasan sin tocarse; solo se lista su handshake.
• Permanecen en tu ordenador, en memoria: Clear las olvida, y detener coderemote up también.

La barra bajo la lista permite acotarla. El botón de filtro elige un tipo (All, Fetch/XHR, CSS, Image o JS, según el tipo de respuesta y la extensión del archivo), y el campo de búsqueda coincide con el método y la ruta.

El mismo registro se puede leer en un terminal del ordenador con coderemote requests, de modo que un agente de programación como Claude Code puede depurar con él. Allí los tokens y las cookies se ocultan a menos que los pida.

Cómo funciona

Las vistas previas no pasan por el túnel del propio agente. La primera vez que previsualizas un puerto, el agente crea un segundo túnel privado, con la etiqueta coderemote-preview, y reenvía tus puertos allí. Añadir o quitar un puerto reinicia la conexión de ese túnel, así que otras vistas previas abiertas parpadean un momento, mientras tus terminales, archivos y git ni se enteran.

Cada puerto previsualizado pasa por un pequeño proxy del agente, que es lo que registra las peticiones. Por eso la dirección de una vista previa lleva el número de puerto del proxy y no el de tu servidor (…-49213.usw2.devtunnels.ms para un servidor en el 5173): la app siempre muestra el puerto propio de tu servidor.

El agente elimina el túnel de vista previa cuando se detiene; si no puede (porque el ordenador se quedó sin conexión, por ejemplo), lo hace el siguiente coderemote up. Los enlaces compartidos nunca sobreviven al agente que los creó, y las vistas previas antiguas no consumen los 10 túneles de tu cuenta. Cuando la cuenta está llena de todos modos, una vista previa nueva elimina primero los túneles de vista previa que ningún agente sirve; si no basta, la app lo dice, y coderemote tunnels en el ordenador muestra qué eliminar.