Visualización de los archivos de recursos que componen una página web

  • Artículo

Puede ver los recursos que componen una página web desde varias herramientas (o paneles) en Microsoft Edge DevTools, entre los que se incluyen:

  • Herramienta de red
  • Herramienta Orígenes
  • Herramienta de aplicación

Los recursos son los archivos que componen una página web. Algunos ejemplos de recursos son:

  • Archivos CSS
  • Archivos JavaScript
  • Archivos HTML
  • Archivos de imagen

Consulta también:

Abrir archivos de recursos desde el menú Comandos

Cuando conoce el nombre del archivo de recursos de una página web que desea inspeccionar, el menú Comando de DevTools proporciona una manera rápida de buscar y abrir ese recurso.

  1. En una nueva ventana o pestaña, vaya a una página web, como la demostración de características de pruebas de accesibilidad. (Los archivos de origen de esa página web están en MicrosoftEdge/Demos > devtools-a11y-testing).

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS).

  3. Cuando DevTools tenga el foco, presione Ctrl+P (Windows, Linux) o Comando+P (macOS). O bien, haga clic en el botón Personalizar y controlar DevTools (icono Personalizar) en DevTools y, a continuación, seleccione Abrir archivo. Se abre el menú Comando, que muestra la lista Abrir archivo :

    Menú Comando, que muestra la lista Abrir archivo

  4. Si hay un símbolo del sistema mayor que (>), presione Retroceso para llegar al símbolo del sistema Abrir archivo .

  5. Empiece a escribir el nombre de archivo y, a continuación, presione Entrar cuando el archivo correcto esté resaltado en el cuadro autocompletar o seleccione el archivo en la lista desplegable:

    Escribir parte de un nombre de archivo en la lista Abrir archivo del menú Comando

Examinar archivos de recursos en la herramienta Red

