Accede a los servidores locales y las instancias de Chrome con la redirección de puertos

Kayce Basques

Meggin Kearney

Sofia Emelianova

Puedes usar la redirección de puertos para lo siguiente:

• Caso 1. Depurar una pestaña abierta en una instancia diferente de Chrome
• Caso 2: Aloja un sitio en un servidor web de un equipo de desarrollo y accede al contenido desde un dispositivo Android con un cable USB.

En el caso 2, la redirección de puertos funciona a través de un puerto TCP de escucha en tu dispositivo Android que se asigna a un puerto TCP en tu máquina de desarrollo. El tráfico entre los puertos viaja a través de la conexión USB que conecta tu dispositivo Android al equipo de desarrollo. De esta forma, la conexión no depende de la configuración de red.

Además, si el servidor web usa un dominio personalizado, puedes configurar tu dispositivo Android para tener acceso al contenido del dominio mediante la asignación de dominios personalizados.

Configura la redirección de puertos

Según tu caso, sigue los pasos que se indican a continuación.

Caso 1: Configura la redirección de puertos a otra instancia de Chrome

1. Ejecuta otra instancia de Chrome con el parámetro --remote-debugging-port=PORT, por ejemplo:

   macOS

   open -a "Google Chrome" --args --remote-debugging-port=PORT
   

   Windows

   start chrome --remote-debugging-port=PORT
   

   Linux

   google-chrome --remote-debugging-port=PORT
   

2. En la instancia de Chrome con la que realizas la depuración, haz lo siguiente:

   1. Abre chrome://inspect/#devices.
   2. Asegúrate de que la opción Discover network targets esté marcada.
   3. Haz clic en Configurar junto a la casilla de verificación.

   4. En Configuración de descubrimiento de destino, ingresa localhost:PORT, marca Habilitar reenvío de puertos y haz clic en Listo.

      

   5. En Dispositivos, verás un nuevo destino remoto. Haz clic en inspeccionar junto a la pestaña que deseas depurar.

      

3. Se abrirá una nueva ventana de DevTools en el modo de dispositivo. En la barra de direcciones de la parte superior, puedes ingresar la dirección del sitio web que deseas depurar.

   

4. Junto a la barra de direcciones, puedes activar o desactivar los métodos de entrada.

Caso 2: Configura la redirección de puertos a través de USB para tu dispositivo Android

1. Configura la depuración remota entre tu máquina de desarrollo y tu dispositivo Android. Cuando termines, deberías ver tu dispositivo Android en la lista.

   

2. Asegúrate de que esté marcada la opción Discover USB devices.

3. Haz clic en Redirección de puertos junto a la casilla de verificación.

4. En la configuración de redirección de puertos, localhost:8080 se configura de forma predeterminada. Marca Habilitar redirección de puertos.

   .

5. Si quieres configurar otros puertos, sigue los siguientes pasos. De lo contrario, omite los pasos y haz clic en Listo.

6. En el campo de texto Puerto de la izquierda, ingresa el número de puerto desde el que deseas acceder al sitio en tu dispositivo Android. Por ejemplo, si quieres acceder al sitio desde localhost:5000, debes ingresar 5000.

7. En el campo de texto IP address and port de la derecha, ingresa la dirección IP o el nombre de host desde los que se ejecuta tu sitio en el servidor web de tu máquina de desarrollo, seguido del número de puerto. Por ejemplo, si tu sitio se ejecuta en localhost:5000, debes ingresar localhost:5000.

8. Haz clic en Listo.

La redirección de puertos ya está configurada. Puedes ver un indicador de estado de la redirección de puertos en la parte superior y junto al nombre del dispositivo.

Para ver el contenido, abre Chrome en tu dispositivo Android y ve al puerto localhost que especificaste en el campo Device port. Por ejemplo, si ingresaste 5000 en el campo, accederás a localhost:5000.

Asigna a dominios locales personalizados

La asignación de dominios personalizados te permite ver en un dispositivo Android el contenido de un servidor web de tu equipo de desarrollo con dominio personalizado.

Por ejemplo, supongamos que en tu sitio se usa una biblioteca JavaScript de terceros que solo funciona en el dominio chrome.devtools de la lista de entidades permitidas. Por lo tanto, creas una entrada en el archivo hosts de tu equipo de desarrollo para asignar este dominio a localhost (es decir, 127.0.0.1 chrome.devtools). Después de configurar la asignación de dominios personalizados y la redirección de puertos, podrás ver el sitio en tu dispositivo Android en la URL chrome.devtools.

Configura la redirección de puertos al servidor proxy

Para asignar un dominio personalizado, debes ejecutar un servidor proxy en tu máquina de desarrollo. Algunos ejemplos de servidores proxy son Charles, Squid y Fiddler.

Para configurar la redirección de puertos a un proxy, sigue estos pasos:

1. Ejecuta el servidor proxy y anota el puerto que usa.

   Nota: El servidor proxy y el servidor web deben ejecutarse en puertos diferentes.

2. Configura la redirección de puertos en tu dispositivo Android. En el campo local address, ingresa localhost: seguido del puerto en el que se ejecuta tu servidor proxy. Por ejemplo, si se ejecuta en el puerto 8000, debes ingresar localhost:8000. En el campo device port, ingresa el número en el que deseas que realice la recepción el dispositivo Android, como 3333.

Establece la configuración del proxy en tu dispositivo

A continuación, debes configurar tu dispositivo Android para que se comunique con el servidor proxy.

1. En tu dispositivo Android, ve a Configuración > Wi-Fi.

2. Mantén presionado el nombre de la red a la que te conectaste.

   Nota: La configuración de proxy se aplica por red.

3. Presiona Modificar red.

4. Presiona Opciones avanzadas. Se mostrará la configuración del proxy.

5. Presiona el menú Proxy y selecciona Manual.

6. En el campo Nombre de host del proxy, ingresa localhost.

7. En el campo Proxy port, ingresa el número de puerto que ingresaste para device port en la sección anterior.

8. Presiona Guardar.

Con esta configuración, el dispositivo redireccionará todas las solicitudes al proxy de tu equipo de desarrollo. El proxy realiza solicitudes en nombre de tu dispositivo, de modo que las solicitudes a tu dominio local personalizado se resuelvan correctamente.

Ahora puedes acceder a dominios personalizados en tu dispositivo Android como lo harías en la máquina de desarrollo.

Si tu servidor web se ejecuta en un puerto no estándar, recuerda especificar el puerto cuando solicites contenido desde tu dispositivo Android. Por ejemplo, si en tu servidor web se usa el dominio personalizado chrome.devtools en el puerto 7331, cuando veas el sitio desde tu dispositivo Android, debes usar la URL chrome.devtools:7331.

Sugerencia: Para volver a la navegación normal, no olvides revertir la configuración del proxy en tu dispositivo Android después de desconectarte de la máquina de desarrollo.