Usa el panel Sources de Chrome DevTools para hacer lo siguiente:
- Ver archivos.
- Editar CSS y JavaScript
- Crea y guarda fragmentos de JavaScript que puedes ejecutar en cualquier página. Los fragmentos son de forma similar a losbookmarklets.
- Depura JavaScript.
- Configura un lugar de trabajo para que los cambios que hagas en las Herramientas para desarrolladores se guarden en el código de tu archivo. en un sistema de archivos.
Ver archivos
Usa el panel Página para ver todos los recursos que cargó la página.
Cómo está organizado el panel Página:
- El nivel superior, como
top
en la captura de pantalla anterior, representa un marco HTML. Encontrarástop
en cada página que visitas.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 los 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
esdevelopers.google.com/_static/19aa27122b/css/devsite-googler-button
.
Haz clic en un archivo en el panel Page (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.
Edita CSS y JavaScript
Usa el panel Editor para editar CSS y JavaScript. Las Herramientas para desarrolladores actualizan 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 con errores, y los atributos HTML href
con URLs no válidas.
Si editas el background-color
de un elemento, verás que se aplica el cambio.
de inmediato.
Para que se apliquen los cambios de JavaScript, presiona Comando + S (Mac) o Control + S (Windows y Linux). Las Herramientas para desarrolladores no vuelven a ejecutar una secuencia de comandos, de modo que los únicos cambios de JavaScript que se aplican son los que haces dentro de las funciones. Por ejemplo, observa que console.log('A')
no se ejecuta, mientras que console.log('B')
sí.
Si las Herramientas para desarrolladores volvieran a ejecutar la secuencia de comandos completa después de hacer el cambio, se registraría el texto A
en la
Consola.
Herramientas para desarrolladores borra los cambios de CSS y JavaScript cuando vuelves a cargar la página. Consulta Configura un Workspace para aprender a 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 repetidamente el siguiente código en la consola, para insertar la biblioteca de jQuery en una página y Puedes 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 cualquier momento. lo necesitas. Las Herramientas para desarrolladores guardan el fragmento en tu sistema de archivos. Por ejemplo, examina un 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 Ejecutar
en la barra de acciones ubicada en la parte inferior.
- Abre el menú de comandos, borra el carácter
>
, escribe!
y 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 falla tu JavaScript, considera usar el
En su lugar, 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
se detiene intencionalmente en tu código y, luego, recorres la ejecución de tu código, una línea a la
tiempo.
A medida que recorres el código, puedes ver y cambiar los valores de todos los valores definidos propiedades y variables, ejecutar JavaScript en la consola 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 concentrarte solo en el código que creas, ya que filtra el ruido generado por los frameworks y las herramientas de compilación que usas cuando compilas aplicaciones web.
Para brindarte la experiencia de depuración web moderna, Herramientas para desarrolladores hace lo siguiente:
- Separa el código implementado y creado. Para ayudarte a encontrar el código más rápido, el panel Sources separa el código que creaste del código empaquetado y reducido.
- Ignora el código de terceros conocido:
- El panel Fuentes oculta esas fuentes del árbol de archivos del panel Página.
- La consola oculta esos marcos de los seguimientos de pila.
- El menú Abrir archivo oculta esos archivos de los resultados de la búsqueda.
Además, si son compatibles con los frameworks, 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:
- Depuración web moderna en las Herramientas para desarrolladores de Chrome
- Caso de éxito: Mejor depuración de Angular con Herramientas para desarrolladores
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. la página. Los lugares de trabajo te permiten guardar en tu archivo los cambios que realizas en Herramientas para desarrolladores en un sistema de archivos. Básicamente, esto te permite usar Herramientas para desarrolladores como editor de código.
Consulta Edita archivos con espacios de trabajo para comenzar.