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

Kayce vascos
Kayce Vascos
Twitter GitHub Glitch
Meggin Kearney
Meggin Kearney
Sofía Emelianova
Sofía Emelianova
GitHub

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

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

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

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

Cómo configurar la redirección de puertos

Según tu caso, sigue los pasos siguientes.

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 que estás depurando con:

    1. Abre chrome://inspect/#devices.
    2. Asegúrate de que esté marcada la casilla Casilla de verificación. Descubre destinos de red.
    3. Haz clic en Configurar junto a la casilla de verificación.

    4. En Target discovery settings, ingresa localhost:PORT, marca Casilla de verificación. Enable port callback (Habilitar redirección de puertos) y haz clic en Done.

      La ventana de configuración de descubrimiento de destino.

    5. De nuevo en Dispositivos, verá una nueva orientación remota. Haz clic en inspect junto a la pestaña que deseas depurar.

      El vínculo de inspección junto a la pestaña en el destino remoto

  3. Se abrirá una nueva ventana de Herramientas para desarrolladores en modo de dispositivo. En la barra de direcciones de la parte superior, ingresa la dirección del sitio web que quieras depurar.

    Herramientas para desarrolladores en el modo de dispositivo.

  4. Junto a la barra de direcciones, puedes alternar métodos de entrada.

Caso 2: Configura la redirección de puertos mediante USB para tu dispositivo Android

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

    Es el dispositivo Android de la lista.

  2. Asegúrate de que esté marcada la opción Casilla de verificación. Descubrir dispositivos USB.

  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 la redirección de puertos.

    La configuración de redirección de puertos.

  5. Si quieres configurar otros puertos, sigue los pasos que se indican a continuación. De lo contrario, omite los pasos y haz clic en Listo.

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

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

  8. Haz clic en Listo.

Ya se configuró la redirección de puertos. Puedes ver un indicador de estado de la redirección de puertos en la parte superior, además del nombre del dispositivo.

El estado de la redirección de puertos

Para ver el contenido, abre Chrome en tu dispositivo Android y ve al puerto localhost que especificaste en el campo Puerto del dispositivo. Por ejemplo, si ingresas 5000 en el campo, irías a localhost:5000.

Asignar a dominios locales personalizados

La asignación de dominios personalizados te permite ver contenido en un dispositivo Android desde un servidor web en tu máquina de desarrollo que usa un dominio personalizado.

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

Configurar 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, haz lo siguiente:

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

  2. Configura la redirección de puertos a tu dispositivo Android. En el campo dirección local, 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 puerto del dispositivo, ingresa el número en el que deseas que escuche tu dispositivo Android, como 3333.

Cómo establecer la configuración de proxy en tu dispositivo

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

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

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

  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 Puerto proxy, ingresa el número de puerto que ingresaste para puerto del dispositivo en la sección anterior.

  8. Presiona Guardar.

Con esta configuración, el dispositivo reenviará todas las solicitudes al proxy de tu máquina de desarrollo. El proxy realiza solicitudes en nombre de tu dispositivo, por lo que las solicitudes a tu dominio local personalizado se resuelven correctamente.

Ahora puedes acceder a los 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 tu servidor web usa el dominio personalizado chrome.devtools en el puerto 7331, cuando veas el sitio desde tu dispositivo Android, deberías usar la URL chrome.devtools:7331.