86

Funcionalidades útiles de Chrome devtools no cubiertas en el curso

Eduardo
eperedo
66598

En este post te voy a mostrar algunas funcionalidades que posee chrome devtools y que no fueron cubiertas en el curso.

💻 Variables $1 al $4

En el curso vimos como podemos usar $0 para acceder al actual elemento seleccionado en Elements, pero adicionalmente existen otros shortcuts como $1, $2, $3, $4. En estas variables el devtools guardará los últimos 4 elementos que selecciones en el tab Elements.

🔍 Shortcuts para querySelector y querySelectorAll

Imagina que quieres saber cuantos botones hay en tu html, puedes usar querySelectorAll para averiguarlo:

var buttons = document.querySelectorAll('button');
console.log(buttons.length)
// muestra el total de elementos

Gracias a devtools puedes rápidamente reemplazar esta funcion por el doble dolar $$

var buttons = $$('button');
console.log(buttons.length)
// muestra el total de elementos

Tener en cuenta que $$ al ser una utilidad del devtools retornará un arreglo, mientras que querySelectorAll retorna un NodeList. Pueden comprobarlo con el siguiente código:

var buttons = $$('button');
Array.isArray(buttons) // retorna true// var buttons = document.querySelectorAll('button');
console.log(buttons) // retorna false

Para el caso de querySelector, su alias es $ y también es una función a la que debemos pasarle un selector, ambas funciones retornan un elemento del dom y no hay un cambio en el tipo de dato como en querySelectorAll

Tener en cuenta que al ser variables globales pueden ser reemplazadas fácilmente, por ejemplo si tienes jQuery en tu html el $ será jQuery y no querySelector

✏️ Copiar una variable

Vamos a suponer que tenemos una función que tras realizar una llamada http retorna un objeto que representa la información de un usuario

functionfetchUser() {
   var user = {
  	id: 1,
	name: 'Eduardo',
	age: 33,
	country: 'Peru',
	salary: 100
   };
  return user;
}

Ahora imagina que necesitas todo ese objeto para pegarlo en otra herramienta y hacer algún proceso con esa información, lo normal sería hacer un console.log al objeto, seleccionarlo y copiarlo. !Aburrido! Devtools te ahorra ese proceso con su función copy

functionfetchUser() {
   var user = {
  	id: 1,
	name: 'Eduardo',
	age: 33,
	country: 'Peru',
	salary: 100
   };
  copy(user) // ahora tienes este objeto en tu porta papelesreturn user;
}

Listo, cuando ejecutes la función podrás hacer ctrl/cmd + V y pegar el objeto en cualquier lado.

🕵️ Seleccionar elementos vía código con inspect

Buscar y seleccionar un elemento es muy simple con devtools, simplemente haces click en el icono de la flecha con el cuadradito y luego vas al html y haces click sobre el elemento que deseas, fácil. Pero hay una manera fancy de hacerlo desde código gracias al método inspect.
Este método acepta como parámetro un elemento del dom.

var button = document.querySelector('#my-button');
inspect(button);

Al ejecutarse la función inspect automaticamente el devtools cambiará al tab Elements y te mostrará el elemento que corresponda al selector my-button.

👀 Monitorear una función

¿Heredaste un código larguísimo y difícil de entender? ¿Las funciones y variables tienen nombres de letras como x, z? ¿Estás leyendo esto con voz de vendedor de teleferia? No te preocupes, con la función monitor devtools te avisará cuando alguna función de tu código ha sido llamada.

En el siguiente código veremos a una función que retorna un simple objeto

functionfetchUser() {
   var user = {
    id: 1,
    name: 'Eduardo',
    age: 33,
    country: 'Peru',
    salary: 100
   };
  return user;
}

Si deseo que devtools me avise cada vez que se ha ejecutado la función solo debo hacer lo siguiente:

monitor(fetchUser);// Ejecutamos la función
fetchUser();// Nos aparecerá el siguiente mensaje:// function fetchUser called

📷 Tomar screenshots

Quieres pasarle un screenshot a alguien de un elemento del DOM específico. Pues simple, selecciono el elemento del DOM usando el devtools, y luego presiono ctrl + shit + p se abrirá un modal con un listado de comandos de acciones del devtools, escribimos “capture node screenshot” y automaticamente se guardará la imagen del nodo seleccionado. Adicionalmente se puede generar screenshot de toda la pantalla o incluso dar la opción de una seleccionar una parte en específico.

Y así como estás funcionalidades hay muchas más. ¿Conoces alguna otra funcionalidad? ¡Compártela en los comentarios!

Escribe tu comentario
+ 2
Ordenar por:
2
9222Puntos

Que gran aporte. He podido agilizar un montón de tareas con esta información. Especialmente con “monitor”.

1
22084Puntos

Muy buena info. Gracias.

1
45604Puntos

Me ha encantado!!!.
En especial la ultima funcionalidad :3.

1
10572Puntos

Muy buen aporte. Hay varias cosas que no sabia.

1
19979Puntos

Muchas gracias por el aporte!! 🤘🏻

1
7829Puntos

Excelente tutorial, Gracias por compartirlo!

1
15752Puntos

Wow quede impresionado por la nueva forma de tomar screenshots

1
36459Puntos

Excelente aporte! Muchísimas gracias!

0
42480Puntos

Gran aporte, no conocía muchas de estas funcionalidades, sobretodo el shortcut $$ 😀

0
14953Puntos

Buena información, gracias