Extensión Microsoft Edge DevTools para Visual Studio Code

La extensión Microsoft Edge DevTools para Visual Studio Code le permite usar Microsoft Edge DevTools y una versión incrustada de Microsoft Edge Browser, incluida la emulación de dispositivo, directamente desde Visual Studio Code. La extensión DevTools proporciona muchas de las mismas herramientas que se encuentran en DevTools que se encuentra en el explorador Microsoft Edge, desde dentro de Visual Studio Code.

Herramientas de desarrollo de Microsoft Edge y vista previa del explorador en Visual Studio Code

Visual Studio Code es un editor de código fuente ligero pero eficaz para Windows, Linux y macOS. Visual Studio Code es un IDE completo (entorno de desarrollo integrado) que tiene características eficaces para el desarrollo web. Visual Studio Code incluye compatibilidad integrada con JavaScript, TypeScript y Node.js, por lo que es una herramienta excelente para desarrolladores web, especialmente con esta extensión de DevTools.

La extensión DevTools para Visual Studio Code le permite:

  • Desarrollar páginas web y usar DevTools sin salir de Visual Studio Code. Esta extensión ofrece una alternativa al uso de DevTools para el desarrollo de páginas web dentro de la ventana del explorador.

  • Emular dispositivos, como mostrar la página web en varios tamaños de ventanilla durante el desarrollo.

  • Pruebe la accesibilidad de sus páginas web desde Visual Studio Code.

  • Edite CSS y SASS en directo y vea los cambios reflejados inmediatamente en una instancia del explorador mientras edita los archivos de origen reales. La edición de reflejo de CSS permite controlar si se guardan cambios en el .css archivo. DevTools abre y edita .css los archivos, pero sin guardarlos automáticamente, para que pueda decidir y controlar si desea guardar los cambios realizados en la pestaña Estilos de la herramienta Elementos .

Comparación de enfoques

La extensión DevTools para Visual Studio Code es una de las diferentes maneras de usar DevTools para cambiar los archivos locales.

Enfoque Pros y contras Artículo
Herramienta Elementos de DevTools > del explorador > Debe copiar manualmente los cambios de DevTools en los archivos de origen. Inspección, edición y depuración de HTML y CSS con la herramienta Elementos
Herramienta >Orígenes de DevTools > del explorador >Pestaña Área de trabajo para definir un área de trabajo Guarda siempre los cambios, lo que podría desalentar la experimentación Seleccione un área de trabajo local para usar DevTools para editar archivos y guardar los cambios en el disco en Introducción a laherramienta Orígenes
Explorador > DevTools >Configuración>Experimentos Abrir>archivos de origen en Visual Studio Code Guarda siempre los cambios, lo que podría desalentar la experimentación Abrir archivos de origen en Visual Studio Code
Extensión Microsoft Edge DevTools para Visual Studio Code Abre y edita automáticamente el archivo fuente CSS, pero no guarda el archivo automáticamente, por lo que puede elegir si desea guardar las ediciones. El presente artículo.

Edición bidireccional

Los cambios se reflejan entre los archivos de origen de la carpeta abierta, la pestaña DevTools de Edge y la pestaña DevTools de Edge: Explorador , como se indica a continuación.

CSS

A través de la edición de reflejo de CSS, puede cambiar CSS en la pestaña DevTools de Edge y cambia automáticamente en el .html archivo de origen o .css , además de reflejarse en el DevTools de Edge: pestaña Explorador . DevTools le permite decidir si desea guardar el cambio, lo que le permite experimentar.

Puede cambiar CSS en el .css archivo de origen o .html , guardar el cambio y, a continuación, volver a cargar la página web en el DevTools de Edge: pestaña Explorador , que también actualiza la pestaña DevTools de Edge .

HTML

Puede editar el árbol DOM en la pestaña Edge DevTools (como cambiar <h2>Success!</h2> a <h2>CSS Success!</h2>), después presionar Entrar y, a continuación, actualizar Edge DevTools: pestaña Explorador para ver el cambio. (Esto no edita automáticamente el .html archivo de origen).

Puede cambiar HTML en el .html archivo de origen, guardar el cambio y, a continuación, volver a cargar la página web en Microsoft Edge DevTools: pestaña Explorador , que también actualiza la pestaña Edge DevTools .

