10 Mejores Extensiones de Chrome y Herramientas para los Diseñadores Web

0

Si usted es un diseñador en la necesidad de algunas usefultools para acelerar, colaborar o auditoría de sus proyectos de desarrollo web, Chromeextension tiene una multitud de herramientas.

Esta lista se compone de algunos de los más populares – y algunos dirían que sea necesario –
herramientas y extensiones de Chromeque cada usuario hace el trabajo de diseño debe tener en su kit de bolsa.

1. DomFlags

 blank

DOM Banderas es un simple utilizar el Chrome extensionthat proporciona una nueva forma para que los desarrolladores trabajen con las herramientas del navegador. Es allowsdevelopers para acelerar la tarea de elementos de estilo.

el Uso de atajos de teclado para cada elemento se pueden marcar su navegación.

todos Hemos experimentado la dificultad ininspecting altamente detallada de los elementos, y es fácil perderse.

DOM Banderas permite realizar un seguimiento de estilo elementsincludes una característica a inspeccionar los componentes con precisión de forma automática. Esto, inturn, ayudará a acelerar DevTools flujo de trabajo y la aplicación.

DOM Banderas permite el seguimiento de los cambios. Andmaintain su foco de atención sobre los elementos en los que está trabajando.

2. Sizzy

 blank

Sizzy ofrece a los diseñadores y desarrolladores de un simpleway a prueba sus sitios en múltiples vistas.

Sizzy proporciona una forma sencilla de comprobar yourdesign en tiempo real. Ofrece una vista interactiva de cualquier número de dispositivos andscreen tamaños. Usted puede incluso simular un dispositivo de teclado y, a continuación, cambie betweenlandscape y retrato modos.

la Instalación de una extensión de Chrome va a agregar un botón a tu barra de herramientas, la cual, cuando se hace clic se va a abrir la URL actual en el Sizzy de la plataforma. La extensión del bloque de todos ”
x-frame-options” encabezados de modo que usted será capaz de echar un vistazo a cualquier sitio web en línea.

Sizzy es un proyecto de código abierto, y se puede ver el código completo
aquí.

3. Checkbot

 blank

Checkbot puede probar su sitio para securityissues y también la auditoría de su página web la velocidad de carga. Se providedesigners con un medio de identificación de los errores típicos y recomendar improvementsin la seguridad del sitio de motor de búsqueda, y la velocidad del sitio.

el Uso de más de 50 de las mejores prácticas de métricas, itwill de auditoría de un sitio web para las mejores prácticas de SEO, enlaces rotos, contenido duplicado andmore. La herramienta también validar CSS, JS y HTML.

Checkbot recoge en diseñador y programador errorsin tiempo real que le ahorra la molestia de tener que ir y volver a su workrepeatedly.

Si usted está buscando una buena herramienta de calidad thatwill de reparación de los enlaces de la página, asegúrese de contenido único y de los títulos de página y eliminateredirect cadenas de esta herramienta podría ser útil.

Para los diseñadores, que pueden ayudar a minimizar yourCSS y JS, así como ofrecer recomendaciones sobre cómo minify CSS andleverage almacenamiento en caché del navegador.

4. GistBox Clipper

 blank

GistBox es uno de los más útiles Chromeextensions para los diseñadores web.

GistBox puede crear un
GitHub Gistde cualquier bloque de código en la página web que está viendo.

En la esquina superior derecha de cualquier codeblock, verás un pequeño botón, que al pulsarlo, se permitirá que un pop-up thatenables que guarde el código a la Esencia.

Usted puede crear nuevos Gist con un click derecho y guardar los bloques de código para su posterior inspección y uso.

la Integración con GitHub permite a los diseñadores anddevelopers para recoger los bloques de código y manipularlos o categorizarlos forlater uso. Esto hace que sea conveniente y eficiente de la extensión de Chrome de la herramienta.

5. ColorZilla

 blank

ColorZilla Es una increíblemente útil Chromeextension para la recolección de los códigos hexadecimales que puede ser marcados, etiquetados y categorizedfor individuales proyectos de diseño web.

le permite seleccionar un cuentagotas herramientaque se va a extraer el color de cualquier página web y guardarlo en la ColorZillaclipboard.

Con él, usted puede desarrollar rápidamente colorpalettes para su uso posterior y como una manera de garantizar que usted está usando colorconsistently en diseño y desarrollo web.

ColorZilla también actúa como un analizador de color andCSS editor de degradado, de modo que usted puede convertir una imagen en CSS.

6. WhatFont

 blank

ThisChrome Extensión es un verdadero ahorro de tiempo para aquellos que quieran utilizar theirfavorite fuentes E incorporar intotheir propio proyecto de diseño web.

WhatFont extensión de Chrome permite a los desarrolladores toquickly analizar e identificar casi cualquier fuente en cualquier página web.

