Cuando realizamos tareas de frontend, Google Chrome Developer Tools puede ser una gran ayuda. Podemos utilizarlo para muchas cosas: Depuración CSS, JavaScript, análisis de rendimiento…
Vamos a hablar de una característica poco conocida. Me encontré con ella cuando trataba de salvar objetos JavaScripts desde la consola y no lograba conseguirlo. Intenté salvarlos desde la opción guardar… que ofrece la consola pero el formato contenía la palabra object antes de la definición de cada objeto y necesitaba un formato JSON.
Recuperar objetos JavaScripts en nuestra aplicación puede ser útil para cosas como crear mocks en nuestros tests.
Imagina poder utilizar una nueva función de console, console.save, y que está función reciba dos argumentos: un objeto Javascript y un nombre de fichero, devolviendo en un fichero el objeto pasado en formato JSON.
Esta y otras muchas cosas pueden ser realizadas a través de snippets. Puedes encontrar muchos aquí.
Para utilizarlos o crear uno nuevo debemos:
- Abrir Chrome Developer Tools
- Pulsar en la pestaña Sources
- En el panel izquierdo tendremos diferentes pestañas: Sources, Content scripts y Snippets.
- Pulsamos la última de ellas.
- Pulsamos en la zona en blanco con el botón derecho del ratón y aparecerá una opción nuevo.
- Pulsamos la opción nuevo, vamos a crear nuestro primer Snippets. Escribimos un nombre para él.
- Escribimos el código en el panel derecho y lo guardamos (Ctrl o Cmd + S).
Después de todo esto, estamos listos para utilizarlo. Pulsaremos con el botón derecho del ratón sobre el snippet y haremos click en la opción run.
Una vez nuestro snippet está corriendo, cada sentencia de nuestro código que use la función creada (console.save) ejecutará nuestro código.
