Compartir a través de

Para empezar, haga clic en el botón Iniciar instancia

  • Artículo

Use este tutorial para aprender a abrir y cerrar DevTools haciendo clic en el botón Iniciar instancia para experimentar con la página web de demostración Correcta . Este enfoque abre la página web de éxito predeterminada para su edición, para que pueda practicar y empezar a usar DevTools. Este enfoque es prominente en la interfaz de usuario y abre las pestañas DevTools en modo no de depuración.

Esta forma de abrir DevTools es útil para estos escenarios sencillos:

  • Si desea experimentar con la edición del valor predeterminado, página Correcto mediante DevTools.

  • Si desea inspeccionar una página especificada mediante una dirección URL y no necesita el modo de depuración. Para abrir otra página web, puede pegar una dirección URL o una ruta de acceso de archivo en la barra de direcciones.

  • Si no tiene una carpeta abierta y desea experimentar con el cambio de CSS en una página especificada mediante una dirección URL, sin editar un archivo de origen local.

Paso 1: Instalación de DevTools y requisitos previos

  1. Si aún no lo ha hecho, siga los pasos descritos en Instalación de la extensión DevTools para Visual Studio Code y, a continuación, continúe a continuación. No es necesario instalar e iniciar un servidor web para el tutorial actual, pero se recomienda.

Paso 2: Hacer clic en el botón Iniciar instancia

  1. En Visual Studio Code, seleccione Archivo>nueva ventana. Inicialmente, no se abre ninguna carpeta.

  2. En la barra de actividad, haga clic en Herramientas de Microsoft Edge (icono Herramientas de Microsoft Edge). Se abre la barra lateral herramientas de Microsoft Edge :

    Botón Iniciar instancia sin carpeta abierta

  3. Haga clic en el botón Iniciar instancia . Se abre la pestaña Edge DevTools y se abre la pestaña Edge DevTools: Browser , que muestra la página success predeterminada:

    El resultado predeterminado de Launch Instance: las pestañas

    El archivo de origen de la página Correcto es un archivo independiente .html en un directorio de la unidad. Se trata de un único .html archivo que incluye reglas CSS (en un <style> elemento). También incluye una instrucción JavaScript console (en un <script> elemento).

    En la barra de direcciones del explorador DevTools, hay una file:/// ruta de acceso (en lugar de una dirección URL), como file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html.

    La barra de herramientas Depurar no se abre, la consola de depuración no se abre en la parte inferior y la barra lateral Ejecutar y depurar con inspección no se abre. Esto indica que Visual Studio Code no está en modo de depuración.

    Puede modificar CSS de los archivos locales y puede escribir rutas de acceso de archivo local o direcciones URL de localhost en la barra de direcciones e interactuar con páginas de aplicación web locales.

Paso 3: Abrir una carpeta para asegurarse de que se permite la edición

Tenga en cuenta que no hay ninguna carpeta abierta en Visual Studio Code. En muchos casos, para usar DevTools para editar en lugar de simplemente inspeccionar una página web, debe abrir una carpeta que contenga archivos de origen que coincidan con la página web mostrada. La apertura de una carpeta ofrece la máxima flexibilidad para que pueda abrir una dirección URL o una ruta de acceso de archivo en la barra de direcciones de la pestaña Edge DevTools: Browser y tener funcionalidad completa de DevTools.

