Los secretos de las herramientas de desarrollo del navegador

1. En Console hay muchas más funciones además de log()

• Opciones de filtrado

• {} : mostrar juntos el valor y el nombre de la variable

• warn()/info()/error() : niveles de log

• assert() : mostrar solo cuando se cumple cierta condición

• trace() : quién lo llamó

• group() : agrupar mensajes para poder expandirlos/contraerlos

• table() : mostrar información en formato de tabla

• $() = document.querySelector(), $$() = document.querySelectorAll()

  $$('a').map(a => {

   return {url: a.href, text: a.innerText}

  })

2. Dejar logs sin acceder al código fuente

• Live Expressions : verificar valores de variables que cambian en tiempo real

• logpoints : una forma especial de breakpoint que imprime un log cuando se ejecuta esa línea. Técnicamente, es como poder agregar console.log en cualquier parte de una página web

3. Dejar logs fuera del navegador

• VS Code Debugger

4. Inyectar código en cualquier sitio (navegadores basados en Chromium: Edge, Chrome, Brave..)

• Snippets : ejecutar scripts para el sitio web actual

• Overrides : guardar una copia de un script remoto, modificarla y luego sobrescribirla cuando carga la página

5. Se puede inspeccionar y depurar en muchos más lugares (navegadores basados en Chromium)

• Toda la familia Electron es compatible : GitHub Desktop, VS Code, e incluso las propias Developer Tools del navegador se pueden depurar con Developer Tools

• MS Edge Tools for VS Code

6. Secretos incómodos

• La gente solo usa una parte de sus herramientas de desarrollo. Probablemente porque falta documentación explicativa; se invirtió mucho tiempo en crear documentación, pero no parece ser la solución

• Las herramientas de desarrollo son cada vez más complejas y terminan abrumando con tantas funciones. ¿Habrá una forma de mejorarlas?

 → Edge quiere introducir Focus Mode. En vez de mostrar todas las funciones, mostrar solo las herramientas necesarias según el caso de uso

 → También están trabajando en Informational Overlays. La idea es ofrecer ayuda visible directamente dentro de las herramientas de desarrollo

• Sigue habiendo una desconexión entre escribir código y depurar el resultado final

 → ¿Cómo hacer que los cambios hechos en las herramientas de desarrollo se reflejen en el código?

 → Una opción es reemplazar las herramientas de desarrollo por VSCode y hacer que, al usar la herramienta, se modifiquen directamente los archivos del disco duro

 → La otra es ofrecerlo como parte de una extensión de VSCode, para poder elegir que los cambios hechos con las herramientas de desarrollo también modifiquen los archivos en disco

7. Tú eres la audiencia y también el cliente de las herramientas de desarrollo

 → Dar retroalimentación con opciones como Report a Bug / Request a Feature

[galadbran]

Desde una perspectiva un poco distinta, usuarios y desarrolladores tienen las mismas herramientas. Por eso, parece que las webapps tienen que prestar mucha atención a cómo lidiar con usuarios malintencionados que recurren a atajos.

[laeyoung]

Artículo relacionado con console.log()

• https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…

[kleinstein]

Parece que, incluso si hay buenas funciones, el hecho de que la documentación tenga buenos ejemplos o no termina siendo un factor decisivo.