"El diseño es el embajador silencioso de tu marca"
- Paul Brand

5 Trucos del inspector de Firefox

Aunque todos los que nos dedicamos al desarrollo web usamos las herramientas de desarrollador de los navegadores, puede que no conozcamos todas las características disponibles.

En este post me voy a centrar en el las herramientas de Firefox, el navegador que uso habitualmente salvo excepciones como Angular donde me resulta más útil Chrome.

La verdad es que ambos navegadores tienen herramientas muy potentes, una de ellas es el Inspector, como su propio nombre indica desde aquí nos permite inspeccionar la web, el árbol DOM y los estilos que tienen sus distintos nodos.

Esta es una herramienta muy eficaz que al menos en mi caso resulta absolutamente imprescindible. Sin embargo, casi siempre hacemos las mismas tareas cuando inspeccionamos el código, y tal vez por no trastear no nos damos cuenta de que pone a nuestra disposición otras funcionalidades que pueden sacarnos de algún apuro o ahorrarnos tiempo.

Veamos algunas de ellas…

1. Arrastrando nodos

Arrastrar un nodo del DOM en el panel del inspector es muy sencillo, para entendernos un el DOM es traduciéndolo a nuestro idioma un «Árbol de nodos» y cada nodo es un elemento de la página, visualmente para nosotros representa una etiqueta HTML y todo su contenido (otras etiquetas, texto, etc…)

Si queremos ver el resultado de mover de sitio algún elemento de nuestra página no es necesario que editemos el HTML, guardemos y refresquemos el navegador, tampoco es necesario cortar y pegar el código fuente desde el inspector.

Simplemente arrastra y suelta el nodo donde quieras y no solo se recolocará en el árbol DOM sino que se renderizará en tiempo real en el navegador!

 

2. Guardar la imagen de un nodo

Otra opción muy interesante que puede que no sepas que tiene el inspector de código es la de sacar instantáneas de un nodo.

Crear una imagen de un componente puede ser fantástico en situaciones como estas:

  1. Cuando estás creando la documentación de tu página.
  2. Estás haciendo mockups y quieres incluir parte algo que has visto en otro sitio.
  3. Simplemente navegando ves algo que te inspira y lo quieres guardar.

Si te preguntas para que lo quieres, teniendo ya la herramienta Firefox Screenshots, las respuestas son:

  • Marcando el nodo en el DOM la selección puede ser más precisa.
  • Mientras que Firefox Screenshots tras tomar la instantánea la sube a la nube, te permite editarla, y por último la guardas. Haciendo la captura desde el inspector se guarda directamente la imagen en la carpeta predeterminada de descargas, así que el proceso es más rápido.

Para realizarla tan solo tienes que pulsar con el botón derecho sobre la imágen y seleccionar «Screenshot Node».

3. Inspeccionar Layouts

Mi anterior post habla sobre el CSS Grid Layout, de hecho las capturas que estoy poniendo son de esa entrada.

Y aunque ya se mencionó ahí, el inspector de Firefox nos permite inspeccionar gráficamente los Layouts construidos con esta tecnología.

Esta característica es muy chula y si vas a usar estos Layouts seguro que te sirve de mucho, en el caso de mi entrada como hice pruebas para enseñar algunas cosas tengo 2 Layouts explorables. No solo puedo seleccionar cualquiera de ellos sino que también tengo opciones para:

  1. Mostrar los números de las líneas del layout, tanto filas como columnas.
  2. Mostrar los nombres de las áreas.
  3. Extender las lineas por toda la ventana del navegador para hacer un efecto similar al de las reglas cuando usamos photoshop por ejemplo.

 

4. Usar el elemento marcado en la consola

El simple hecho de tener un nodo seleccionado nos permite que ejecutemos cualquier operación sobre él en la consola.

Cuando seleccionas un elemento del DOM su valor queda guardado en la variable $0 de manera que al hacer operaciones sobre esa variable estamos actuando sobre el elemento marcado. Para entenderlo la variable $0 es como un puntero sobre el elemento marcado en el Inspector.

Si además hemos inyectado Jquery en la consola, podremos utilizarlo y hacer prácticamente de todo. En la siguiente captura podéis verlo.

 

5. Atajos de teclado para hacer casi de todo

Como tal no es un truco, pero no suelo ver a mucha gente que los use habitualmente (ya se que aprendérselos cuesta) y realmente ahorra mucho tiempo usar el teclado en vez del ratón.

Por ejemplo, pongamos por caso que quieres copiar el código de un elemento, no es lo mismo las opciones donde interviene el solo el ratón:

Opción 1

  1. Hacer click derecho sobre el nodo que quieres copiar.
  2. Navegar hasta la opción «Copiar» y esperar a que despliegue el submenú.
  3. Navega hasta la opción «Outer HTML» y haz click.

