Las 10 mejores extensiones y herramientas de Chrome para diseñadores web

Si es diseñador y necesita algunas herramientas útiles para acelerar, colaborar o auditar sus proyectos de desarrollo web(web development) , la extensión de Chrome tiene una multitud de herramientas.

Esta lista incluye algunas de las herramientas y extensiones de Chrome más populares, y algunas dirían necesarias, que todo usuario que realice trabajos de diseño(design work) debería tener en su bolsa de equipo(kit bag) .

1. Banderas Domésticas

DOM Flags es una (DOM Flags)extensión de Chrome(Chrome extension) fácil de usar que proporciona una nueva forma para que los desarrolladores trabajen con las herramientas del navegador. Permite a los desarrolladores acelerar la tarea de diseñar elementos.

Usando atajos de teclado para cada elemento, puede marcar su navegación.

Todos hemos experimentado la dificultad de inspeccionar elementos muy detallados y es fácil perderse.

DOM Flags le permite rastrear elementos de diseño e incluye una función para inspeccionar componentes con precisión automáticamente. Esto, a su vez, ayudará a acelerar el flujo de trabajo y la implementación de DevTools(DevTools workflow and implementation) .

DOM Flags le permite realizar un seguimiento de los cambios. Y mantenga su enfoque en los elementos con los que está trabajando.

2. mareado

Sizzy ofrece a los diseñadores y desarrolladores una forma sencilla de probar sus sitios en múltiples ventanas gráficas.

Sizzy proporciona una forma sencilla de comprobar su diseño en tiempo real. Ofrece una vista interactiva de cualquier número de dispositivos y tamaños de pantalla. Incluso puede simular el teclado de un dispositivo(device keyboard) y luego cambiar entre los modos horizontal y vertical(landscape and portrait modes) .

La instalación de una extensión de Chrome(Chrome extension) agregará un botón a su barra de herramientas que, al hacer clic, abrirá la URL actual en la plataforma Sizzy(Sizzy platform) . La extensión bloqueará todos los encabezados de " x-frame-options " para que pueda echar un vistazo a cualquier sitio web en línea.

Sizzy es un proyecto de código abierto(source project) , y puedes ver el código completo aquí(here) .

3. Robot de control

Checkbot puede probar su sitio en busca de problemas de seguridad y también auditar la velocidad de carga de la página de su sitio web. Proporcionará a los diseñadores un medio para identificar errores típicos y recomendar mejoras en la seguridad del sitio(site security) , el motor de búsqueda(search engine) y la velocidad del sitio(site speed) .

Usando más de 50 métricas de mejores prácticas, auditará un sitio web para las mejores prácticas de SEO , enlaces rotos, contenido duplicado(duplicate content) y más. La herramienta también validará CSS , JS y HTML .

Checkbot detecta los errores del diseñador y del codificador(designer and coder errors) en tiempo real, lo que le ahorra la molestia de tener que regresar y volver a verificar su trabajo repetidamente.

Si está buscando una herramienta de buena calidad(quality tool) que arregle los enlaces de página rotos, asegure contenido y títulos de página(content and page titles) únicos y elimine las cadenas de redireccionamiento, esta herramienta sería útil.

Para los diseñadores, puede ayudarlo a minimizar su CSS y JS(CSS and JS) , así como brindar recomendaciones sobre cómo minimizar su CSS y aprovechar el almacenamiento en caché del navegador.

4. Cortapelos GistBox

GistBox es una de las extensiones de (GistBox)Chrome más útiles para los diseñadores web.

GistBox puede crear un GitHub Gist desde cualquier bloque de código(code block) en la página web que está viendo.

En la esquina superior derecha(right-hand corner) de cualquier bloque de código, verá un pequeño botón que, cuando se presiona, abrirá una ventana emergente que le permitirá guardar el código en Gist .

Puede crear Gists nuevos con un clic derecho del mouse y guardar bloques de código para su posterior inspección y uso(inspection and use) .

La integración con GitHub permite a los diseñadores y desarrolladores recopilar bloques de código y manipularlos o categorizarlos para su uso posterior. Esto lo convierte en una herramienta de extensión de Chrome (Chrome extension)conveniente y eficiente .(convenient and efficient)

5. Color Zilla

ColorZilla es una extensión de Chrome increíblemente útil para recopilar códigos hexadecimales que se pueden etiquetar, etiquetar y categorizar para proyectos de diseño web(web design) individuales .

Le permite seleccionar una herramienta de cuentagotas que extraerá el color de cualquier página web y lo guardará en el portapapeles de ColorZilla.

Con él, puede desarrollar rápidamente paletas de colores para su uso posterior y como una forma de asegurarse de que está utilizando el color de manera consistente en el diseño y desarrollo(design and development) web .

ColorZilla también actúa como analizador de color y editor de degradado (gradient editor)CSS para que pueda convertir una imagen a CSS .

6. Qué fuente

 Esta extensión de Chrome(Chrome Extension) es un verdadero ahorro de tiempo para aquellos que desean utilizar sus fuentes favoritas e incorporarlas en su propio proyecto de diseño web(web design project) .

La extensión WhatFont Chrome(WhatFont Chrome extension) permite a los desarrolladores analizar e identificar rápidamente casi cualquier fuente en cualquier página web.