Tareas admitidas por las herramientas de desarrollo

La extensión DevTools para Visual Studio Code le permite:

Tarea Artículo
Inicie una nueva instancia del explorador con DevTools para el proyecto. Abrir DevTools y el explorador DevTools
Emular diferentes dispositivos y ver el proyecto en diferentes modos de visualización. Emulación de dispositivo
Vea la estructura y el diseño del DOM en tiempo de ejecución de la página mediante la herramienta Elementos . Abrir archivos de origen desde la herramienta Elementos
Analice y cambie los estilos CSS del proyecto con la vista previa dinámica y los cambios realizados en los archivos de origen del proyecto. Actualizar archivos .css desde la herramienta Estilos (edición de reflejo de CSS)
Analizar el tráfico del sitio con la herramienta Red . Integración de herramientas de red
Registre información, pruebe JavaScript y acceda a Windows o DOM con la herramienta de consola . Integración de la consola
Inspeccione los trabajadores de almacenamiento y servicio con la herramienta Aplicación . Integración de la herramienta de aplicación
Use la extensión en el flujo de trabajo de depuración de Visual Studio Code. Integración con la depuración de Visual Studio Code

Información general sobre las herramientas de la extensión de DevTools

Las siguientes herramientas se incluyen en la extensión DevTools para Visual Studio Code. Los siguientes artículos no se centran específicamente en la extensión DevTools para Visual Studio Code, sino que son para las DevTools del explorador Microsoft Edge.

Herramienta Objetivo Artículo
Herramienta Elementos Inspeccione, edite y depure el HTML y el CSS. Puede editar en la herramienta mientras muestra los cambios en el explorador en tiempo real. Depure el HTML con el árbol DOM e inspeccione y trabaje en el CSS de la página web. Inspección, edición y depuración de HTML y CSS con la herramienta Elementos
Herramienta de consola Una línea de comandos inteligente y enriquecida dentro de DevTools. Una gran herramienta complementaria para usar con otras herramientas. Proporciona una manera eficaz de programar la funcionalidad de scripts, inspeccionar la página web actual y manipular la página web actual con JavaScript. Información general sobre la consola
Herramienta Red Use la herramienta Red para asegurarse de que los recursos se descargan o cargan según lo previsto. Inspeccione las propiedades de un recurso individual, como los encabezados HTTP, el contenido o el tamaño. Inspeccionar actividad de red
Herramienta Aplicación Use la herramienta Aplicación para administrar el almacenamiento de páginas de aplicaciones web, incluidos manifiestos, trabajos de servicio, almacenamiento local, cookies, almacenamiento de caché y servicios en segundo plano. La herramienta Aplicación, para administrar el almacenamiento
Herramienta Problemas La herramienta Problemas analiza automáticamente la página web actual, informa de los problemas agrupados por tipo y proporciona documentación para ayudar a explicar y resolver los problemas. Buscar y corregir problemas con la herramienta Problemas
Herramienta Condiciones de red Utilice la herramienta Condiciones de red para deshabilitar la caché del explorador, establecer la limitación de red, establecer la cadena de agente de usuario y establecer codificaciones de contenido como deflate, gzip y br. Herramienta Condiciones de red
Herramienta Bloqueo de la solicitud de red Use la herramienta Bloqueo de solicitudes de red para probar el bloqueo de solicitudes de red en un patrón de dirección URL especificado y ver cómo se comporta una página web. Herramienta Bloqueo de la solicitud de red
Herramienta Inspeccionar Use la herramienta Inspeccionar para ver información sobre un elemento dentro de una página web representada. Cuando la herramienta Inspeccionar está activa, pasa el ratón por encima de los elementos de la página web, y DevTools agrega una superposición de información y un resaltado de cuadrícula en la página web. Analizar páginas con la herramienta Inspeccionar
Emulación de dispositivo Usa la herramienta de emulación de dispositivo , también denominada modo de simulación de dispositivo o modo de dispositivo, para aproximar el aspecto y la respuesta de la página en un dispositivo móvil. Emular dispositivos móviles (emulación de dispositivo)

Para obtener la lista de todas las herramientas que se encuentran en la versión de DevTools del explorador Microsoft Edge, consulte Acerca de la lista de herramientas.

Vea también

Páginas externas:

  • Se actualizó por última vez el