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 el servidor web de una máquina de desarrollo y, luego, 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 tu dispositivo Android que se asigna a un puerto TCP en tu máquina de desarrollo. El tráfico entre los puertos pasa por la conexión USB entre el dispositivo Android y la máquina de desarrollo, por lo que la conexión no depende de la configuración de red.
Además, si tu servidor web usa un dominio personalizado, puedes configurar tu dispositivo Android para que acceda al contenido de ese dominio con la asignación de dominio personalizado.
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
Ejecuta otra instancia de Chrome con el parámetro
--remote-debugging-port=PORT
, por ejemplo:open -a "Google Chrome" --args --remote-debugging-port=
PORT start chrome --remote-debugging-port=
PORT google-chrome --remote-debugging-port=
PORT En la instancia de Chrome con la que realizas la depuración, haz lo siguiente:
- Abre
chrome://inspect/#devices
. - Asegúrate de que la opción
Discover network targets esté marcada.
- Haz clic en Configurar junto a la casilla de verificación.
En Configuración de descubrimiento de destino, ingresa
localhost:PORT
, marcaHabilitar reenvío de puertos y haz clic en Listo.
En Dispositivos, verás un nuevo destino remoto. Haz clic en inspeccionar junto a la pestaña que deseas depurar.
- Abre
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.
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
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.
Asegúrate de que esté marcada la opción
Descubrir dispositivos USB.
Haz clic en Redirección de puertos junto a la casilla de verificación.
En Configuración de redirección de puertos,
localhost:8080
se configura de forma predeterminada. Marca Habilitar redirección de puertos..
Si quieres configurar otros puertos, sigue los siguientes pasos. De lo contrario, omite los pasos y haz clic en Listo.
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 ingresar5000
.En el campo de texto Dirección IP y puerto de 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, seguido del número de puerto. Por ejemplo, si tu sitio se ejecuta en
localhost:5000
, debes ingresarlocalhost:5000
.Haz clic en Listo.
Se configuró la redirección de puertos. 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 Puerto del dispositivo. Por ejemplo, si ingresaste 5000
en el campo, irás a localhost:5000
.
Asigna 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 usa una biblioteca de JavaScript de terceros que solo funciona en el dominio de la lista de entidades permitidas chrome.devtools
. Por lo tanto, creas una entrada en el archivo hosts
en 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 dominios personalizados y el reenvío 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, haz lo siguiente:
Ejecuta el servidor proxy y toma nota del puerto que usa.
Configura la redirección de puertos en 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 puerto8000
, debes ingresarlocalhost:8000
. En el campo puerto del dispositivo, ingresa el número en el que deseas que escuche tu dispositivo Android, como3333
.
Configura la configuración de proxy en tu dispositivo
A continuación, debes configurar tu dispositivo Android para que se comunique con el servidor proxy.
- En tu dispositivo Android, ve a Configuración > Wi-Fi.
Mantén presionado el nombre de la red a la que te conectaste.
Presiona Modificar red.
Presiona Opciones avanzadas. Se mostrará la configuración de proxy.
Presiona el menú Proxy y selecciona Manual.
En el campo Nombre de host del proxy, ingresa
localhost
.En el campo Puerto de proxy, ingresa el número de puerto que ingresaste para el puerto del dispositivo en la sección anterior.
Presiona Guardar.
Con esta configuración, el dispositivo reenvía todas sus solicitudes al proxy de tu máquina 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 de la misma manera que lo harías en la máquina de desarrollo.
Si tu servidor web se ejecuta desde un puerto no estándar, recuerda especificarlo cuando solicites el 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
.