En esta guía, aprenderás 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. Los ejemplos de recursos incluyen archivos CSS, JavaScript y HTML, además de imágenes.
En esta guía, se asume que estás familiarizado con los conceptos básicos del desarrollo web y las Herramientas para desarrolladores de Chrome.
Abrir recursos
Cuando sabes el nombre del recurso que quieres inspeccionar, el menú de comandos proporciona una forma rápida de abrir el recurso.
Presiona Control + P o Command + 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 el archivo correcto se destaque en el cuadro de autocompletar.
Figura 2. Escribir un nombre de archivo en el diálogo Open File
Abrir recursos en el panel Red
Consulta Cómo inspeccionar los detalles de un recurso.
Figura 3. Inspecciona un recurso en el panel Network
Mostrar recursos de otros paneles en el panel Red
En la sección Explora recursos a continuación, se muestra cómo ver 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 de red
Consulta Cómo registrar la actividad de la red.
Figura 5. Recursos de la página en el registro de red
Explora por directorio
Sigue estos pasos para ver los recursos de una página organizados por directorio:
- 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 en 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.
- (índice) es el documento HTML principal.
- iu3 es otro contexto de navegación. Es probable que este contexto se haya creado por 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: Cómo ver un archivo en el Editor
Buscar por nombre de archivo
De forma predeterminada, el panel Página agrupa 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
Explora por tipo de archivo
Para agrupar recursos en función de su tipo de archivo, haz lo siguiente:
Haz clic en la pestaña Application. Se abrirá el panel Aplicación. Según la configuración predeterminada, el panel Manifest, por lo general, se abre primero.
Figura 10: El panel Aplicación
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: Visualiza un recurso en el panel Aplicación
Explora archivos por tipo en el panel Red
Consulta Filtrar por tipo de recurso.
Figura 12: Filtrado de CSS en el registro de red