Los inspectores de elementos nos permiten señalar las etiquetas que estructuran nuestro contenido directamente en la ventana del navegador, mostrándonos qué parte del css es la responsable de dar formato a dicho contenido, y modificar (añadir, quitar y modificar propiedades, o «reglas» completas) para cambiar su visualización a tiempo real (sin tener que ir al editor de código a modificar nuestro css, y luego recargar la página para ver cambios).

Firefox trae un depurador propio integrado, y puede incluir Firebug, solo con descargarlo del enlace getfirebug.com

Chrome también trae el suyo propio integrado.

Safari trae un depurador integrado (pero hay que activarlo)

Para activar el menú de desarrollo en Safari, tenemos que ir a las preferencias (dentro del «engranaje»), y hacer click en en la pestaña Avanzado. Abajo del todo tendremos que activar la opción Mostrar el menú Desarrollo en la barra de menús. Una vez activado, nos aparecerá en la barra superior.

Y en todos se puede activar Firebug añadiendo la siguiente linea de código al header de  nuestro html

<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

Y añadiendo el siguiente enlace a favoritos: Firebug Lite debug

En los últimos Safari y Chrome es sencillo porque basta con arrastrar el enlace a la barra de favoritos, En otros navegadores puede ser un poco más complicado, porque este enlace no lleva a ninguna «página», con lo que hay que añadir un enlace cualquiera a favoritos, y luego editar ese favorito, para que apunte al mismo lugar al que apunta este enlace.
En PC, a veces (además) el ejemplo no funciona en local por motivos de seguridad, en cuyo caso, la solución es descargar firebuglite de https://getfirebug.com/firebug-lite.js guardarlo junto con el HTML que pretendemos depurar y modificar el enlace de nuestro html
<script type="text/javascript" src="firebug-lite.js"></script>