Los desarrolladores web estamos acostumbrados a utilizar el inspector de elementos del navegador para depurar nuestro código y, así, resolver problemas de diseño, identificando los elementos y modificando dinámicamente sus estilos.

Estábamos creando la versión imprimible de una web, cuando nos encontramos con el problema de que queríamos depurar la regla css @media print y no sabíamos acceder a esta versión imprimible en el navegador para utilizar el inspector de elementos.

Aquí os dejamos las instrucciones para hacerlo.

Si utilizas Firefox:

– Paso 1: Pulsa las tecla F12. Se abrirá la barra de herramientas para desarrolladores. Generalmente, se abre en la parte inferior del navegador o en la parte derecha como una columna.
– Paso 2: En el Inspector, verás un icono (tal y como os muestro en la imagen inferior) que os permitirá cambiar a un modo que simula la versión imprimible y podréis utilizar el inspector de elementos como siempre.

Simulación de la versión imprimible de una web en Firefox

Si utilizas Chrome:

– Paso 1: Tendrás que abrir como siempre las herramientas para desarrolladores ( CTRL + F12 ó CTRL + SHIFT + I) o a través de las opciones del navegador (Más herramientas > Herramientas para desarrolladores).
– Paso 2: En la esquina superior derecha de las herramientas para desarrolladores, deberás hacer clic sobre el botón con los 3 puntos verticales, hacer clic sobre «More Tools» o «Más herramientas» y luego hacer clic sobre «Rendering».

– Paso 2: Se abrirá una nueva ventana en la parte inferior de las herramientas para desarrolladores y, ahí, deberemos seleccionar la opción de «Emulate media» y elegir, de la lista desplegable, la opción de «print».

Así, podremos utilizar el inspector de elementos y depurar el css de la versión imprimible en el navegador Chrome.