Descripción general del panel Sources

Usa el panel Sources de Chrome DevTools para hacer lo siguiente:

Ver archivos

Usa el panel Network para ver todos los recursos que tiene cargados la página.

Panel Network
Figura 1. Panel Network

Organización del panel Network:

  • El nivel superior, como top en la Figura 1, 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 Figura 1, representa un origen.
  • El tercer nivel, el cuarto nivel, etc., representan directorios y recursos que se cargaron desde ese origen. Por ejemplo, en la Figura 1, la ruta de acceso completa al recurso devsite-googler-button es developers.google.com/_static/f6e16de9fa/css/devsite-googler-button

Haz clic en un archivo en el panel Network 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.

Visualización de un archivo en el panel Editor
Figura 2. Visualización del contenido de jquery-bundle.js en el panel Editor .

Cómo editar CSS y JavaScript

Usa el panel Editor para editar CSS y JavaScript. DevTools actualiza la página para ejecutar tu nuevo código. Por ejemplo, si editas el background-color de un elemento, ese cambio se realiza de inmediato.

Edición de CSS en el panel Editor
Figura 3. Edición de CSS en el panel Editor para cambiar el color de fondo de un elemento de azul a rojo

Los cambios de CSS se realizan de inmediato y no es necesario guardarlos. Para que se apliquen los cambios de JavaScript, presiona Command+S (Mac) o Ctrl+S (Windows, Linux). DevTools no vuelve a ejecutar una secuencia de comandos, de modo que los únicos cambios de JavaScript que se aplican son los que haces dentro de funciones. Por ejemplo, en la Figura 4, observa cómo console.log('A') no se ejecuta, mientras que console.log('B') sí lo hace. Si DevTools volviera a ejecutar toda la secuencia de comandos después de hacer el cambio, el texto A se registraría en la consola.

Edición de JavaScript en el panel Editor
Figura 5. Edición de JavaScript en el panel Editor

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

Cómo crear, guardar y ejecutar fragmentos

Los fragmentos son secuencias de comandos que se pueden ejecutar en cualquier página. Imagina que escribes el siguiente código repetidamente 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 cambio, puedes guardar este código en un fragmento y ejecutarlo con un par de clics cada vez que necesites. DevTools guarda el fragmento en tu sistema de archivos.

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

Para ejecutar un fragmento, haz lo siguiente:

  • Abre el archivo mediante el panel Snippets y haz clic en Run botón Run.
  • Abre el menú Command, borra el carácter >, escribe !, escribe el nombre de tu fragmento y 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 en JavaScript, considera usar las herramientas de depuración de Chrome DevTools. La idea general es definir un punto de interrupción, que es un lugar donde se detiene intencionalmente el código, y después avanzar paso a paso en la ejecución del código, una línea a la vez. Cuando avanzas paso a paso por el código, puedes ver y cambiar los valores de todas las propiedades y variables actualmente definidas, ejecutar JavaScript en la consola y mucho más.

Consulta cómo comenzar con la depuración de JavaScript para obtener información acerca de los conceptos básicos de depuración en DevTools.

Depuración de JavaScript
Figura 7. Depuración de JavaScript

Cómo configurar un lugar de trabajo

De manera predeterminada, cuando editas un archivo en el panel Sources, 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 haces en DevTools. Esencialmente, esto te permite usar DevTools como editor de código.

Para comenzar, consulta cómo configurar la persistencia con los lugares de trabajo de DevTools.

Comentarios

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.