Los secretos de las herramientas de desarrollo del navegador

<p>1. En Console hay muchas más funciones además de `log()`<br /> - Opciones de filtrado<br /> - {} : mostrar juntos el valor y el nombre de la variable<br /> - `warn()`/`info()`/`error()` : niveles de log<br /> - `assert()` : mostrar solo cuando se cumple cierta condición<br /> - `trace()` : quién lo llamó <br /> - `group()` : agrupar mensajes para poder expandirlos/contraerlos <br /> - `table()` : mostrar información en formato de tabla <br /> - `$()` = `document.querySelector()`, `$$()` = `document.querySelectorAll()`<br /> &nbsp;&nbsp;`$$('a').map(a =&gt; {`<br /> &nbsp;&nbsp;&nbsp;`return {url: a.href, text: a.innerText}`<br /> &nbsp;&nbsp;`})`<br /> <br /> 2. Dejar logs sin acceder al código fuente<br /> - Live Expressions : verificar valores de variables que cambian en tiempo real<br /> - 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<br /> <br /> 3. Dejar logs fuera del navegador <br /> - VS Code Debugger<br /> <br /> 4. Inyectar código en cualquier sitio (navegadores basados en Chromium: Edge, Chrome, Brave..)<br /> - Snippets : ejecutar scripts para el sitio web actual <br /> - Overrides : guardar una copia de un script remoto, modificarla y luego sobrescribirla cuando carga la página <br /> <br /> 5. Se puede inspeccionar y depurar en muchos más lugares (navegadores basados en Chromium)<br /> - Toda la familia Electron es compatible : GitHub Desktop, VS Code, e incluso las propias Developer Tools del navegador se pueden depurar con Developer Tools<br /> - MS Edge Tools for VS Code <br /> <br /> 6. Secretos incómodos<br /> - 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 <br /> - Las herramientas de desarrollo son cada vez más complejas y terminan abrumando con tantas funciones. ¿Habrá una forma de mejorarlas? <br /> &nbsp;→ Edge quiere introducir Focus Mode. En vez de mostrar todas las funciones, mostrar solo las herramientas necesarias según el caso de uso <br /> &nbsp;→ También están trabajando en Informational Overlays. La idea es ofrecer ayuda visible directamente dentro de las herramientas de desarrollo <br /> - Sigue habiendo una desconexión entre escribir código y depurar el resultado final <br /> &nbsp;→ ¿Cómo hacer que los cambios hechos en las herramientas de desarrollo se reflejen en el código?<br /> &nbsp;→ 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<br /> &nbsp;→ 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<br /> <br /> 7. Tú eres la audiencia y también el cliente de las herramientas de desarrollo <br /> &nbsp;→ Dar retroalimentación con opciones como Report a Bug / Request a Feature </p>

[galadbran]

<p>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. </p>

[laeyoung]

<p>Artículo relacionado con `console.log()`<br /> - https://javascript.plainenglish.io/stop-using-console-log-in-javascrip…;

[kleinstein]

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