Opción 2 (Aun peor)

  1. Hacer click derecho sobre el nodo que quieres copiar.
  2. Hacer click en la opción «Edit as HTML«.
  3. Seleccionar todo el contenido.
  4. Hacer click derecho sobre el contenido marcado.
  5. Hacer click en «Copy»

Que usar el atajo de teclado para esto:

  1. Pulsa Ctrl+C sobre el elemento que quieres copiar.

Puedes probar las 3 maneras y ver la diferencia de tiempos entre ir con ratón y con teclado.

Los atajos son más rápidos y habitualmente conlleva menos error pulsar una tecla o combinación de teclas que usar la navegación con ratón y clicar.

Aquí os dejo los atajos que hay actualmente disponibles

 

Inspeccionar un elemento

Command Windows OS X Linux
Inspect Element Ctrl + Shift + C Cmd + Opt + C Ctrl + Shift + C

Clicar sobre nodos

Command Windows OS X Linux
Select the element under the mouse and cancel picker mode Click Click Click
Select the element under the mouse and stay in picker mode (new in Firefox 52) Shift + Click Shift + Click Shift + Click

 


Panel HTML

Command Windows OS X Linux
Delete the selected node Delete Delete Delete
Undo delete of a node Ctrl + Z Cmd + Z Ctrl + Z
Redo delete of a node Ctrl + Shift + Z
Ctrl + Y
Cmd + Shift + Z
Cmd + Y
Ctrl + Shift + Z
Ctrl + Y
Move to next node (expanded nodes only) Down arrow Down arrow Down arrow
Move to previous node Up arrow Up arrow Up arrow
Expand currently selected node Right arrow Right arrow Right arrow
Collapse currently selected node Right arrow Right arrow Right arrow
Step forward through the attributes of a node Tab Tab Tab
Step backward through the attributes of a node Shift + Tab Shift + Tab Shift + Tab
Editar el atributo seleccionado Enter Return Enter
Hide/show the selected node H H H
Focus on the search box in the HTML pane Ctrl + F Cmd + F Ctrl + F
Editar como HTML F2 F2 F2
Stop editing HTML F2
Ctrl + Enter
F2
Ctrl + Return
F2
Ctrl + Enter
Copy the selected node’s outer HTML Ctrl + C Cmd + C Ctrl + C
Hacer scroll hasta el elemento marcado S S S
Find the next match in the markup, when searching is active Enter Return Enter
Find the previous match in the markup, when searching is active (new in Firefox 48) Shift + Enter Shift + Return Shift + Enter

 


Barra de migas de pan

Command Windows OS X Linux
Ir al elemento anterior en la barra de migas de pan Left arrow Left arrow Left arrow
Ir al siguiente elemento en la barra de migas de pan Right arrow Right arrow Right arrow
Dar el foco al HTML pane Shift + Tab Shift + Tab Shift + Tab
Dar el foco al CSS pane Tab Tab Tab

 


Panel CSS

Command Windows OS X Linux
Dar el foco al buscador en el CSS pane Ctrl + F Cmd + F Ctrl + F
Vaciar el buscador Esc Esc Esc
Step forward through properties and values Tab Tab Tab
Step backward through properties and values Shift + Tab Shift + Tab Shift + Tab
Editar el valor o la propiedad Enter or Space Return or Space Enter or Space
Cycle up and down through auto-complete suggestions (Rules view only, when a property or value is being edited) Up arrow, Down arrow Up arrow, Down arrow Up arrow, Down arrow
Choose current auto-complete suggestion (Rules view only, when a property or value is being edited) Enter or Tab Return or Tab Enter or Tab
Incrementar el valor en 1 Up arrow Up arrow Up arrow
Reducir el valor en 1 Down arrow Down arrow Down arrow
Incrementar el valor en 100 Shift + Page Up Shift + Page Up Shift + Page Up
Reducir el valor en 100 Shift + Page Down Shift + Page Down Shift + Page Down
Incrementar el valor en 10 Shift + Up arrow Shift + Up arrow Shift + Up arrow
Reducir el valor en 10 Shift + Down arrow Shift + Down arrow Shift + Down arrow
Incrementar el valor en 0.1 Alt + Up arrow Opt + Up arrow Alt + Up arrow
Reducir el valor en 0.1 Alt + Down arrow Opt + Down arrow Alt + Down arrow
Mostrar/Ocultar información de la propiedad Enter or Space Return or Space Enter or Space
Abrir la referencia en MDN de la propiedad F1 F1 F1
Abrir el fichero CSS en el editor de estilos Enter Return Enter

 


Atajos globales

Command Windows OS X Linux
Incrementar tamaño de fuente Ctrl + + Cmd + + Ctrl + +
Reducir tamaño de fuente Ctrl + – Cmd + – Ctrl + –
Resetear tamaño de fuente Ctrl + 0 Cmd + 0 Ctrl + 0
The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)