Antes de empezar con todo este tema me gustaría aclarar que es Developer Tools (Herramientas de desarrollador).
DevTools son un conjunto de herramientas 🔧 de depuración integradas dentro de Google Chrome, estás nos proporcionan acceso profundo a lo que está pasando en un sitio web, ya sea para resolver problemas de estilo con CSS o de programación con JavaScript, entre muchas cosas más. Estoy seguro de que si eres Frontend o si has trabajado con páginas web la has usado, pues es una herramienta básica de todos los días 😁 .
Para acceder a DevTools podemos usar los siguientes atajos de teclado:
Windows & Linux:
Ctrl + Shift + I
Mac:
Cmd + Opt + I
Si vamos a la pestaña de elements (Elementos) nos vamos a encontrar la estructura y los estilos del sitio web 🖥 en el que nos encontremos, lo más probable es que se vea algo así:
La verdad es que es algo bastante sencillo, no digo que este mal, pero si que se puede mejorar. Para ello vamos a usar una extensión para Chrome llamada DevTools Author la cual no son más que un conjunto de opciones para mejorar nuestra experiencia usando esta herramienta 👍 .
Instalación
Llego el momento que nos interesaba, para ello tenemos que seguir los siguientes pasos:
-
Instalar la extensión DevTools Author desde la tienda de Chrome ⬇️ .
-
Habilitar los Experimentos en Herramientas para programadores, para ello tenemos que ir a
chrome://flags/#enable-devtools-experiments, dar click en Habilitar y reiniciamos Chrome 🔁 .
- Abrimos DevTools y vamos a: Settings > Experiments > seleccionamos la casilla de ✅ Allow custom UI Themes que nos permite tener temas personalizados.
- Cerramos y volvemos a abrir DevTools e inmediatamente vamos a ver que ya tenemos el primer cambio en la interfaz 😮 .
Personalización
Podemos personalizar DevTools Author yendo a la pestaña de Author Settings que ahora se encuentra en Developer Tools, aquí podremos elegir el tema que más nos agrade, la fuente y el tamaño de esta.
Para cambiar la familia de nuestra fuente, esta tiene que estar instalada en nuestra computadora.
Si usas demasiado DevTools como es mi caso, seguramente te viene bien esta personalización, pues le agrega un toque especial a esta herramienta con la que trabajamos frecuentemente 😏 .