25 extensiones extremadamente útiles de Google Chrome para diseñadores y desarrolladores

Google Chrome fue bastante tardío en las guerras de los navegadores, pero fue un éxito repentino que se convirtió instantáneamente en el favorito de los usuarios de Mac y Windows. Todo sobre Chrome, desde su interfaz mínima y altamente práctica hasta su sólido Webkit Core y su robusto sistema de extensión, hace que sea una de las mejores maneras de acceder a la web.

Para todos los amantes de Chrome, tenemos una impresionante colección de 25 Extensiones de Google Chrome extremadamente útiles para diseñadores y desarrolladores. Ya sea que esté buscando una forma rápida de validar su página o crear una superposición de cuadrícula personalizada, tenemos la herramienta para usted.

Firebug Lite

Firebug Lite proporciona la rica representación visual que estamos acostumbrados en Firebug cuando se trata de elementos HTML, elementos DOM y sombreado de Box Model. Proporciona algunas características interesantes, como la inspección de elementos HTML con el mouse y la edición de CSS en vivo.

Elegante

Esta extensión hace que sea fácil y divertido rediseñar completamente el estilo visual de una página web o sitio. ¿Quieres crear una versión gris de YouTube o una versión negra de Google? Elegante es tu respuesta.

Con estilo te permite administrar fácilmente los estilos de usuario. Agregue, elimine, habilite, deshabilite y organice con unos pocos clics del mouse, sin necesidad de editar un código, sin encontrar una configuración poco clara. El sitio web complementario de Stylish, userstyles.org, alberga decenas de miles de estilos de usuario creados por otros usuarios de Stylish que puede probar.

CSS Reloader

CSS Reloader es una extensión del navegador que te permite recargar CSS sin volver a cargar la página. Simplemente presione un atajo rápido y la página se actualizará con los cambios de estilo.

Speed ​​Tracer (por Google)

Speed ​​Tracer es una herramienta para ayudarlo a identificar y solucionar problemas de rendimiento en sus aplicaciones web. Visualiza las métricas que se toman de los puntos de instrumentación de bajo nivel dentro del navegador y los analiza a medida que se ejecuta su aplicación. La interfaz de usuario es un panel de control fácil de usar, lleno de información y gráficos aplicables que lo ayudarán a optimizar sus aplicaciones.

Live CSS Editor

Esta extensión proporciona un cuadro de texto en cualquier página HTML para que pueda escribir CSS libremente e inmediatamente ver los resultados. Es una herramienta simple, pero es muy útil para elaborar ideas y solucionar problemas.


Captura de pantalla de aviario

Esta es una pequeña herramienta realmente genial que captura cualquier página web y la abre automáticamente en una de las muchas herramientas profesionales para creativos de Aviary.com. Tendrás acceso a herramientas similares a Photoshop para que puedas manipular tu imagen como quieras: recortar, redimensionar, rotar, etc.

Lorem Ipsum Generator

Solo un simple generador de Lorem Ipsum integrado en su navegador. Extremadamente útil para cuando creas maquetas y necesitas un texto de relleno.

Refrescar mono

Actualizar automáticamente una página en un intervalo establecido. Supervise la página para un cambio y reciba una notificación en caso de cambio. Obviamente, esta es la herramienta perfecta para los desarrolladores web que desean vigilar los cambios de código en el navegador sin tener que actualizar la página de forma manual.

Window Resizer

Esta extensión cambia el tamaño de la ventana del navegador para emular varias resoluciones. Si te estás lanzando al tren de diseño web sensible, querrás revisar esta extensión para que puedas evaluar rápidamente tus diseños en varios tamaños populares.

Google Font Previewer para Chrome

Soy un gran fan de Google Fonts, la herramienta gratuita para aplicar fuentes web personalizadas a través de CSS. Esta extensión le permite aplicar rápidamente las fuentes de Google a selectores de CSS específicos para que pueda obtener una vista previa rápida de cómo se verá esa fuente en su diseño antes de actualizar sus archivos.

ruul

ruul: una regla en pantalla increíblemente simple para alinear y medir el tipo, la altura de la línea, los trazos y casi cualquier cosa en la web. Perfecto para analizar diseños existentes.

Revisar mis enlaces

'Check My Links' encuentra rápidamente todos los enlaces en una página web y comprueba cada uno por usted. Destaca cuáles son válidos y cuáles están rotos. No puedo decir cuántas veces he cometido errores estúpidos, como olvidarme de revisar mis enlaces para asegurarme de que todos funcionen. Esta sencilla herramienta automatiza este proceso molesto y lo ayuda a identificar lo que necesita corregir.

Comps

Si te gusta codificar sitios web de comp de Photoshop, te encontrarás constantemente comparando los dos para ver si estás en el camino correcto. Esta extensión le permite cargar imágenes desde su computadora local y superponerlas fácilmente en su sitio web para comparar su código con un diseño determinado.

Las rejillas

Esta extensión te ayuda a crear una superposición de cuadrícula personalizada para cualquier página. Tiene bastantes opciones y es bastante útil para crear diseños basados ​​en cuadrícula de píxeles perfectos.

Escala de grises

Con esta extensión puede hacer que sus páginas se muestren en escala de grises, esto le ayudará a ver posibles problemas con los colores que no tienen suficiente contraste. El contraste es un elemento importante en el diseño que mejora la estética y la facilidad de uso para los usuarios típicos y los que no conocen el color.

Reglas, guías, cuentagotas y selector de color

Para desarrolladores de IU. Elija cualquier color de la página web con la herramienta cuentagotas; Mostrar reglas, guías y cuadrícula en la página.

Pendule

Pendule es una gran colección de herramientas de desarrollo para Chrome. Puede ver y validar el código, deshabilitar estilos, ver colores utilizados, ocultar imágenes, mostrar contraseñas y mucho más.

WhatFont

WhatFont es una herramienta increíble que puedes encontrar en muchos navegadores. Es rápido, fácil, súper atractivo y le dice no solo el nombre de la fuente, sino también el tamaño y la altura de la línea.

Paleta de cromo

Una herramienta pequeña y ordenada que captura rápidamente los colores de cualquier imagen y lo ayuda a construir instantáneamente esquemas de colores sólidos.

Guías

¡Mantenga sus elementos en línea con las Guías! Compruebe las distancias, las alineaciones y más para asegurarse de que sus sitios web sean perfectos en píxeles.

HTML Instant

HTML Instant es un editor de doble panel agradable y simple que le permite ingresar HTML, CSS o JavaScript a la derecha y ver instantáneamente una vista previa en vivo a la izquierda.

Validación de HTML

Una forma rápida y fácil de validar la página actual usando w3.org.

SEO y análisis de sitios web

SEO & Website Analysis by WooRank es una extensión para Google Chrome que proporciona un análisis profundo de SEO que cubre más de 50 criterios de SEO y usabilidad.

Detector de compatibilidad del navegador

La compatibilidad entre navegadores es el mayor dolor que enfrentará al desarrollar sitios web. Esta herramienta puede ayudarlo a identificar rápidamente posibles áreas problemáticas en su código.

Neo Vision

Neo Vision proporciona resaltado de sintaxis al ver archivos de origen. La parte interesante es que hay múltiples temas personalizables para que puedas hacer que el código se vea como quieras.

¿Cuál es tu extensión favorita de Google Chrome?

Ahora que ha visto nuestra colección de extensiones de Google Chrome para diseñadores y desarrolladores, deje un comentario y háganos saber cuáles son sus extensiones favoritas. Además, ¿has probado alguna de las extensiones anteriores? ¿Que piensas de ellos?