En cualquier navegador Google Chrome podemos pulsar la tecla F12 y automáticamente se nos abrirá un panel a través del cuál podremos analizar lo que ha ocurrido en la web que estamos viendo o incluso podremos interactuar con la misma.
Veamos algunas de las funcionalidades de las que podemos hacer uso.
Hacer una captura de la pantalla
Solemos recurrir a extensiones para hacer una captura parcial o total de la pantalla que estamos visualizando, no obstante, el navegador nos ofrece una opción para hacerlo a través de la consola.
Para ello, una vez que tengamos la consola abierta tras haber pulsado F12 abriremos el menú de comandos pulsando Control + Shift + P.
Aparecerá una ventana con “Ejecutar > Comando” donde podremos escribir directamente acciones. En nuestro caso debemos teclear screenshot y pulsar enter sobre la opción que más nos interese.
En el caso de que queramos una captura de toda la pantalla, seleccionaremos la opción de “Hacer captura de pantalla de tamaño completo”.
Simular el acceso como un buscador o con un navegador y dispositivo diferente
En ciertas ocasiones, por ejemplo cuando queremos validar un pre renderizado para un robot de búsqueda, necesitamos cambiar el user-agent con el que estamos accediendo. Desde la consola podemos hacer estos ajustes de forma sencilla. Bastará con seleccionar los tres puntos situados en el extremo superior derecha > Más herramientas y Condiciones de red.
Debajo se desplegará el menú de Condiciones de red donde debemos desactivar la opción de “Usar predeterminado del navegador”. Ahora tendremos dos opciones, podemos desplegar el combo y seleccionar uno de los user-agent que viene por defecto o podemos usar la caja de abajo para introducir el que nosotros queramos.
Obtener listado de variables y objetos creados
Si queremos conocer qué variables están disponibles tanto en el entorno del navegador como los asociados a la página o aplicación web, podemos usar los siguientes comandos:
keys(window)para ver las variablesdir(window)para ver los objetos
Otra posibilidad sería hacer uso directamente del objeto window. y navegar por las diferentes opciones que nos ofrece. Desde aquí podremos acceder a todas las variables públicas, tanto del navegador como de la página.
Otra opción sería invocar directamente el objeto this para recibir un listado completo de todas las opciones que tenemos disponibles.
Limpiar la consola
Cuando hay un exceso de mensajes, podemos limpiar la consola de nuestro navegador simplemente haciendo clic con el botón derecho y seleccionando clear console.
También lo podemos hacer a través de código tecleando clear().
Si en opciones tenemos habilitada la opción de Preserve log, el comando
clear()no funcionará por lo que tendremos que hacerlo a través del menú contextual.
Usar los logs
A la hora de desarrollar podemos enviar avisos a la consola directamente desde nuestra aplicación. Para ello usaremos los siguientes comandos:
console.log("texto"): para un mensaje normalconsole.warn("texto"): para un mensaje de avisoconsole.error("texto"): para un mensaje de error
Esto nos va a permitir identificar de forma rápida lo que está ocurriendo en la página.
Hacer debug
Si hacemos uso de debugger podremos probar directamente el código javascript dentro de la consola. También podemos ir directamente a la pestaña Sources y analizar cualquier fichero Javascript para depurar su ejecución.
Google dispone de un tutorial básico pero completo.
Analizar Google Analytics
Google Analytics tiene una extensión para Chrome llamada Google Analytics Debugger a través de la cuál podremos analizar desde la consola de DevTools todo lo que se envía a Google Analytics.
Es ideal para identificar problemas y validar implementaciones de analítica web bajo esta plataforma.
También podemos interactuar directamente con el objeto de Google Analytics para, por ejemplo, obtener el ID de la cuenta:
ga.getAll()[0].get('trackingId')
En la documentación oficial de Google Analytics nos explican con mayor detalle cómo interactuar con este objeto.
Trabajar con la capa de datos
También podemos interactuar de forma directa con la capa de datos. Por ejemplo, el siguiente código lanzará un evento directamente en la página. Si tenemos un listener asociado al mismo podría ver en tiempo real si éste funciona.
window.dataLayer = window.dataLayer || [];
dataLayer.push ({
'event': 'erg_contacto'
})
Validar páginas AMP
También podemos usar la consola de Chrome para validar páginas AMP. Para ello bastará con que a la URL le añadamos #development=1 y recarguemos de nuevo la página.
Por defecto, el mensaje que recibiremos será:
Powered by AMP ⚡ HTML – Version 1911062056110 https://emirodgar.com/consola-devtools-chrome
Una vez incluido la variable development=1 en la URL recibiremos un valor adicional informándonos de si la versión AMP es válida o si por el contrario ha habido algún error.
AMP validation successful.