Hombre oculto

Secretos de Chrome Developer Tools

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:

  1. Abrir Chrome Developer Tools
  2. Pulsar en la pestaña Sources
  3. En el panel izquierdo tendremos diferentes pestañas: Sources, Content scripts y Snippets.
  4. Pulsamos la última de ellas.
  5. Pulsamos en la zona en blanco con el botón derecho del ratón y aparecerá una opción nuevo.
  6. Pulsamos la opción nuevo, vamos a crear nuestro primer Snippets. Escribimos un nombre para él.
  7. 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.

Capture Chrome Web Developer Tools

Una vez nuestro snippet está corriendo, cada sentencia de nuestro código que use la función creada (console.save) ejecutará nuestro código.