La extensión está bien desarrollada y en lugar de tener que abrir las herramientas de inspección, la extensión funciona simplemente moviendo el mouse sobre la fuente.

No solo eso, sino que la extensión también identificará el servicio que se está utilizando para ofrecer una fuente de Pages y será compatible con Google Font API y Typekit.(Google Font API and Typekit.)

7. Disparo de luz

LightShot es una herramienta de captura de pantalla(screenshot tool) rápida que le permite capturar la totalidad o parte de cualquier página y cargarla, descargarla o enviarla a un destino de terceros(party destination) .

Las capturas de pantalla tomadas por LightShot se pueden usar y compartir en las redes sociales o imprimir.

Puede anotar y agregar texto, flechas y más a la parte seleccionada de la pantalla. Pero quizás una de las características más brillantes de esta sencilla herramienta para diseñadores web es que, al seleccionar una imagen, puede proceder a realizar una búsqueda completa de imágenes en Google(Google image) para encontrar imágenes similares en línea.

LightShot se puede configurar en varios idiomas.

La extensión está escrita en JavaScript puro y también funcionará para Windows , Chromebook , Linux y Mac OS(Linux and Mac OS) . También se puede acceder a ella como una aplicación de escritorio,(desktop application) lo que la convierte en una excelente opción para los diseñadores web que dependen de varios dispositivos.

8. Impresionante captura de pantalla

Al igual que Lightshot , Awesome Screenshot es una extensión de captura de pantalla e imagen.

Sin embargo, difiere de Lightshot en varios aspectos. Awesome Screenshot se puede configurar para conectar todas sus capturas de pantalla con su unidad de Google(Google drive) .

Le permite tomar capturas de pantalla de aquellos elementos que están más allá de su vista para capturar toda la página. Tiene herramientas adicionales de edición y anotación(editing and annotation tools) . La coma permite recortar y editar imágenes, todo dentro de la extensión... o con el uso de aplicaciones Awesome Screenshot adicionales.

También puede ampliar sus funciones instalando la aplicación Chrome(Chrome application) para escritorio. La extensión también permite capturar y compartir videos para que pueda colaborar con otros desarrolladores o diseñadores cuando trabaje en cualquier sitio.

Puede agregar imágenes adicionales a una captura de pantalla, así como elementos azules o borrados(blue or erase elements) que preferiría no mostrar a los demás.

9. Borrar caché

La extensión Clear Cache Chrome(Cache Chrome Extension) es una herramienta rápida y sencilla que le permite borrar las cookies y el caché de la página que está viendo. Elimina la necesidad de navegar a la página de configuración de su navegador para borrar algunos elementos simples de la página.

Para los diseñadores web que realizan múltiples ediciones y desean verlas en tiempo real, esta es una excelente herramienta que eliminará gran parte de la frustración de mirar datos antiguos.

Hay veces que necesita borrar su caché y cookies, pero navegar a la configuración de Chrome es tedioso. (Chrome)Clear Cache le permite borrar su caché, así como las cookies globales o locales, con solo hacer clic en un botón.

Clear Cache le permitirá configurar qué elementos desea borrar de la página. Las variables(Variables) incluyen Efectivo(Cash) , descargas, todos los sistemas, datos de formulario, en Efectivo(Cash) , base de datos de índice, datos(index database) de complementos, contraseñas y más.

10. Extensión de Google Chrome para desarrolladores web

La extensión de Google Chrome para desarrolladores web(Web Developer Google Chrome Extension) permite a los desarrolladores y diseñadores auditar, analizar y verificar fácilmente sus páginas web en busca de violaciones de las mejores prácticas de diseño(practice design) , codificación, usabilidad y optimización de motores de búsqueda.

Es una gran herramienta todo en uno que no es pesada para navegar por nuestros recursos, pero que proporciona una tonelada de información útil para el diseño web y también es responsable de los elementos de optimización de motores de búsqueda(search engine optimization) dentro de un sitio web o página.

 La extensión instala la barra de herramientas con múltiples herramientas de desarrollo web.

La herramienta le dará indicaciones sobre el tamaño de la página, el ancho y las dimensiones que entran en conflicto con el uso de las mejores prácticas(practice use) en múltiples dispositivos. Le permite verificar JavaScript incrustado y ver su sitio web a través de una simulación de varios dispositivos.

La extensión funciona bien en Windows , Linux y Mac OS. Además de los problemas de codificación y diseño(coding and design issues) , también proporcionará información sobre metaetiquetas ,(tag information) encabezados de respuesta, información de color(color information) e información topográfica.

Puede revisar las características principales de la herramienta, así como sus capacidades completas, en el sitio web del desarrollador Chris Pedericks(Chris Pedericks’ website) .

Sin duda, hay una gran cantidad de otras extensiones de Chrome útiles y de alta calidad que el (Chrome)diseñador o desarrollador(designer or developer) web podría usar.

Esta lista muestra algunas de las herramientas más populares y útiles. ¿Tienes alguna recomendación de herramientas que creas que soy más útil o superior a las de esta lista? Haznos saber.



Juan jose Morales

About the author

Soy técnico informático profesional y tengo más de 10 años de experiencia en el campo. Me especializo en el desarrollo de Windows 7 y Windows Apps, así como en el diseño de Cool Websites. Tengo un gran conocimiento y experiencia en el campo, y sería un activo valioso para cualquier organización que busque hacer crecer su negocio.


Related posts