Puedes usar la redirección de puertos para lo siguiente:
- Caso 1: Depura una pestaña abierta en otra instancia de Chrome.
- Caso 2: Aloja un sitio en un servidor web de un equipo 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 de tu máquina de desarrollo. El tráfico entre los puertos viaja a través de la conexión USB entre tu 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 acceder al contenido de ese dominio con 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
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
En la instancia de Chrome que estás depurando con lo siguiente:
- Abre
chrome://inspect/#devices
. - Asegúrate de que la opción
Discover network targets esté marcada.
- Haz clic en Configure junto a la casilla de verificación.
En Configuración de detección de destinos, ingresa
localhost:PORT
, marcaHabilitar redirección 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 Herramientas para desarrolladores en el modo de dispositivo. En la barra de direcciones de la parte superior, puedes ingresar la dirección del sitio web que quieras depurar.
Junto a la barra de direcciones, puedes activar o desactivar los métodos de entrada.
Caso 2: Configuración de 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 hayas terminado, tu dispositivo Android debería aparecer en la lista.
Asegúrate de que
Discover USB devices esté marcado.
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 establece de forma predeterminada. Marca Habilitar redirección de puertos..
Si deseas configurar otros puertos, sigue los pasos que se indican a continuación. 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 conectarte. acceder al sitio en tu dispositivo Android. Por ejemplo, si quieres acceder al sitio de
localhost:5000
, debes ingresar5000
.En el campo de texto IP address and port ubicado a la derecha, ingresa la dirección IP o el nombre de host en los que Se está ejecutando el sitio en el servidor web de la máquina de desarrollo, seguido del número de puerto. Para Por ejemplo, si tu sitio se ejecuta en
localhost:5000
, debes ingresarlocalhost:5000
.Haz clic en Listo.
La redirección de puertos ya está configurada. En la parte superior, también puedes ver un indicador de estado de la redirección de puertos además del nombre del dispositivo.
Para ver el contenido, abre Chrome en tu dispositivo Android y ve al puerto localhost
que
que se especifica en el campo Puerto del dispositivo. Por ejemplo, si ingresaste 5000
en el campo, entonces
iría a localhost:5000
.
Asigna a dominios locales personalizados
La asignación de dominios personalizados te permite ver contenido en un dispositivo Android desde un servidor web en tu de desarrollo que usa un dominio personalizado.
Por ejemplo, supongamos que tu sitio utiliza una biblioteca JavaScript de terceros que solo funciona en la
dominio incluido en la lista de entidades permitidas chrome.devtools
. Por lo tanto, creas una entrada en el archivo hosts
en tu
de desarrollo para asignar este dominio a localhost
(es decir, 127.0.0.1 chrome.devtools
). Después del
configurando 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
.
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. Ejemplos de proxy servidores son Charles, Squid y Fiddler.
Para configurar la redirección de puertos a un proxy, haz lo siguiente:
Ejecuta el servidor proxy y anota el puerto que usa.
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 el servidor proxy. Por ejemplo, si es que se ejecuta en el puerto8000
, debes ingresarlocalhost:8000
. En el campo device port ingresa el número que deseas que escuche tu dispositivo Android, por ejemplo,3333
.
Establece 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 estás conectado.
Presiona Modificar red.
Presiona Opciones avanzadas. Se mostrará la configuración del proxy.
Presiona el menú Proxy y selecciona Manual.
En el campo Nombre de host del proxy, ingresa
localhost
.En el campo Puerto proxy, ingresa el número de puerto que ingresaste para puerto de dispositivo en la sección anterior.
Presiona Guardar.
Con esta configuración, tu dispositivo reenvía todas sus solicitudes al proxy de tu máquina. El proxy realiza solicitudes en nombre de tu dispositivo, por lo que las solicitudes a tu dominio se hayan resuelto correctamente.
Ahora puedes acceder a dominios personalizados en tu dispositivo Android como lo harías en la en una máquina de desarrollo profesional.
Si tu servidor web se ejecuta en un puerto no estándar, recuerda especificar el puerto cuando
solicitando el contenido desde tu dispositivo Android. Por ejemplo, si tu servidor web usa el servidor
dominio chrome.devtools
en el puerto 7331
, cuando ves el sitio desde tu dispositivo Android, debes
usar la URL chrome.devtools:7331
.