Abrir una carpeta le ofrece la oportunidad de conceder confianza a la carpeta para que no reciba un mensaje de error al intentar cambiar los archivos de origen. De lo contrario, podría recibir un mensaje de error porque la carpeta que contiene la página Correcto no es de confianza y la edición de reflejo de CSS está intentando editar el CSS en el index.html archivo de origen de esa carpeta.

  1. En la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador ), en la barra de direcciones, seleccione y copie la ruta de acceso del archivo, pero no el nombre de archivo, como C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/.

  2. Enel Exploradorde barra> de actividad, haga clic en el botón Abrir carpeta. En el cuadro de diálogo Abrir carpeta , pegue o seleccione la ruta de acceso que copió anteriormente. Para pegar, en Windows, es posible que deba cambiar / a \ en toda la ruta de acceso. A continuación, haga clic en el botón Seleccionar carpeta .

    La primera vez que abra una carpeta, debe confirmar que confía en los autores de los archivos de esta carpeta:

    ¿Confía en los autores en los archivos de esta carpeta?

  3. Haga clic en el botón Sí, confío en los autores .

    Es posible que deba iniciar DevTools de nuevo, como se indica a continuación:

  1. En la barra de actividad, haga clic en Herramientas de Microsoft Edge (botón Herramientas de Microsoft Edge). Se abre la barra lateral herramientas de Microsoft Edge .

  2. Haga clic en el botón Iniciar instancia . Se abre la pestaña Edge DevTools y se abre la pestaña Edge DevTools: Browser , que muestra la página success predeterminada.

Paso 4: Editar CSS

  1. En la pestaña Edge DevTools , haga clic en el botón Seleccionar un elemento de la página para inspeccionarlo (icono inspeccionar herramienta), a veces denominado botón Inspeccionar .

  2. En la pestaña Edge DevTools: Browser (Herramientas perimetrales: explorador), mantenga el puntero sobre diferentes partes de la página, mientras watch el árbol DOM de la herramienta Elementos se expande y actualiza.

  3. Haga clic en el encabezado Success! , que es un <h2> elemento.

  4. En la pestaña Estilos de la herramienta Elementos de la pestaña Edge DevTools , en la sección declaración h2 sin cursiva, haga clic a la derecha de la margin-bottom regla.

  5. Escriba una nueva regla CSS, font-size: 5emy presione Entrar. La ortografía es similar a la regla que se muestra en la sección cursiva h2 de la hoja de estilos del agente de usuario debajo de ella.

    index.html se abre, se edita automáticamente mediante la edición del reflejo CSS para agregar la línea font-size: 5em;. Desplácese hasta esa línea, en la sección h2.

Paso 5: Organizar pestañas

  1. En la pestaña Edge DevTools , en la sección h2 no cursiva, haga clic en la font-size regla CSS que especificó y, a continuación, presione Flecha arriba y Flecha abajo. El valor de index.html se edita automáticamente mediante la edición de reflejo css.

  2. En la pestaña Edge DevTools , haga clic en el botón Alternar difusión de pantalla un par de veces. La pestaña Edge DevTools: Browser se abre y cierra, lo que ahorra espacio.

  3. En la pestaña Edge DevTools: Browser ,haga clic en el botón Cerrar DevTools o Abrir DevTools un par de veces. La otra pestaña DevTools se abre y cierra, lo que ahorra espacio.

  4. En la parte superior de Visual Studio Code, haga clic con el botón derecho en las pestañas y organifíquelas para mostrar las distintas pestañas al mismo tiempo:

    • Barra lateral, en la que se muestranlos destinosde herramientas> de Microsoft Edge.
    • Editor index.html .
    • Pestaña Edge DevTools .
    • La pestaña Edge DevTools: Browser .

    Edición correcta de páginas con el tamaño de CSS h2

Paso 6: Ver JavaScript

  1. En la pestaña Edge DevTools , haga clic en la pestaña de la herramienta Consola . index.html contiene un <script> elemento que contiene una instrucción console.info('Hello from the startpage!')JavaScript , que genera "Hello from the startpage!"

Paso 7: Abrir un archivo .html diferente mediante la barra de direcciones

