Abrir DevTools y el explorador DevTools

  • Artículo

Hay varias maneras de abrir la pestaña DevTools y la pestaña Edge DevTools: Browser :

Enfoque Descripción
Haga clic con el botón derecho en un .html archivo. No se usa ningún launch.json archivo. Abre DevTools en modo de depuración. Use este enfoque si desea depurar y la aplicación web puede ejecutarse desde el sistema de archivos en lugar de desde un servidor web.
Haga clic en el botón Iniciar instancia . No se usa ningún launch.json archivo. Abre DevTools en modo que no es de depuración. Use este enfoque si no desea depurar.
Haga clic en el botón Iniciar proyecto . Se usa un launch.json archivo. Abre DevTools en modo de depuración. Use este enfoque si quiere depurar y la aplicación web usa API que requieren ejecutarla en un servidor web.

Estos enfoques se describen a continuación. Para obtener pasos detallados sobre cómo usar el repositorio Demos, consulte Introducción al uso de la extensión DevTools para Visual Studio Code.

Abrir DevTools haciendo clic con el botón derecho en un archivo HTML

Este enfoque abre las pestañas DevTools en modo de depuración y se recomienda, a menos que la página web requiera ejecutarse en un servidor web, como sucede con determinadas API.

Para abrir DevTools y el explorador incrustado, junto con la barra de herramientas Depurar de un archivo HTML en el disco duro:

  1. En Visual Studio Code, realice cualquiera de las siguientes acciones:

    • Seleccione Explorador de barra> de actividad (botón Explorador) > haga clic en el botón Abrir carpeta.
    • Seleccione Archivo>Abrir carpeta.
    • Seleccione Abrir archivo>reciente.

  2. Abra una carpeta que contenga los archivos de origen de la aplicación web.

  3. En Visual Studio Code, en el Explorador, haga clic con el botón derecho en un .html archivo, seleccione Abrir con Edge y, a continuación, seleccione Abrir explorador con DevTools:

    Haga clic con el botón derecho en un archivo HTML en el Explorador para abrirlo con Edge con o sin DevTools

    Se abre DevTools, con Visual Studio Code en modo de depuración:

    Los componentes de DevTools de la selección de Abrir explorador con DevTools

    Los siguientes componentes se abren en Visual Studio Code:

    • La pestaña Edge DevTools , incluida la pestaña Elementos y otras pestañas de herramientas.
    • La pestaña Edge DevTools: Browser , incluida la barra de herramientas Emulación de dispositivo en la parte inferior.
    • La barra de herramientas Depurar de la parte superior, incluidos botones como Pausar, Paso a paso por encima, Paso a paso a paso, Restablecer y Detener.
    • Consola de depuración en la parte inferior.
    • La barra lateral Ejecutar y depurar (igual que al seleccionar Ver>ejecución).

En este enfoque, una instancia no aparece en la barra> de actividadDestinos deherramientas> de Microsoft Edge.

Use la barra lateral del explorador , desde la barra de actividad, para abrir un .js archivo durante la depuración de una página web.

La pestaña Edge DevTools: Browser incluye una barra de herramientas emulación de dispositivo. Esta pestaña contiene un explorador web incrustado con características de DevTools. A veces, este explorador se denomina screencast o un explorador sin cabeza para DevTools.

Vea también:

Para abrir DevTools, haga clic en el botón Iniciar instancia

Este enfoque abre las pestañas DevTools en modo que no es de depuración y resulta útil cuando no se desea la barra de herramientas Depurar.

