VisBug es una extensión increíblemente útil para Chrome y Chromium que te permite hacer cambios sencillos en cualquier sitio web directamente dentro del navegador.

Ya hemos cubierto previamente VisBug en nuestros cursos de VisBug Quick Start. y en Personaliza una plantilla con VisBug, y desde entonces ha habido algunas nuevas adiciones en nuestras herramientas.

• 
  VisBug
  VisBug Quick Start
  Kezz Bracey
• 
  VisBug
  Personaliza una plantilla con VisBug
  Kezz Bracey

Vamos a revisar que son cada una y como accesarlos en este articulo corto.

Complemento del visualizador del índice Z

Instantáneamente muestra los valores del índice z de todos los elementos haciendo clic en el icono de búsqueda en VisBug e introduciendo la letra z. A continuación, una opción de autocompletar que dice "/zindex" aparecerá. Haz clic en ella para activar el complemento y aparecerá un cuadro alrededor de sus elementos que muestran el valor del índice z en la parte superior.

Contraste al pasar el mouse sobre SVG

Ahora puedes pasar el mouse sobre cualquier parte de cualquier imagen SVG y ver cuál es su valor de contraste de color en relación con el fondo que lo rodea. Primero, selecciona la herramienta de "Accesibilidad" de VisBug y, después, mantén el mouse sobre un SVG. Verás que aparece una información sobre herramientas encima del mouse que muestra el valor de contraste de color.

Ten en cuenta que el valor se mostrará en un color que coincida con la parte del SVG sobre la que está pasando el mouse, lo que te ayudará a asegurarte que estás obteniendo la lectura de contraste para la parte de la ilustración que deseas medir.

Simulación Daltónica

Al igual que la visualización del índice z, la simulación daltónica se activa a través de un complemento.

Otra vez, haz clic en la herramienta de búsqueda en la barra de herramientas VisBug y comienza a buscar "color". Verás una opción de autocompletar que dice "/simulate-colorblind". Haz clic en él para activar el complemento y veras un cuadro que aparece en la esquina superior derecha que enumera múltiples opciones de simulación daltónica. Selecciona cualquiera de esas opciones y veras que los colores de la página se transforman en una simulación para la forma especificada de daltonismo.

Soporte del Modo Oscuro

Cuando tu sistema operativo está configurado para preferir el modo oscuro VisBug detectará esto y mostrará tus herramientas en modo oscuro, así, como aparece arriba.

Haz clic para anclar CSS y A11y Tooltips

Ahora es muy fácil anclar información sobre herramientas que muestra información sobre CSS y accesibilidad. Con cualquiera de las herramientas de "Info" o "Accesibilidad" activa, mientras te muevas por una página,las herramientas aparecerán cuando pases el mouse sobre varios elementos. Para anclar esa información sobre herramientas, simplemente haz clic en su lugar.

Esto se demuestra mejor en un GIF, como verás en este tweet del desarrollador de VisBug, Adam Argyle:

VisBug v0.2.21 fue lanzado hoy 🎉�
@addyosmani 💀🤘)🤘)< - reducción consciente del movimientoare< - pruebas de moarsts

mostrados en el videodeo< - clics para anclar estilos/a11y11y< - nuevo complemento z-index pic.twitter.com/7I9nZ35SUK/a>< — Adam Argyle (@argyleink) 17 de diciembre de 2019/a>