¿Cómo personalizar la consola del navegador?
utilidadesAutor: Reynaldo Navedo
¿Alguna vez te has preguntado si es posible personalizar a gusto la consola del navegador de la misma manera en que hacemos con el editor de texto? Nosotros los desarrolladores pasamos tiempo utilizando la consola cuando programamos utilizando JavaScript o alguna librería o framework basado en este maravilloso ecosistema. En esta publicación te demuestro como hacerlo.
Vamos a seguir los siguientes pasos:
- Abre la consola del navegador. Presiona CTRL + F12 en PC u OPTION + CMD + I en Mac.
- Abre la configuración del navegador presionando el botón en forma de engrane que se encuentra en la parte superior derecha.
- Selecciona el tema oscuro (esto es mandatorio, el tema claro no funciona con los "plugins")
- También iremos a la pestaña que dice experiments y habilitaremos la caja que dice Allow extensions to load custom stylesheets o en español algo así como Permitir extensiones cargar hojas de estilo personalizadas.
- Ahora vamos a la página de tienda de extensiones de Chrome en el siguiente URL https://chrome.google.com/webstore/category/extensions
- En la barra de buscar ingresa el término dev tools theme. Existen una variedad de selecciones, para esta demostración estaremos utilizando Material DevTool Theme Collection.
- Selecciona el tema y añádelo a la lista de extensiones de Chrome.
- Ahora solo tenemos que seguir unos pasos adicionales para poder implementar la extensión.
- En la barra del navegador escribe la siguiente dirección local de Chrome chrome://flags y habilita Developer Tools experiments. Esto nos permitirá utilizar la extensión.
- Cierra y abre el navegador.
Ahora podemos utilizar la extensión seleccionando los temas predeterminados.
Tip: puedes ver todas tus extensiones la siguiente dirección local de Chrome chrome://extensions solo asegúrate que si tienes más de una extensión instalada para personalizar la consola, deshabilites las que no estés usando al momento, esto evitará posibles conflictos.
Para una información más gráfica, puedes ver el siguiente video.
Este tutorial incluye versión video
Publicaciones Recientes
- entrevistasEl Concepto de Hash en el Desarrollo Web
- entrevistasEl Concepto de Hash en el Desarrollo Web
- noticiasNoticias sobre desarrollo web | Agosto 2024
- noticiasNoticias sobre desarrollo web | Julio 2024
- entrevistas¿Cuál es la diferencia entre 'null' y 'undefined' en JavaScript y cuál utilizar?
- entrevistasComplejidad del Tiempo y Notación Big O: Los Cimientos de Algoritmos Eficientes
- javascriptGestión de Memoria en JavaScript: Una Guía Completa
- noticiasNoticias sobre desarrollo web | Junio 2024
- typescriptGenéricos en TypeScript: Tu arma secreta para código flexible y seguro
- noticiasNoticias sobre desarrollo web | Mayo 2024