En estos pasos se da por supuesto que inicialmente no hay ninguna carpeta abierta en Visual Studio Code y que la carpeta que está abriendo no tiene ningún launch.json archivo.

  1. En Visual Studio Code, realice cualquiera de las siguientes acciones:

    • Seleccione Explorador de barra> de actividad (el botón Explorador) > haga clic en el botón Abrir carpeta.
    • Seleccione Archivo>Abrir carpeta.
    • Seleccione Abrir archivo>reciente.

    Para usar todas las características de DevTools, incluida la edición reflejada de CSS del archivo de origen local al editar CSS en DevTools, abra una carpeta que contenga archivos de origen que coincidan con la página web que desea mostrar en DevTools.

  2. En la barra de actividad, haga clic en el botón Herramientas de Microsoft Edge (botón Herramientas de Microsoft Edge) y, a continuación, haga clic en el botón Iniciar instancia :

    Microsoft Edge DevTools para la extensión Visual Studio Code

    Si hay un botón Iniciar proyecto en lugar de un botón Iniciar instancia , indica que la carpeta contiene un launch.json archivo. Inspeccione qué dirección URL se especifica en el archivo y considere la launch.json posibilidad de hacer clic en Iniciar proyecto, como se describe en Abrir DevTools haciendo clic en el botón Iniciar proyecto. O bien, si desea explorar cómo funciona el botón Iniciar instancia , puede eliminar el launch.json archivo y generar un nuevo launch.json archivo más adelante.

    Hacer clic en el botón Iniciar instancia

    • Se abre la pestaña Edge DevTools , que inicialmente contiene información sobre la página Correcto, como C:\Users\username\.vscode\extensions\ms-edgedevtools.vscode-edge-devtools-2.1.1\out\startpage\index.html.
    • Se abre la pestaña Edge DevTools: Browser (el explorador incrustado), que muestra inicialmente la página Correcto .
    • La barra de herramientas Depurar y la interfaz de usuario de depuración de Visual Studio Code no se abre.
    • En el panel Herramientas de Microsoft Edge , se abre la sección Destinos , que enumera un destino y se quita el botón Iniciar instancia .

  3. En la pestaña Edge DevTools: Browser ,en la barra de direcciones, pegue una ruta de acceso de archivo o una dirección URL que coincida con la carpeta que está abierta en Visual Studio Code.

    Si desea obtener una ruta de acceso de archivo: en Visual Studio Code >Explorador de barra> de actividad (botón Explorador) > haga clic con el botón derecho en una .htmlruta de acceso de copia de archivo>.

    Si desea pegar una dirección URL, algunos ejemplos son:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Las direcciones URL similares se muestran en la línea de comandos al escribir (por ejemplo) npx http-server para ejecutar un servidor web localmente.

    La página web especificada se muestra en la pestaña Edge DevTools: Browser (explorador incrustado). La pestaña Edge DevTools muestra información sobre la página web.

Vea también:

Para abrir DevTools, haga clic en el botón Iniciar proyecto

Este enfoque abre las pestañas DevTools en modo de depuración y se recomienda si la página web requiere la ejecución en un servidor web como con determinadas API.

Resumen:

  1. Abra una carpeta local que contenga los archivos de origen de la aplicación web.
  2. Haga clic en el botón Generar launch.json .
  3. Agregue una dirección URL de localhost en el .json archivo.
  4. Haga clic en el botón Iniciar proyecto .

En estos pasos se da por supuesto que está ejecutando un servidor web localhost, como se describe en Paso 6: Configurar un servidor localhost en Instalación de la extensión DevTools para Visual Studio Code.

Para abrir DevTools haciendo clic en el botón Iniciar proyecto , siga estos pasos.

Abrir una carpeta local que contenga archivos de origen de la aplicación web

  1. En Visual Studio Code, realice cualquiera de las siguientes acciones:

    • Seleccione Explorador de barra> de actividad (el icono Explorador) > haga clic en el botón Abrir carpeta.
    • Seleccione Archivo>Abrir carpeta.
    • Seleccione Abrir archivo>reciente.

    Seleccione un directorio que contenga archivos de origen de página web. Por ejemplo, C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. En la barra de actividad, haga clic en Herramientas de Microsoft Edge (el icono Herramientas de Microsoft Edge). Se abre el panel Herramientas de Microsoft Edge .

    • Si la carpeta aún no contiene un .vscode directorio que contiene , launch.json filela barra lateral herramientas de Microsoft Edge contiene un botón Iniciar instancia y un botón Generar launch.json .

    • Si la carpeta ya contiene un .vscode directorio que contiene un launch.json archivo, la barra lateral herramientas de Microsoft Edge contiene un botón Iniciar proyecto y no un botón Generar launch.json . En este caso, es posible que desee inspeccionar o cambiar la url cadena en el archivo existente launch.json , como se describe a continuación.

Continúe a continuación.

Haga clic en el botón "Generar launch.json"

  1. Haga clic en el botón Generar launch.json :

    Botón

    Se abre el nuevo launch.json archivo.

Continúe a continuación.

Agregar una dirección URL de localhost en el archivo .json

  1. En varios lugares del launch.json archivo, en cada una de las "url" líneas, desplácese a la derecha y anote el comentario "Proporcione la dirección URL del proyecto para finalizar la configuración":

    "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
