Ver recursos de página con Microsoft Edge DevTools

Esta guía le enseña a usar Microsoft Edge DevTools para ver los recursos de una página web. Los recursos son los archivos que necesita una página para mostrarse correctamente. Algunos ejemplos de recursos incluyen archivos CSS, JavaScript y HTML, así como imágenes.

En esta guía se supone que está familiarizado con los conceptos básicos del desarrollo web y Microsoft Edge DevTools.

Recursos abiertos

Cuando conoce el nombre del recurso que desea inspeccionar, el menú comando proporciona una forma rápida de abrir el recurso.

  1. Seleccione Control + P (Windows, Linux) o Command + P (macOS). Se abre el cuadro de diálogo Abrir archivo.

    Cuadro de diálogo Abrir archivo

  2. Elija el archivo en el desplegable o empiece a escribir el nombre de archivo y seleccione una vez que el archivo correcto esté Enter resaltado en el cuadro autocompletar.

    Escriba un nombre de archivo en el cuadro de diálogo Abrir archivo

Abrir recursos en la herramienta Red

Vaya a Inspeccionar los detalles de un recurso.

Inspeccionar un recurso en la herramienta Red

Mostrar recursos de la herramienta Red desde otros paneles

La sección Examinar recursos siguiente muestra cómo ver recursos de varias partes de la interfaz de usuario de DevTools. Si alguna vez desea inspeccionar **** un recurso en la herramienta Red, mantenga el mouse en el recurso, abra el menú contextual (clic con el botón secundario) y elija Mostrar en el panel Red.

Mostrar en el panel Red

Examinar recursos

Examinar recursos en el panel Red

Vaya a Registrar actividad de red.

Recursos de página en el registro de red

Examinar por directorio

Para ver los recursos de una página organizada por directorio:

  1. Elija la herramienta Orígenes para abrir el panel Orígenes.

  2. Elija el panel Página para mostrar los recursos de la página. Se abre el panel Página.

    El panel Página

    Este es un desglose de los elementos no obvios de la figura anterior.

    Elemento de página Descripción
    top El contexto de exploración del documento principal.
    airhorner.com El dominio. Todos los recursos anidados en él proceden de ese dominio. Por ejemplo, la dirección URL completa del comlink.global.j archivo es probablemente https://airhorner.com/scripts/comlink.global.js .
    scripts Un directorio.
    (index) El documento HTML principal.
    sw.js Contexto de tiempo de ejecución de un trabajador de servicio.
  3. Elija un recurso para verlo en el Editor.

    Ver un archivo en el Editor

Examinar por nombre de archivo

De forma predeterminada, el panel Página agrupa los recursos por directorio. Para deshabilitar esta agrupación y ver los recursos de cada dominio como una lista plana:

  1. Abra el panel Página. Vaya a Examinar por directorio.

  2. Elija Más opciones y ... deshabilite Grupo por carpeta.

    La opción Agrupar por carpeta

    Los recursos se organizan por tipo de archivo. Dentro de cada tipo de archivo, los recursos se organizan alfabéticamente.

    El panel Página después de deshabilitar Grupo por carpeta

Examinar por tipo de archivo

Para agrupar recursos en función de su tipo de archivo:

  1. Elija la pestaña Aplicación. Se abre la herramienta Aplicación. De forma predeterminada, el panel Manifiesto normalmente se abre primero.

    La herramienta Aplicación

  2. Desplácese hacia abajo hasta el panel Marcos.

    Panel Marcos

  3. Expanda las secciones en las que está interesado.

  4. Elija un recurso para verlo.

    Ver un recurso en el panel Aplicación

Examinar archivos por tipo en el panel Red

Vaya a Filtrar por tipo de recurso.

Filtrar para CSS en el registro de red

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á redactada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

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