La extensión está bien desarrollado y ratherthan tener que abrir las herramientas de inspección de las obras de ampliación que por el mero hecho de wavingthe ratón por encima de la fuente.

No sólo eso sino que la extensión también permite identificar el servicio que se utiliza para servir una de las Páginas se fue de la fuente y de apoyo
Google Font API y Typekit.

7. LightShot

 blank

LightShot es una rápida captura de pantalla de la herramienta de thatenables la captura de la totalidad o parte de cualquier página y cargar ordownload o enviar a un tercero de destino.

Capturas de pantalla tomadas por LightShot puede ser utilizado andshared en las redes sociales o impreso.

Usted puede anotar y añadir texto, flechas y máspara la parte seleccionada de la pantalla. Pero quizás uno de los más brilliantfeatures de esta sencilla herramienta para los diseñadores web es que mediante la selección de un imageyou continuación, puede proceder a hacer una búsqueda de imágenes de Google para similar imagesonline.

LightShot puede ser configurado en multiplelanguages.

La extensión está escrito en JavaScript puro y también funciona para Windows, Chromebook, Linux y Mac OS. También se puede acceder como un
aplicación de escritoriolo que es una excelente opción para los diseñadores web que dependen de múltiples dispositivos.

8. Impresionante Captura de pantalla

 blank

Como Lightshot, Awesome Screenshot es una screenand de captura de imágenes de extensión.

no difieren de Lightshot, sin embargo, en el grupo de formas. Impresionante Captura de pantalla se puede configurar para conectar todos los yourscreenshots con su Google drive.

le permite captura de pantalla de los elementswhich están más allá de su punto de vista con el fin de capturar toda la página. Es hasadditional herramientas de edición y anotación de coma permite recortar y imageediting todos dentro de la extensión.. o con el uso de otros AwesomeScreenshot aplicaciones

Usted puede extender su funcionalidad mediante la instalación de theChrome aplicación para escritorio. La extensión también permite videocapturing y el compartir, así que usted puede colaborar con otros desarrolladores ordesigners cuando se trabaja en cualquier sitio.

Usted puede añadir más imágenes a un screenshotas así como azul o borrar elementos que prefiere no mostrar a los demás.

9. Borrar Caché

 blank

Borrar Caché de Chrome Es una Extensión rápida andsimple herramienta que le permite borrar las cookies y la memoria caché de la página que’relooking en. Se elimina la necesidad de desplazarse a la página de configuración de yourbrowser con el fin de despejar un par de simples elementos de la página.

Para los diseñadores web que están haciendo multipleedits y desean verlos en tiempo real, esta es una excelente herramienta que willeliminate gran parte de la frustración de ver los datos antiguos.

Hay momentos en que usted necesita para limpiar su cacheand cookies, pero navegar a la configuración de Chrome es tedioso. Borrar Caché permite youerase su caché, así como global o local cookies con el clic de un botón.

Borrar Caché le permite configurar whichelements desea eliminar de la página. Las Variables incluyen dinero en Efectivo, descargas,todos los sistemas, form-data, en Efectivo, el índice de la base de datos, con el plugin de datos, contraseñas andmore.

10. En la Web de Desarrolladores de Google ChromeExtension

 blank

La Web de Desarrolladores de Google Chrome Extensionallows desarrolladores y diseñadores para auditar fácilmente, analizar y comprobar sus páginas web, por cualquier violación de las mejores prácticas de diseño, la codificación, la usabilidad y el buscador de optimización.

Es un gran todo-en-una herramienta que no es heavyon examinar nuestros recursos, pero ofrece un montón de información útil en la web designis también responsable de la optimización de motores de búsqueda de elementos dentro de un sitio web orpage.

Theextension instala la barra de herramientas con múltiples herramientas para desarrolladores web.

La herramienta le dará indicaciones sobre pagesize, la anchura y dimensiones que hacen que el conflicto con las mejores prácticas de uso de onmultiple dispositivos. Permite comprobar incrustado JavaScript y ver yourwebsite a través de una simulación de diferentes dispositivos.

La extensión funciona bien en Windows, Linuxand Mac OS. Además de la codificación y de los problemas de diseño, también provideinsights en información de la etiqueta meta, los encabezados de respuesta, la información de color, andtopographic información.

Usted puede revisar las principales características de la herramienta así como todas las capacidades de desarrollador
Chris Pedericks sitio web.

No hay duda de que hay una gran cantidad de otros de alta calidad y útil extensiones de Chrome que son de diseñador web o desarrollador coulduse.

Esta lista muestra algunos de los más popularand herramientas útiles. ¿Tienes alguna recomendación para las herramientas que usted piensa que yo’mmore útil o superior a los de esta lista? Háganos saber.

Dejar respuesta

Please enter your comment!
Please enter your name here