Información general del panel orígenes

Use el panel de orígenes de Microsoft Edge DevTools para realizar las siguientes acciones.

Archivos de visualización

Use el panel de páginas para mostrar todos los recursos que la página ha cargado.

El panel de páginas

Organización del panel de páginas :

  • El nivel superior, como top en la figura anterior, representa un marco html. Buscar top en cada página que visite. top representa el marco del documento principal.
  • El segundo nivel, como docs.microsoft.com en la figura anterior, representa un origen.
  • El tercer nivel, el cuarto nivel, etc., representan los directorios y recursos que se cargaron desde ese origen. Por ejemplo, en la ilustración anterior, la ruta de acceso completa al recurso devtools-guide-chromium es docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium

Elija un archivo en el panel de páginas para mostrar el contenido en el panel del Editor . Puede mostrar cualquier tipo de archivo. Para las imágenes, se muestra una vista previa de la imagen.

Mostrar el contenido de a4d10f71.index-docs.js en el panel Editor

Editar CSS y JavaScript

Use el panel Editor para editar CSS y JavaScript. DevTools actualiza la página para ejecutar el nuevo código. Por ejemplo, Si edita un archivo CSS agregando la regla de estilo a continuación:

.metadata.page-metadata {
    color: red;
}

Ese cambio debe surtir efecto inmediatamente.

Editar CSS en el panel del editor para cambiar el color del texto del subtítulo a rojo

Los cambios de CSS se aplican inmediatamente, no es necesario guardar. Para que los cambios de JavaScript surtan efecto, seleccione Control + S \ (Windows, Linux ) o Command + S \ (MacOS ). DevTools no vuelve a ejecutar un script, por lo que los únicos cambios de JavaScript que se aplican son los que realiza dentro de las funciones. Por ejemplo, en la siguiente ilustración, observe cómo console.log('A') no se ejecuta, pero console.log('B') sí. Si DevTools vuelve a ejecutar la secuencia de comandos completa después de realizar el cambio, el texto A se habría grabado en la consola.

Edición de JavaScript en el panel Editor

DevTools borra los cambios de CSS y JavaScript al volver a cargar la página. Vaya a configurar un área de trabajo para obtener información sobre cómo guardar los cambios en el sistema de archivos.

Crear, guardar y ejecutar fragmentos de código

Los fragmentos de código son scripts que se pueden ejecutar en cualquier página. Suponga que escribe repetidamente el siguiente código en la consola, para insertar la biblioteca de jQuery en una página, de modo que pueda ejecutar comandos de jQuery desde la consola.

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

En su lugar, puede guardar este código en un fragmento de código y ejecutarlo con un par de clics de botón, cada vez que lo necesite. DevTools guarda el fragmento de código en el sistema de archivos.

Un fragmento de código que inserta la biblioteca jQuery en una página

Para ejecutar un fragmento de código:

  • Abra el archivo con el panel fragmentos de código y elija Ejecutar \ (  el botón ejecutar ).
  • Abra el menú de comandos, elimine el > carácter, escriba ! , escriba el nombre del fragmento de códigoy, a continuación, seleccione Enter .

Navegue para Ejecutar fragmentos de código desde cualquier página para obtener más información.

Depurar JavaScript

En lugar de usar console.log() para inferir Dónde está el error de JavaScript, considere la posibilidad de usar las herramientas de depuración de Microsoft Edge DevTools en su lugar. La idea general es establecer un punto de interrupción, que es un lugar de detención intencionado en el código, y, a continuación, pasar por el tiempo de ejecución del código, de línea en línea. Mientras recorres el código, puedes mostrar y cambiar los valores de todas las propiedades y variables definidas actualmente, ejecutar JavaScript en la consolay mucho más.

Vaya a introducción a la depuración de JavaScript para conocer los conceptos básicos de la depuración en DevTools.

Depurar JavaScript

Configurar un área de trabajo

De forma predeterminada, al editar un archivo en la herramienta orígenes , esos cambios se pierden al volver a cargar la página. Las áreas de trabajo le permiten guardar los cambios que realice en DevTools en el sistema de archivos. Esencialmente, DevTools puede usarse como editor de código.

Desplácese hasta editar archivos con áreas de trabajo para comenzar.

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 los términos descritos en la Licencia internacional de Creative Commons Attribution 4.0.
La página original se encuentra aquí y está modificada por Kayce vascos \ (redactor técnico, Chrome DevTools \ & Lighthouse ).

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