// Provide your project's url to finish configuring

    Ejemplos típicos:

    • http://localhost:8080
    • http://127.0.0.1:8080
    • http://10.0.1.8:8080

    Las direcciones URL similares se muestran en la línea de comandos al iniciar un servidor escribiendo npx http-server.

  2. Pegue la ruta de acceso dentro de la cadena de ruta de acceso entre comillas en una de las "url" cadenas. Por ejemplo:

    "url": "http://localhost:8080", // Provide your project's url to finish configuring

    La cadena de dirección URL puede ser una ruta de acceso de archivo local, aunque en ese caso, no necesita un launch.json archivo; para iniciar DevTools, simplemente puede hacer clic con el botón derecho en un .html archivo en el Explorador de Visual Studio Code en su lugar.

    (Si mantiene la dirección URL tal cual, se muestra la página Success predeterminada y puede pegar una dirección URL localhost o una ruta de acceso de archivo en la barra de direcciones de la pestaña Edge DevTools: Browser ).

  3. Copie y pegue la línea de dirección URL modificada en los demás lugares del launch.json archivo. Para modificar todas las instancias al mismo tiempo, puede copiar una cadena de dirección URL actualizada, seleccionar una instancia de la cadena de dirección URL inicial, presionar Ctrl+Mayús+L para seleccionar todas las instancias y, a continuación, pegar la cadena actualizada.

  4. Guarde el launch.json archivo.

Continúe a continuación.

Haga clic en el botón Iniciar proyecto

  1. En Visual Studio Code, en la barra de actividad, haga clic en el botón Herramientas de Microsoft Edge (icono Herramientas de Microsoft Edge). Se abre el panel Herramientas de Microsoft Edge , que ahora contiene un botón Iniciar proyecto (en lugar de un botón Iniciar instancia ) y ya no contiene un botón Generar launch.json archivo :

    Panel Destinos cuando existe un archivo launch.json

  2. Haga clic en el botón Iniciar proyecto .

    La pestaña Edge DevTools y la pestaña Edge DevTools: Browser se abren en paneles independientes, en los que se muestra la dirección URL de la aplicación web especificada en launch.json:

    La aplicación de demostración a hacer iniciada en DevTools por el botón Iniciar proyecto

Vea también:

Asignación de archivos URL a la carpeta abierta

Si DevTools es capaz de correlacionar y establecer la asignación del área de trabajo entre los archivos descargados del servidor y los archivos de la carpeta que abrió, DevTools proporciona toda su funcionalidad, incluida la edición reflejada de CSS de los archivos de origen local al cambiar CSS en DevTools.

Si DevTools no puede asignar los archivos de la pestaña Edge DevTools: Browser a los archivos de la carpeta que abrió en el Explorador de Visual Studio Code, puede inspeccionar páginas web y cambiarlas, como cambiar valores CSS en la pestaña Orígenes de la herramienta Elementos de la pestaña Edge DevTools. Sin embargo, en este caso, no puede usar la edición de reflejo css para que DevTools edite automáticamente los archivos de origen. Entre las opciones se incluyen:

  • Desactive la casilla edición de reflejo css en la pestaña Estilos y continúe experimentando con los cambios css.

  • Abra una carpeta que contenga archivos de origen que coincidan con la página web.

  • Conceda confianza a una carpeta; para ello, ábrala en Visual Studio Code.

Por ejemplo:

  1. Abra una carpeta que se encuentra en la copia local del repositorio Demos, como , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\se describe en Introducción al uso de la extensión DevTools para Visual Studio Code.

  2. Abra DevTools, como se describió anteriormente.

  3. En la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador ), en la barra de direcciones, pegue una dirección URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

    Los archivos de esa dirección residen realmente como archivos de origen en GitHub en https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do, no en la unidad.

    Ahora puede cambiar los valores CSS en la herramienta Elementos, ya que en el Explorador de Visual Studio Code, se abre una carpeta que contiene archivos de código fuente que DevTools puede asignar a los archivos de recursos descargados que constituyen la página web:

    Se pueden cambiar los valores CSS si hay una carpeta mappable abierta

    La imagen anterior muestra el uso de la pestaña Estilos con la casilla de edición de reflejo CSS seleccionada, que se usa para ampliar el texto del cuerpo a 24 puntos. La pestaña Edge DevTools: Browser representa la página a medida que cambia el valor. La barra de direcciones de la pestaña contiene una dirección URL en lugar de una ruta de acceso de archivo. Dado que la casilla de edición de reflejo CSS está seleccionada y el archivo correspondiente .css se encuentra en una carpeta local que se puede escribir, el .css archivo de la unidad local se edita 24pt;automáticamente en .

