Descripción general del panel Sources

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Usa el panel Fuentes para ver y editar los recursos de tu sitio web, como hojas de estilo, archivos JavaScript e imágenes.

Descripción general

El panel Fuentes te permite hacer lo siguiente:

Cómo abrir el panel de Sources

Para abrir el panel Sources, sigue estos pasos:

  1. Abre las Herramientas para desarrolladores.
  2. Abre el menú de comandos presionando lo siguiente:
    • macOS: Comando + Mayúsculas + P
    • Windows, Linux y ChromeOS: Control + Mayúsculas + P
  3. Comienza a escribir sources, selecciona Show Sources panel y presiona Intro.

Como alternativa, en la esquina superior derecha, selecciona more_vert Más opciones > Más herramientas > Fuentes.

Ver archivos

Haz clic en la pestaña Página para ver todos los recursos que cargó la página.

La pestaña Página

Cómo se organiza la pestaña Página:

  • El nivel superior, como top en la captura de pantalla anterior, representa un marco HTML. Verás el ícono top en cada página que visites. top representa el marco del documento principal.
  • El segundo nivel, como developers.google.com en la captura de pantalla anterior, representa un origen.
  • Los niveles tercero, cuarto, etcétera, representan los directorios y los recursos que se cargaron desde ese origen. Por ejemplo, en la captura de pantalla anterior, la ruta de acceso completa al recurso devsite-googler-button es developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Haz clic en un archivo de la pestaña Página para ver su contenido en la pestaña Editor. Puedes ver cualquier tipo de archivo. En el caso de las imágenes, verás una vista previa.

Visualización de un archivo en la pestaña Editor

Edita CSS y JavaScript

Haz clic en la pestaña Editor para editar CSS y JavaScript. DevTools actualiza la página para ejecutar tu código nuevo.

El editor también te ayuda a depurar. Por ejemplo, subraya y muestra sugerencias sobre errores intercaladas junto a los errores de sintaxis y otros problemas, como las instrucciones CSS @import y url() con errores, y los atributos HTML href con URLs no válidas.

Un cuadro de información sobre errores de sintaxis intercalado.

Si editas el background-color de un elemento, verás que el cambio se aplica de inmediato.

Edición de CSS en la pestaña Editor

Para que los cambios de JavaScript surtan efecto, presiona Comando + S (Mac) o Ctrl + S (Windows, Linux). DevTools no vuelve a ejecutar una secuencia de comandos, por lo que los únicos cambios de JavaScript que se aplican son los que realizas dentro de las funciones. Por ejemplo, observa cómo console.log('A') no se ejecuta, mientras que console.log('B') sí lo hace.

Edición de JavaScript en la pestaña Editor

Si Herramientas para desarrolladores volviera a ejecutar todo el script después de realizar el cambio, el texto A se habría registrado en la consola.

DevTools borra los cambios de CSS y JavaScript cuando vuelves a cargar la página. Consulta Cómo configurar un Workspace para obtener información sobre cómo guardar los cambios en tu sistema de archivos.

Cómo crear, guardar y ejecutar fragmentos

Los fragmentos son secuencias de comandos que puedes ejecutar en cualquier página. Imagina que escribes repetidamente el siguiente código en la consola para insertar la biblioteca de jQuery en una página, de modo que puedas 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, puedes guardar este código en un fragmento y ejecutarlo con un par de clics en los botones cuando lo necesites. DevTools guarda el fragmento en tu sistema de archivos. Por ejemplo, examina un fragmento que inserta la biblioteca de jQuery en una página.

Es un fragmento que inserta la biblioteca de jQuery en una página.

Para ejecutar un fragmento, haz lo siguiente:

  • Abre el archivo en la pestaña Fragmentos y haz clic en Ejecutar El botón Ejecutar en la barra de acciones de la parte inferior.
  • Abre el menú de comandos, borra el carácter >, escribe !, escribe el nombre de tu fragmento y, luego, presiona Intro.

Consulta Cómo ejecutar fragmentos de código desde cualquier página para obtener más información.

Depura JavaScript

En lugar de usar console.log() para inferir dónde falla tu código JavaScript, considera usar las herramientas de depuración de las Herramientas para desarrolladores de Chrome. La idea general es establecer un punto de interrupción, que es un lugar de detención intencional en tu código, y, luego, revisar la ejecución de tu código, línea por línea.

Se detiene en un punto de interrupción.

A medida que avanzas por el código, puedes ver y cambiar los valores de todas las propiedades y variables definidas actualmente, ejecutar JavaScript en la consola y mucho más.

Consulta Comienza a depurar JavaScript para aprender los conceptos básicos de la depuración en DevTools.

Enfócate solo en tu código

Las Herramientas para desarrolladores de Chrome te permiten enfocarte solo en el código que creas, ya que filtran el ruido que generan los frameworks y las herramientas de compilación que usas cuando compilas aplicaciones web.

Para brindarte una experiencia de depuración web moderna, las Herramientas para desarrolladores hacen lo siguiente:

Además, si los frameworks lo admiten, la Pila de llamadas en el depurador y los seguimientos de pila en la consola muestran el historial completo de las operaciones asíncronas.

Para obtener más información, consulta:

Cómo configurar un espacio de trabajo

De forma predeterminada, cuando editas un archivo en el panel Fuentes, esos cambios se pierden cuando vuelves a cargar la página. Los espacios de trabajo te permiten guardar los cambios que realizas en Herramientas para desarrolladores en tu sistema de archivos. Básicamente, esto te permite usar DevTools como editor de código.

Consulta Cómo editar archivos con espacios de trabajo para comenzar.