Herramientas de desarrollo en los navegadores web

27 de abril de 2019

¿Conoces las herramientas de desarrollo que los navegadores web ponen a tu disposición? Puede que uses alguna pero, ¿crees que consigues sacarle todo lo que pueden dar?

Aunque parecidas, cada navegador tiene sus propias herramientas de desarrollo y no todas se comportan igual. En muchos casos la diferencia son solamente matices. Cada cual defenderá el que prefiere e incluso intentará destruir el que no usa.

Particularmente, prefiero las herramientas de desarrollo de Firefox. Mi tarea más habitual es el desarrollo CSS y creo que las ayudas que el «editor de estilos» de Firefox me proporcionan cierta ventaja con respecto a su equivalente en Google Chrome.

En general, entre las herramientas que podemos encontrar en todos los casos tenemos:

  • un inspector de código (renderizado);
  • una consola, donde podemos ver distintos mensajes, errores y advertencias;
  • un editor css, mediante el cual podremos ver el efecto de los cambios en caliente;
  • un editor de javascript;
  • un debugger;
  • un registro de red, en el que se muestra la actividad de la red;
  • un visor del almacenamiento local, cookies, indexeddb, cache…;
  • y otras herramientas para analizar desde diferentes puntos de vista el rendimiento.

Como el tema de las imágenes en web ya lo tengo casi finiquitado, aunque aún tengo algún temilla pendiente, me gustaría, en las próximas semanas, ir analizando estas herramientas. Cómo utilizarlas y comparar las de un navegador con otro.

Al final, de esta serie, estoy seguro que habré aprendido a sacarle más partido y espero que tú también aprendas algo que no conocieses.