Descripción general del panel Sources

Kayce Basques
Kayce Basques
X GitHub Error
Sofia Emelianova
Sofia Emelianova
GitHub

Usa el panel Sources de las Herramientas para desarrolladores de Chrome para hacer lo siguiente:

Ver archivos

Usa el panel Page para ver todos los recursos que cargó la página.

El panel de la página

Cómo se organiza el panel Página:

  • El nivel superior, como top en la captura de pantalla anterior, representa un marco HTML. Encontrarás 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.
  • El tercer nivel, el cuarto nivel, etc., representan directorios y 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 en el panel Página para ver su contenido en el panel Editor. Puedes ver cualquier tipo de archivo. En el caso de las imágenes, puedes obtener una vista previa.

Cómo ver un archivo en el panel Editor

Editar CSS y JavaScript

Usa el panel Editor para editar CSS y JavaScript. Herramientas para desarrolladores actualiza la página para ejecutar el código nuevo.

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

Información sobre un error de sintaxis intercalada.

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

Edición de CSS en el panel Editor

Para que se apliquen los cambios de JavaScript, presiona Comando + S (Mac) o Control + S (Windows y Linux). Herramientas para desarrolladores 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 funciones. Por ejemplo, observa que console.log('A') no se ejecuta, mientras que console.log('B') sí.

Edición de JavaScript en el panel Editor

Si las Herramientas para desarrolladores volvieran a ejecutar toda la secuencia de comandos después de realizar el cambio, el texto A se habría registrado en la consola.

Herramientas para desarrolladores borra los cambios de CSS y JavaScript cuando vuelves a cargar la página. Consulta Configura un lugar de trabajo 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 y poder 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 el botón, cada vez que lo necesites. Herramientas para desarrolladores guarda el fragmento en tu sistema de archivos. Por ejemplo, examina un fragmento que inserta la biblioteca de jQuery en una página.

Fragmento que inserta la biblioteca de jQuery en una página.

Para ejecutar un fragmento, haz lo siguiente:

  • Abre el archivo en el panel Fragmentos y haz clic en Run El botón Ejecutar en la barra de acciones que se encuentra en la parte inferior.
  • Abre el Menú de comandos, borra el carácter >, escribe !, escribe el nombre del fragmento y, luego, presiona Intro.

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

Cómo depurar JavaScript

En lugar de usar console.log() para inferir dónde hay algún problema de 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 para detener intencionalmente tu código, y, luego, avanzar por la ejecución del código, una línea a la vez.

Pausando en un punto de interrupción.

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

Consulta Cómo comenzar a depurar JavaScript para conocer los conceptos básicos de la depuración en Herramientas para desarrolladores.

Enfócate solo en tu código

Las Herramientas para desarrolladores de Chrome te permiten enfocarte solo en el código que creaste. Para ello, filtra el ruido que generan los frameworks y compila las herramientas que usas cuando compilas aplicaciones web.

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

Además, si son compatibles con los frameworks, la pila de llamadas en el depurador y los seguimientos de pila en Console muestran el historial completo de las operaciones asíncronas.

Para obtener más información, consulta:

Configura un lugar 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 lugares de trabajo te permiten guardar en tu sistema de archivos los cambios que realizas en las Herramientas para desarrolladores. En esencia, esto te permite usar Herramientas para desarrolladores como editor de código.

Para comenzar, consulta Edita archivos con espacios de trabajo.