Acceso a servidores locales

Hospede un sitio en un servidor Web de equipo de desarrollo y, a continuación, obtenga acceso al contenido desde un dispositivo Android.

Con un cable USB y Microsoft Edge DevTools, ejecute un sitio desde un equipo de desarrollo y, después, vea el sitio en un dispositivo Android.

Resumen

  • El reenvío de puertos le permite ver el contenido hospedado en el servidor Web que se está ejecutando en el equipo de desarrollo de su dispositivo Android.
  • Si su servidor web está usando un dominio personalizado, configure su dispositivo Android para obtener acceso al contenido de ese dominio con asignación de dominio personalizada.

Configurar el reenvío de Puerto

El reenvío de puertos permite que su dispositivo Android obtenga acceso al contenido que se hospeda en el servidor Web que se ejecuta en el equipo de desarrollo. El reenvío de puertos funciona creando un puerto TCP de escucha en el dispositivo Android que se asigna a un puerto TCP en el equipo de desarrollo. El tráfico entre los puertos viaja a través de la conexión USB entre el dispositivo Android y el equipo de desarrollo, de modo que la conexión no depende de la configuración de la red.

Para habilitar el reenvío de puerto:

  1. Configure la depuración remota entre el equipo de desarrollo y el dispositivo Android. Cuando haya terminado, debe ver el dispositivo Android en el menú de la izquierda del cuadro de diálogo inspeccionar dispositivos y un indicador de estado conectado .

  2. En el cuadro de diálogo inspeccionar dispositivos de DevTools, habilite el reenvío de Puerto.

  3. Elija Agregar regla.

    Agregar una regla de reenvío de Puerto

  4. En el cuadro de texto Puerto de dispositivo de la izquierda, escriba el localhost número de puerto desde el que desea poder obtener acceso al sitio en su dispositivo Android. Por ejemplo, si desea obtener acceso al sitio desde localhost:5000 entrar 5000 .

  5. En el cuadro de texto dirección local de la derecha, escriba la dirección IP o el nombre de host en el que su sitio está hospedado en el servidor Web que se ejecuta en el equipo de desarrollo, seguido del número de puerto. Por ejemplo, si su sitio se ejecuta en localhost:7331 entrar localhost:7331 .

  6. Elija Agregar.

El reenvío de puertos ya está configurado. En el cuadro de diálogo inspeccionar dispositivos , vea el indicador de estado para el puerto hacia adelante en la ficha de su dispositivo.

Agregar una regla de reenvío de Puerto

Para ver el contenido, abra Microsoft Edge en su dispositivo Android y vaya al localhost Puerto que especificó en el campo Puerto del dispositivo . Por ejemplo, si escribió 5000 en el campo, visite localhost:5000 .

Asignar a dominios locales personalizados

La asignación de dominios personalizada le permite ver el contenido en un dispositivo Android desde un servidor Web en el equipo de desarrollo que usa un dominio personalizado.

Por ejemplo, supongamos que su sitio usa una biblioteca de JavaScript de terceros que solo funciona en el dominio microsoft-edge.devtools . Por lo tanto, puede crear una entrada en el hosts archivo en el equipo de desarrollo para asignar este dominio a localhost \ (por ejemplo, 127.0.0.1 microsoft-edge.devtools ). Después de configurar la asignación de dominios y el reenvío de puertos personalizados, vea el sitio en su dispositivo Android en la dirección URL microsoft-edge.devtools .

Configurar el desvío de puertos para el servidor proxy

Para asignar un dominio personalizado, debe ejecutar un servidor proxy en el equipo de desarrollo. Ejemplos de servidores proxy son Charles, Squidy Fiddler.

Para configurar el reenvío de puertos a un proxy:

  1. Ejecute el servidor proxy y grabe el puerto que está usando.

    Nota

    El servidor proxy y el servidor Web deben ejecutarse en puertos diferentes.

  2. Configure el reenvío de Puerto a su dispositivo Android. En el campo dirección local , escriba localhost: seguido del puerto en el que se está ejecutando el servidor proxy. Por ejemplo, si se está ejecutando en el puerto 8000 , vaya a localhost:8000 . En el campo Puerto del dispositivo , escriba el número en el que desea que escuche el dispositivo Android, como 3333 .

Establecer la configuración de proxy en el dispositivo

A continuación, debe configurar su dispositivo Android para comunicarse con el servidor proxy.

  1. En su dispositivo Android, vaya a configuración > WiFi.

  2. Pulse el nombre de la red a la que está conectado en ese momento.

    Nota

    Se aplica la configuración de proxy por red.

  3. Elija modificar red.

  4. Elija Opciones avanzadas. Se muestra la configuración de proxy.

  5. Seleccione el menú proxy y elija manual.

  6. En el campo nombre de host del proxy , escriba localhost .

  7. En el campo Puerto proxy , escriba el número de puerto que escribió para Puerto de dispositivo en la sección anterior.

  8. Elija Guardar.

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

Ahora, obtenga acceso a los dominios personalizados de su dispositivo Android como en el equipo de desarrollo.

Si su servidor Web se está ejecutando fuera de un puerto no estándar, recuerde especificar el puerto al solicitar el contenido de su dispositivo Android. Por ejemplo, si su servidor web está usando el dominio personalizado microsoft-edge.devtools en el puerto 7331 , al ver el sitio desde su dispositivo Android debe usar la dirección URL microsoft-edge.devtools:7331 .

Sugerencia

Para reanudar la exploración normal, recuerde revertir la configuración del proxy en su dispositivo Android después de desconectarse de la máquina de desarrollo.

Contactar al equipo de Microsoft Edge DevTools

Use las siguientes opciones para discutir las nuevas características y cambios de la publicación, o cualquier otro tema relacionado con DevTools.

  • Envíe sus comentarios con el icono Enviar comentarios o seleccione Alt + Shift + I \ (Windows, Linux ) o Option + Shift + I \ (MacOS ) en DevTools.
  • Tweet a @EdgeDevTools.
  • Enviar una sugerencia a la webque queremos.
  • Para archivar errores sobre este artículo, use la siguiente sección de comentarios .

El icono enviar comentarios en el DevTools de Microsoft Edge

Nota

Algunas partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y se usan según las condiciones descritas en la licencia internacional de Creative Commons Atribution 4,0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ) y Meggin Kearney \ (Tech Writer ).

Licencia de Creative Commons
Este trabajo dispone de licencia conforme a Licencia internacional de Creative Commons Attribution 4.0.