Hoy vamos a ver una nueva extensión que tanto nos permite extraer información de otras webs, como pueden se fuentes utilizadas, tamaños, paddings, márgenes, coloreles, etc., como nos permite hacer pruebas en nuestras webs ya publicadas, editar textos, colores, etc.
Visbug, extensión de código abierto para diseñadores
La extensión se llama Visbug y vamos a ver sus características principales.
A lo largo de un menú vertical, aparecen las distintas opciones de esta extensión
1. Guías
Las guías se utilizan principalmente para verificar las alineaciones y conocer las distancias entre distintos elementos de la web
- Activación de guías: hover, al pasar el ratón por encima
- Medidas: Click + hover, hacer click y pasar el ratón por encima
- Etiqueta de medidas: Shift + Click
2. Inspect
La herramienta inspeccionar te permite ver los estilos comunes y actuales de los elementos de la web
3. Accessibility
Accesibilidad evalúa y puntúa el ratio de contraste entre los elementos y su fondo A++ y A+++ son las máximas puntuaciones.
4. Move
Move permite mover y cambiar de sitio algunos elementos dentro de la web con el ratón y las teclas de dirección.
5. Margin
Margen, como su nombre indica, nos muestra y permite modificar con algunas teclas los márgenes de los elementos utilizados en el diseño de la web.
- Más margen – ◀▶▲▼
- Menos margen – alt + ◀▶▲▼
- Todos – ctrl + ▲▼
6. Padding
Esta opción permite hacer lo mismo que la de margen pero modificando en este caso el padding
7. Flexbox Align
Permite crear o modificar la dirección, distribución, orden y envoltura del flexbox
- Filas: ctrl + ▼
- Columnas: ctrl + ▶
- Alignment: ◀▶▲▼
- Distribución: Shift + ◀▶
- Order: ctrl + Shift + ◀▶
- Wrapping: ctrl + Shift +▲▼
8. Hue Shift
Cambiar el tono, el brillo, la saturación y la opacidad del primer plano y del fondo
- Saturación: ◀▶
- Brillo: ▲▼
- Tono: ctrl + ▲▼
- Opacidad: ctrl + ◀▶
9. Shadow
Permite crear y ajustar la posición, el desenfoque y la opacidad de una sombra de caja
- X/Y Position: ◀▶▲▼
- Blur: alt + ▲▼
- Spread: alt + ◀▶
- Opacity: ctrl + ◀▶
10. Position
Permite posicionar los elementos de la web, tanto con las flechas de dirección del teclado como con el ratón.
11. Font Styles
Cambiar el tamaño, la alineación, el interlineado, el espaciado y el peso de las letras
- Tamaño: ▲▼
- Alineación: ◀▶
- Espaciado: Shift + ◀▶
- Interlineado: Shift + ▲▼
- Peso: ctrl + ▲▼
12. Edit Text
Permite editar los textos de la web haciendo doble click sobre ellos.
También hay unos iconos fuera del menú principal vertical que permiten cambiar el color a los textos, a los background o fondos y a los bordes.
A continuación te dejamos un breve vídeo donde puedes ver como funciona esta extensión.
