Esta guía te enseña a usar las Herramientas para desarrolladores de Chrome 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 son los archivos CSS, JavaScript y HTML, además de las imágenes.
En esta guía, se da por sentado que conoces los conceptos básicos del desarrollo web y las herramientas para desarrolladores de Chrome.
Abrir recursos
Cuando conozcas el nombre del recurso que deseas inspeccionar, el Menú de comandos proporciona una manera rápida de abrir el recurso.
Presiona Control + P o Comando + P (Mac). Se abrirá el diálogo Open File.
Figura 1: Diálogo Open File
Selecciona el archivo del menú desplegable, o comienza a escribir el nombre del archivo y presiona Intro una vez que se destaque el archivo correcto en el cuadro de autocompletado.
Figura 2. Escribir un nombre de archivo en el diálogo Open File
Cómo abrir recursos en el panel Network
Consulta Cómo inspeccionar los detalles de un recurso.
Figura 3. Inspecciona un recurso en el panel Network
Cómo mostrar recursos en el panel Network desde otros paneles
En la sección Explorar recursos a continuación, se muestra cómo ver los recursos de varias partes de la IU de Herramientas para desarrolladores. Si alguna vez deseas inspeccionar un recurso en el panel Network, haz clic con el botón derecho en el recurso y selecciona Reveal in Network panel.
Figura 4. La opción Mostrar en el panel de red
Explorar recursos
Explorar recursos en el panel Network
Consulta Cómo registrar la actividad de red.
Figura 5. Asignar recursos en el registro de red
Navegar por directorio
Para ver los recursos de una página organizados por directorio, haz lo siguiente:
- Haz clic en la pestaña Fuentes para abrir el panel Fuentes.
Haz clic en la pestaña Página para mostrar los recursos de la página. Se abrirá el panel Página.
Figura 6. El panel Página
A continuación, se muestra un desglose de los elementos no evidentes de la figura 6:
- top es el contexto de navegación del documento principal.
- airhorner.com representa un dominio. Todos los recursos anidados en él provienen de ese dominio.
Por ejemplo, es probable que la URL completa del archivo comlink.global.js sea
https://airhorner.com/scripts/comlink.global.js. - scripts es un directorio.
- (index) es el documento HTML principal.
- iu3 es otro contexto de navegación. Es probable que este contexto se haya creado con un elemento
<iframe>incorporado en el código HTML del documento principal. - sw.js es un contexto de ejecución de service worker.
Haz clic en un recurso para verlo en el Editor.
Figura 7: Ver un archivo en el Editor
Explorar por nombre de archivo
De forma predeterminada, el panel Página agrupa los recursos por directorio. Para inhabilitar esta agrupación y ver los recursos de cada dominio como una lista plana, haz lo siguiente:
- Abre el panel Página. Consulta Explora por directorio.
Haz clic en Más opciones
y, luego, inhabilita Agrupar por carpeta.
Figura 8: La opción Agrupar por carpeta
Los recursos se organizan por tipo de archivo. Dentro de cada tipo de archivo, los recursos están organizados alfabéticamente.
Figura 9: El panel Página después de inhabilitar Agrupar por carpeta (Group By Folder)
Explorar por tipo de archivo
Para agrupar los recursos según el tipo de archivo, haz lo siguiente:
Haz clic en la pestaña Application. Se abrirá el panel Application. De forma predeterminada, el panel Manifiesto suele abrirse primero.
Figura 10: El panel Application
Desplázate hacia abajo hasta el panel Frames.
Figura 11: El panel Frames
Expande las secciones que te interesan.
Haz clic en un recurso para verlo.
Figura 11: Visualización de un recurso en el panel Application
Cómo explorar archivos por tipo en el panel Network
Consulta Filtrar por tipo de recurso.
Figura 12: Filtrado de CSS en el registro de red