Evitar mensajes de error sobre la creación de reflejo o la asignación

A continuación, intente cambiar CSS sin abrir una carpeta coincidente:

  1. SeleccioneCarpeta de cierrede archivos>.

  2. Inicie DevTools haciendo clic en el botón Iniciar instancia , como se describió anteriormente.

  3. En la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador ), en la barra de direcciones, pegue una dirección URL remota github.io , como https://microsoftedge.github.io/Demos/demo-to-do/.

    Ahora que la carpeta que contiene los archivos de origen está cerrada, si intenta cambiar los valores CSS en la herramienta Elementos , recibirá un mensaje de error DevTools. Puede inspeccionar páginas web, pero no editarlas. Puede interactuar con la página y verla en diferentes dispositivos y estados de representación mediante la barra de herramientas Emulación de dispositivos en la parte inferior de la pestaña Edge DevTools: Browser .

    También puede inspeccionar CSS y HTML. Pero si intenta cambiar la página, recibirá un error, como Error durante la creación de reflejo:

    Explorador cuando no se pueden cambiar los valores CSS si una carpeta mappable no está abierta

    Como otra perspectiva sobre ese escenario, esta es la barra lateral herramientas de Microsoft Edge cuando se hizo clic en el botón Iniciar instancia , al ver una dirección URL y una carpeta no está abierta que contiene archivos de código fuente que coinciden con los recursos de la página web de la dirección URL:

    Barra lateral de herramientas de Microsoft Edge al ver una dirección URL

Entre las opciones de este caso se incluyen:

  • Desactive la casilla edición de reflejo CSS en la pestaña Estilos y continúe experimentando con los cambios CSS (sin la edición automática de CSS en los archivos de origen). Esto evita más mensajes de error sobre la asignación a archivos de origen para la edición de reflejo CSS.

  • Abra una carpeta que contenga archivos de origen que coincidan con la página web para tener la edición automática de CSS en los archivos de origen.

  • Conceda confianza a una carpeta abriendola en Visual Studio Code, en caso de que DevTools intente editar un archivo de origen, pero Visual Studio Code no ha concedido confianza a la carpeta contenedora.

Vea también:

Direcciones URL, rutas de acceso de archivo y apertura de una carpeta coincidente

En algunos casos, el comportamiento de DevTools es diferente para las rutas de acceso de archivo que para las direcciones URL.

  • Si escribe una ruta de acceso de archivo en la barra de direcciones del explorador DevTools y edita css en DevTools, el explorador sabe dónde encontrar los archivos de origen. Es posible que tenga que abrir esa carpeta para concederle confianza, para poder usar la edición de reflejo css. O bien, desactive la casilla de edición del reflejo CSS .

  • Si escribe una dirección URL en la barra de direcciones del explorador DevTools, el explorador sabrá dónde encontrar la copia descargada de los archivos de origen, si solo está inspeccionando páginas web y experimentando con CSS. Si desea usar la edición de reflejo CSS (para que DevTools edite CSS en los archivos de origen), debe activar la casilla de edición de reflejo css y debe abrir una carpeta en Visual Studio Code que contenga archivos de origen que coincidan con la página web.

Cerrar DevTools

Cierre instancias de DevTools mediante cualquiera de los enfoques siguientes:

  • Si Visual Studio Code está en modo de depuración, haga clic en el botón Detener de la barra de herramientas Depurar o seleccione Ejecutar>detener depuración:

    Botón Detener en la barra de herramientas Depurar

    Se cierran las pestañas Edge DevTools y Edge DevTools: Browser .

  • Si la pestaña Edge DevTools está abierta, haga clic en Cerrar (x) en la pestaña .

  • Si la pestaña Edge DevTools: Browser está abierta, haga clic en Cerrar (x) en la pestaña .

  • Seleccione Barra de actividad>Herramientas de Microsoft Edge. Si en la sección Destinos se enumeran los destinos, mantenga el puntero sobre el lado derecho de la instancia de destino y, a continuación, haga clic en Cerrar instancia (x):

    Cerrar DevTools si se abre haciendo clic en el botón Iniciar instancia

    A continuación, se muestra el botón Iniciar instancia o Iniciar proyecto .

  • SeleccioneCarpeta de cierrede archivos>.

  • Cierre la ventana Visual Studio Code.

  • Si la extensión DevTools abrió un explorador externo controlado por la automatización, cierre la ventana del explorador externo.

Consulte también