Skip to main content

¿Cómo personalizar la consola del navegador?

utilidades

Autor: Reynaldo Navedo

Publicado: Actualizado:

¿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:

  1. Abre la consola del navegador. Presiona CTRL + F12 en PC u OPTION + CMD + I en Mac.
  2. Abre la configuración del navegador presionando el botón en forma de engrane que se encuentra en la parte superior derecha.
  3. Selecciona el tema oscuro (esto es mandatorio, el tema claro no funciona con los "plugins")
  4. 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.
  5. Ahora vamos a la página de tienda de extensiones de Chrome en el siguiente URL https://chrome.google.com/webstore/category/extensions
  6. 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.
  7. Selecciona el tema y añádelo a la lista de extensiones de Chrome.
  8. Ahora solo tenemos que seguir unos pasos adicionales para poder implementar la extensión.
  9. 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.
  10. 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

Comparte este contenido