Aqui hay una lista de cosas que puedes hacer con las herramientas que Google Chrome provee:
Arrastrar elementos de HTML en el panel de elementos
Se puede arrastrar cualquier elemento y cambiar su posición actual desde el panel de elementos
Puedes seleccionar un nodo en el panel de elementos y escribir $0 en la consola para hacer referencia a él
Usar el valor de la última operación en la consola
Puedes usar $_ para referenciar el valor retornado de la operación anterior ejecutado en la consola
Encontrar donde está definida una propiedad en CSS
Si presionamos ctrl + click a una propiedad CSS en el panel de elementos, las DevTools nos llevaran al lugar donde están definidas en el código fuente
Hacer screenshot a un elemento
Seleccionar un elemento y presionar ctrl + shift + p para abrir el menú de comandos y seleccionar Capture node screenshot
Encontrar elementos usando selectores de CSS
Si presionamos ctrl + F en el panel de elementos, se abre la barra de búsqueda.
Podemos buscar elementos por cadenas de texto y también podemos buscar elementos usando selectores CSS
Estas son algunas de las geniales funcionalidades de las DevTools, comparto un link donde podemos ver una lista más extensa y detallada de ello: Lista de cosas que puedes hacer desde tus DevTools y que tal vez no sabías