Al escribir una ruta de acceso de archivo en la barra de direcciones de la pestaña Edge DevTools: Browser , el botón Iniciar instancia también se puede usar para abrir un archivo diferente .html en lugar de la página Correcto. Lo demostraremos a continuación. Sin embargo, hacer clic con el botón derecho en un .html archivo en el Explorador es la forma principal de abrir un .html archivo que no sea la página web correcto y las herramientas se abren en modo de depuración.

  1. En Visual Studio Code, seleccione Abrir>carpeta (o Abrir reciente). Abra la \Demos\demo-to-do\ carpeta del repositorio Demos que ha clonado, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\.

  2. Si se le solicita, haga clic en el botón Sí, confío en los autores . Además de conceder confianza, el enfoque Launch Instance no requiere realmente abrir una carpeta, si especifica una ruta de acceso de archivo en lugar de una dirección URL en el explorador DevTools.

  3. Si las pestañas Edge DevTools aún no están abiertas, en la barra de actividad, haga clic en Herramientas de Microsoft Edge (icono Herramientas de Microsoft Edge) y, a continuación, haga clic en el botón Iniciar instancia :

    Botón Iniciar instancia sin carpeta abierta

  4. En la barra de actividad, seleccione Explorador y, a continuación, haga clic con el botón derecho en \demo-to-do\index.html>Copiar ruta de acceso.

  5. En Visual Studio Code, en la pestaña Edge DevTools: Browser ,en la barra de direcciones, pegue la ruta de archivo local que obtuvo anteriormente, como C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html. Se abre la aplicación de demostración a hacer . En la barra de direcciones, se agrega el file:/// prefijo y (en Windows) las barras diagonales inversas se cambian a barras diagonales; por ejemplo: file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html.

  6. En la aplicación de demostración, escriba una tarea, como prueba.

  7. En la herramienta Elementos , en la pestaña Estilos , cambie un valor CSS, como: haga clic en el tamaño del punto en body { font-size: 11pt;} y, a continuación, cambie el valor. El archivo correspondiente .css de la carpeta que abrió se abre y se edita automáticamente para que coincida con los cambios realizados en la pestaña Estilos (pero no se guarda).

Paso 8: Abrir una dirección URL mediante la barra de direcciones

La barra de direcciones resultante del botón Iniciar instancia se puede usar para abrir una dirección URL en un servidor. Sin embargo, el botón Iniciar proyecto , junto con una dirección URL almacenada en launch.json, es la manera principal de abrir una página web especificando una dirección URL y, a continuación, las herramientas se abren en modo de depuración.

  1. Si el servidor localhost se está ejecutando, pegue una dirección URL de localhost, como http://localhost:8080. O bien, pegue la dirección URL del servidor github.io, https://microsoftedge.github.io/Demos/demo-to-do/.

    Si desea usar la edición de reflejo CSS para editar los archivos de origen, tendrá que abrir una carpeta en Visual Studio Code; de lo contrario, desactive la casilla de edición de reflejo CSS en la pestaña Estilos de la herramienta Elementos de la pestaña Edge DevTools. Al desactivar la casilla se evitan los mensajes de error sobre la asignación y la edición de reflejo al experimentar con el cambio de CSS en DevTools y no se ha proporcionado un archivo de origen CSS para DevTools.

  2. En la aplicación de demostración, escriba una tarea, como prueba.

  3. En la herramienta Elementos , en la pestaña Estilos , cambie un valor CSS, como: haga clic en el tamaño del punto en body { font-size: 11pt;} y, a continuación, cambie el valor. El archivo correspondiente .css de la carpeta que abrió se abre y se edita automáticamente para que coincida con los cambios realizados en la pestaña Estilos (pero no se guarda).

Paso 9: Cerrar DevTools

  1. Haga clic en Cerrar (x) en la pestaña Edge DevTools y en la pestaña Edge DevTools: Browser ,si estas pestañas están abiertas.

  2. 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). Aparece el botón Iniciar instancia , que indica que todas las instancias de DevTools están cerradas.

    Cierre de DevTools abierto a través de Launch Instance

    Tenga en cuenta que en la captura de pantalla anterior, Visual Studio Code no está en modo depuración; por ejemplo, no hay ninguna barra de herramientas Depurar. Si hubiera una barra de herramientas Depurar, puede cerrar DevTools haciendo clic en el botón Detener .

  3. Cierre index.html sin guardar los cambios.

  4. SeleccioneCarpeta de cierrede archivos>.

Vea también:

Ha terminado el tutorial "Introducción haciendo clic en el botón Iniciar instancia". Se recomienda que también realice los demás tutoriales; consulte Introducción al uso de la extensión DevTools para Visual Studio Code.

Consulte también

Github: