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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Google Font Previewer
Parecida a Font Playground. Te dará la opción de previsualizar las fuentes de Google para tus diseños.
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.
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.
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.
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.
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.
Harmony
Una extensión con fines artísticos. Te permite hacer dibujos con un pincel muy peculiar con el que puedes crear ilustraciones asombrosas.
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.
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.
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]