En la herramienta Red , puede inspeccionar los archivos de recursos que componen la página web actual, como .html, .css, .jsy archivos de imagen. Para obtener información sobre cómo obtener los detalles de un recurso específico, consulte Inspeccionar los detalles del recurso en Inspeccionar actividad de red.

  1. En una nueva ventana o pestaña, vaya a una página web, como inspeccionar la demostración de actividad de red. (Los archivos de origen de esa página web están en MicrosoftEdge/Demos > network-tutorial).

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, seleccione la pestaña Red. Si esa pestaña no está visible, haga clic en el botón Más herramientas (el icono

  4. Asegúrese de que el botón Registrar registro de red en la esquina superior izquierda está seleccionado (rojo).

  5. Actualiza la página. De forma predeterminada, se selecciona el botón Todos los filtros, por lo que todos los archivos de recursos de la página web aparecen en la herramienta Red , una fila por archivo de recursos:

    Archivos de recursos de página web enumerados en el registro de red, un archivo de recursos por fila

  6. Seleccione un recurso para verlo. Por ejemplo, seleccione la ruta de network-tutorial acceso para mostrar index.html:

    Inspección de un recurso en la herramienta Red

Para obtener más información sobre cómo mostrar la actividad de red generada por los recursos de página, consulte Actividad de red de registro en el artículo Inspeccionar actividad de red.

Examinar archivos de recursos por tipo de archivo filtrando en la herramienta Red

En la herramienta Red , al ver la lista de archivos de recursos que componen la página web actual, puede filtrar el tipo de recursos que se van a enumerar, como mostrar solo .css archivos o .js .

Por ejemplo, para mostrar solo archivos CSS:

  1. En una nueva ventana o pestaña, vaya a una página web, como inspeccionar la demostración de actividad de red. (Los archivos de origen de esa página web están en MicrosoftEdge/Demos > network-tutorial).

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, seleccione la pestaña Red. Si esa pestaña no está visible, haga clic en el botón Más herramientas (el icono

  4. Actualiza la página. De forma predeterminada, se selecciona el botón Todos los filtros, por lo que todos los archivos de recursos de la página web aparecen en la herramienta Red .

  5. Haga clic en CSS para filtrar y mostrar solo los archivos CSS. Solo aparece el main.css archivo:

    Filtrado para enumerar solo los archivos de recursos CSS en el registro de red

Para obtener más información, vea Filtrar por tipo de recurso en Inspeccionar actividad de red.

Mostrar archivos de recursos en la herramienta Red desde otras herramientas

En varias herramientas que enumeran los archivos de recursos de la página web, para inspeccionar un archivo de recursos en la herramienta Red , haga clic con el botón derecho en el archivo de recursos y, a continuación, seleccione Mostrar en el panel Red. Es posible que tenga que actualizar primero la página web mientras la herramienta Red está abierta.

Por ejemplo, para ir de la lista de recursos de la pestaña Página de la herramienta Orígenes a la herramienta Red :

  1. En una nueva ventana o pestaña, vaya a una página web, como inspeccionar la demostración de actividad de red. (Los archivos de origen de esa página web están en MicrosoftEdge/Demos > network-tutorial).

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, seleccione la pestaña Red . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

  4. Presione Ctrl+R para actualizar la página. Los archivos de recursos recibidos que componen la página web ahora se agregan como filas en la pestaña Red . La fila network-tutorial/ folder representa la página HTML, en este caso, index.html.

  5. En DevTools, en la barra de actividad, haga clic en la pestaña Orígenes .

  6. En la pestaña Página de la parte superior izquierda, haga clic con el botón derecho en un archivo de recursos y, a continuación, seleccione Mostrar en el panel Red:

    El elemento de menú

    Si no aparece el elemento de menú Mostrar en el panel Red , vaya a la herramienta Red , asegúrese de que el botón Registrar registro de red de la esquina superior izquierda está seleccionado (rojo) y, a continuación, actualice la página.

Examinar archivos de recursos por carpeta en la pestaña Página de la herramienta Orígenes

Puede usar la herramienta Orígenes para ver los archivos de recursos de la página web organizados por directorio, como se indica a continuación:

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de actividad, seleccione la pestaña Orígenes . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

  3. En el panel Navegador de la esquina superior izquierda, seleccione la pestaña Página .

  4. De forma predeterminada, los archivos de recursos se agrupan por carpeta. Si todos los recursos aparecen alfabéticamente por nombre de archivo, haga clic en el botón Más opciones (icono Más opciones) situado a la derecha de la pestaña Página y, a continuación, seleccione Agrupar por carpeta:

    Archivos de recursos de la página web agrupados por carpeta en la pestaña Página de la herramienta Orígenes

    La pestaña Página contiene varios tipos de nodo, entre los que se incluyen:

    Elemento de página Descripción
    top Contexto de exploración del documento principal, como una pestaña del explorador, una ventana del explorador o un marco. Vea Examinar contexto o <iframe>: el elemento Inline Frame.
    microsoftedge.github.io Dominio. Todos los recursos anidados en él proceden de ese dominio. Por ejemplo, la dirección URL completa del buttons.js archivo es https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js.
    Demos/devtools-a11y-testing, css, photos Directorios.
    devtools-a11y-testing/ El documento HTML principal.
    buttons.js Un script para controlar las pulsaciones de botón en la página.

  5. Seleccione un archivo de recursos para verlo en el Editor de la herramienta Orígenes:

    Visualización de un archivo de recursos en la Editor de la herramienta Orígenes

Examinar archivos de recursos ordenados por nombre de archivo en la pestaña Página de la herramienta Orígenes

De forma predeterminada, la pestaña Página de la herramienta Orígenes agrupa los archivos de recursos por carpeta. Para mostrar en su lugar todos los archivos de recursos de cada dominio agrupados en una sola lista alfabética:

  1. En una nueva ventana o pestaña, vaya a una página web, como la demostración de características de pruebas de accesibilidad. (Los archivos de origen de esa página web están en MicrosoftEdge/Demos > devtools-a11y-testing).

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, seleccione la pestaña Orígenes . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

  4. En el panel Navegador de la esquina superior izquierda, seleccione la pestaña Página .

  5. Haga clic en Más opciones (icono Más opciones) y desactive la opción Agrupar por carpeta :

    Opción Agrupar por carpeta en la pestaña Página de la herramienta Orígenes

    Todos los archivos de recursos de cada dominio (como Top) se agrupan en una única lista alfabética:

    La pestaña Página de la herramienta Orígenes cuando se borra la opción

Examinar archivos de recursos por tipo de archivo en el árbol Marcos de la herramienta Aplicación

Una manera de ver los recursos de la página web agrupados por tipo de archivo es mediante el árbol Marcos de la herramienta Aplicación :

  1. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  2. En DevTools, en la barra de actividad, seleccione la pestaña Aplicación . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

    Se abre la herramienta Aplicación y, de forma predeterminada, muestra primero el panel Manifiesto :

    La herramienta Application

  3. Desplácese hacia abajo hasta el panel Marcos y expanda la carpeta que le interesa:

    Árbol Marcos de la herramienta Aplicación

  4. Seleccione un recurso para verlo en la herramienta Aplicación :

    Visualización de un recurso en la herramienta Application

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

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.