Hay unas 30 extensiones instaladas en mi navegador que simplifican la vida y el trabajo en Internet. En este artículo quiero compartir 10 extensiones relevantes de Google Chrome para la máquina de escribir que uso constantemente cuando desarrollo sitios.
1. PerfectPixel
Un ejemplo del uso de PerfetPixel al desarrollar nuevos bloques en www.wrike.com
El diseño del sitio de píxel a píxel causa dificultades tanto para principiantes como para profesionales experimentados. PerfectPixel superpone la imagen de diseño en la parte superior del diseño en el navegador. En la configuración de expansión, puede ajustar la transparencia y el diseño del diseño, lo que le permite tener en cuenta todos los tamaños y sangrías necesarios. El uso de este complemento simplificará el diseño y reducirá el número de ediciones al enviar un proyecto. En mi conjunto de extensiones, PerfectPixel ocupa el primer lugar debido a su funcionalidad y facilidad de uso.
Enlace para instalar la extensión
2. Wappalyzer
Estudio de caso de Wappalyzer en collaborate.wrike.com/2019/london
Siempre es interesante qué herramientas y tecnologías se utilizan en los sitios. Wappalyzer proporciona información sobre CMS, marcos JS, bibliotecas CSS, herramientas de análisis y mucho más. Imagine que la animación en el sitio es una biblioteca CSS gratuita que puede usar en su proyecto. Esto reducirá el tiempo de búsqueda de la herramienta necesaria y estará al tanto de las tecnologías que utiliza el sitio.
Enlace para instalar la extensión
3. HTML5 Outliner
Jerarquía de encabezados en habr.com/en/company/wrike
HTML 5 Outliner muestra una lista de encabezados en una página del sitio. La extensión ayuda a estructurar encabezados e identificar violaciones en la jerarquía. Por ejemplo, en la sección de etiqueta HTML 5 Outliner muestra una advertencia sobre la ausencia de la etiqueta h2 . Esta es una de las formas rápidas y convenientes para determinar el uso correcto de los encabezados en el diseño.
Enlace para instalar la extensión
4. Wireframify
Estudio de caso de Wireframify en www.wrike.com
Los diseñadores diseñan sitios utilizando una estructura metálica: un conjunto de líneas, bloques y firmas. Este enfoque le permite crear una arquitectura de proyecto basada en la sangría, el tamaño y la ubicación de los bloques en la página. Wireframify incluye una forma alternativa del sitio en forma de estructura metálica, que evitará el uso erróneo:
- margen negativo
- alineación de elementos usando relleno;
- sangría usando las propiedades CSS izquierda, derecha;
Enlace para instalar la extensión
5. PageLiner
Estudio de caso de PageLiner en www.wrike.com/apps
En el editor de gráficos, puede alinear los elementos o mostrar la cuadrícula del sitio mediante líneas guía. El tipógrafo puede habilitar esta funcionalidad en el navegador usando PageLiner . La extensión muestra guías similares, como en el mismo Adobe Photoshop. Con PageLiner, alinear elementos es mucho más fácil.
Enlace para instalar la extensión
6. Desarrollador web
Lista de características del desarrollador web
Web Developer agrega una barra de herramientas adicional al navegador. En su interior hay 10 pestañas: Desactivar, Cookies, CSS, Formularios, Imágenes, Información, Varios, Esquema, Cambiar tamaño y Herramientas. La funcionalidad de extensión le permite:
- deshabilitar CSS, JS e imágenes;
- verificar la validez de HTML, CSS;
- manipular estilos CSS;
- Probar formularios HTML
- mostrar las metaetiquetas de información necesarias;
- Cambiar el tamaño de la ventana del navegador
- borrar el caché;
Web Developer sigue siendo una extensión popular entre los desarrolladores. Se puede comparar con la herramienta múltiple en la vida real: siempre tiene a mano el conjunto de herramientas necesario.
Enlace para instalar la extensión
7. CSS del usuario
Ejemplo de CSS de usuario en www.wrike.com/customers
Imagine que desea corregir CSS directamente en el navegador, pero después de eso tuvo que volver a cargar la página. Todos sus logros han desaparecido y debe realizar cambios nuevamente. Use CSS de usuario , que guardará sus estilos. No te preocupes más por la desaparición de CSS. La funcionalidad de la extensión le permitirá probar el CSS escrito cuando se mueva a otras páginas.
Enlace para instalar la extensión
8. StyleURL
Estudio de caso de StyleURL en Wrike www.wrike.com/customers
El CSS del usuario no reemplazará el panel de desarrollador del navegador. Si está acostumbrado a trabajar en devtools y al mismo tiempo no desea perder los cambios después de actualizar el navegador, instale StyleURL . La extensión recordará sus cambios y proporcionará la capacidad de guardar el trabajo en un archivo separado o subirlo a Github Gist.
Enlace para instalar la extensión
9. Siteimprove Accessibility Checker
Estudio de caso de Siteimprove Accessibility Checker en www.wrike.com/newsroom
Siteimprove Accessibility Checker es una herramienta que verifica el cumplimiento de HTML con los estándares de accesibilidad para proporcionar acceso al contenido para todos. La extensión muestra errores con información detallada. En la descripción para ellos, puede encontrar notas al pie de página de WCAG 2 y enlaces directos a artículos detallados sobre accesibilidad.
Enlace para instalar la extensión
10. Tabsbook
Ejemplo de Tabsbook
Cada uno trabaja con marcadores a su manera. Hay quienes guardan enlaces para acceder rápidamente a los sitios y quienes usan marcadores para almacenar información útil. Con Tabsbook puedes convertir tus marcadores en una base de conocimiento. La interfaz de extensión muestra una estructura de carpetas en forma de árbol para facilitar la navegación de sus marcadores. Todos los datos se almacenan en la nube, lo que le permite acceder a ellos desde cualquier dispositivo.
Enlace para instalar la extensión
Las extensiones serán útiles para todos los principiantes y profesionales experimentados que no los conocían. Escriba en los comentarios qué extensiones usa.
Se pueden encontrar extensiones de navegador más útiles en los 10 enlaces principales de complementos de Chrome para diseñadores y extensiones útiles de Google Chrome para el programador.