Cada vez son más los diseñadores y desarrolladores web que usan Chrome. De hecho, se ha hecho con una buena parte del mercado de los navegadores. Y es que, a parte de su velocidad, buena adaptabilidad con los servicios de Google, compatibilidad con todos los Sistemas Operativos y Smartphones y buenas herramientas de desarrollo… también tiene una gama de extensiones muy interesantes.

Os dejo las 25 extensiones de Chrome más útiles enfocadas al diseño y desarrollo web.

Font Playground

Te permite probar las fuentes locales y todas las Google Fonts en una página web sin hacer ningún cambio real. Podrás probar diferentes combinaciones de fuentes hasta que des con la adecuada, incluyendo los estilos y efectos.

font-playground-logo

extensiones chrome


Project Naptha

El texto incrustado siempre es una pesadilla para cualquiera. Si queremos editarlo o copiarlo no nos quedará otra opción que transcribirlo, hasta que te descargues Project Naptha, que no solo lo hará por ti, si no que también te lo traducirá si lo necesitas.

naptcha-logo

complementos chrome


What Font

Para mí, una de las extensiones más útiles que uso, por no decir la que más.

What Font te identificará la fuente que se esté usando en la página web en la que estés, incluso te mostrará los estilos de esta.

what-font-logo

extensiones para chrome


Firebug

La utilizan multitud de diseñadores y desarrolladores web (yo, la uso frecuentemente). Es una consola en la que puedes ver, de manera gráfica, los elementos HTML, DOM y toda la estructura de la web.

Firebug-logo

complementos para chrome


Web Developer

Una de las extensiones más potentes para los desarrolladores. Se añade un botón en la barra de Chrome con multitud de herramientas para modificar el CSS, las imágenes, etc. Podrás visualizar los cambios en tiempo real, al igual que Firebug.

webdeveloper-logo

extensiones google


Web Developer Checklist

Te permite solucionar problemas de SEO, usabilidad, accesibilidad y rendimiento de tu página web de una manera rápida.

De modo que si te falta algo en el código de la página te lo notificará y podrás cambiarlo.

webdeveloperchecklist-logo

extensiones de chrome


DevTools Autosave

Enfocado principalmente a desarrolladores, DevTools Autosave guarda automáticamente los cambios del CSS y JS de una página directamente en el archivo de origen.

devtools-logo

chrome plugins complementos



Search Stack Overflow

Muchos usan Stack Overflow para resolver sus dudas relacionadas con el desarrollo, y esta herramienta agrega un campo de búsqueda en tu navegador para ahorrarte algo de tiempo.

search-logo


Perfect Pixel

Si eres un perfeccionista y necesitas que el diseño que has creado para una página web quede exactamente igual al codificarlo esta es tu extensión.

Perfect Pixel coloca una imagen semitransparente de tu diseño encima de la página y la compara pixel por pixel para que puedas ser lo más exacto posible.

perfectpixel-logo

chrome plugins


Pic Monkey

Te permite capturar las imágenes de una web y posteriormente editarlas, con infinidad de efectos, marcos, texturas… y podrás añadir texto e iconos.picmonkey-logo

complementos chrome


Chrome Daltonize

Son muchos los que sufren daltonismo y no pueden ver correctamente el color de las imágenes cuando navegan por internet. Chrome Daltonize modifica estas imágenes de tal forma que las adapta para que estas personas puedan verlas correctamente.

daltonize-logo

extensiones para chrome


Page Ruler

Una herramienta simple pero muy útil. Permite dibujar un área, modificarla al gusto y te da información de las dimensiones y la posición horizontal y vertical.

pageruler-logo

complementos para chrome


Check My Links

Check my Links comprueba todos los links de tu página web. Los diferencia mediante colores, los válidos en verde y los rotos en rojo.

checkmylinks-logo

extensiones google


Flickr Tab

Es una extensión cuyo único objetivo es el de hacerte más agradable el abrir una pestaña nueva en Chrome, mostrándote una fotografía de Flickr cada vez.

Puedes pinchar en el nombre de usuario para ver más fotos del fotógrafo.

flickr-logogoogle extensiones


Google Art Project

Parecida a Flickr Tab, pero con la excepción de que, en vez de mostrarte fotografías, te muestra obras de arte servidas por el Google Art Project.

googleart-logoextensiones de chrome


Window Resizer

Perfecta para el diseño responsive, el diseño adaptado a los diferentes dispositivos. Con esta herramienta podrás simular las diferentes resoluciones en tu navegador.

windowresizer-logo

extensiones web


Google Font Previewer

Parecida a Font Playground. Te dará la opción de previsualizar las fuentes de Google para tus diseños.

googlefont-logo

complementos google


ColorPick Eyedropper

Permite seleccionar cualquier color del navegador y te muestra colores y valores hexadecimales y RGB.

La lupa ayuda bastante a la hora de seleccionar el color que quieres.

eyedropper-logo

chrome plugins complementos



Colorzilla

Esta extensión sirve entre otras cosas para crear la paleta de colores de una web a partir de un solo color. Si necesitas un degradado, te generará el código CSS. Al igual que si necesitas el valor hexadecimal de un color.

colorzilla-logo

extensiones chrome


Tape

Una auténtica joya para el diseñador perfeccionista, te permite colocar guías en una página web y se acoplan de forma inteligente al contenido de la misma.

Te ayuda a medir fácilmente las posiciones y tamaños de los elementos, y con la lupa podrás tener la mayor precisión.

tape-logo

chrome plugins


Evernote

Realmente esta extensión no está dirigida solamente al diseño y desarrollo de páginas web. Lo puede usar cualquiera para organizar sus notas.

Excelente para crear tus notas y llevarlas contigo en cualquier momento. Puedes acceder a ellas desde cualquier dispositivo y se sincronizan constantemente para que no pierdas ningún detalle. Es la herramienta ideal para tu trabajo y vida personal.

evernote-logo

complementos chrome


Awesome Screenshot

Herramienta de captura de pantallas, perfecta para rediseño de páginas webs. Anotar los cambios directamente desde el navegador facilita mucho el trabajo.

screenshot-logo

extensions chrome


Harmony

Una extensión con fines artísticos. Te permite hacer dibujos con un pincel muy peculiar con el que puedes crear ilustraciones asombrosas.

harmony-logo

extensiones para chrome


Polarr Photo Edition 3

Polarr es una extensión que te permite editar imágenes de una manera rápida y sencilla. Haciendo clic en el botón “editar” se abre la imagen en Polarr y podrás editarla con todo lo que te ofrece. Después tendrás la opción de exportar el resultado.

polarr-logocomplementos para chrome


Instant wireframe

Con esta extensión podrás ver el esqueleto de una página web.

Ver como esta hecha puede ayudarte a la hora de crear la tuya.

windowresizer-logo

extensiones google


Espero que todas estas extensiones te sirvan de ayuda a la hora de abordar un proyecto.

No olvides dejarme un comentario con tu experiencia con alguna de estas extensiones o con alguna extensión más que sea interesante que seguro que las hay.

[soy_xabi]