Aumente la productividad de su desarrollador web

Última actualización el 13 de octubre de 2020

Si te encanta hacer desarrollo web como a mí, debes saber la importancia de tener excelentes herramientas en tu navegador web que simplifiquen tu trabajo y aumenten tu productividad. Ese es el caso de Google Chrome y la oferta integral de Chrome Extensions que aumentará la productividad de su desarrollador web.

Sí, Firefox es un excelente navegador para el desarrollo web, y Firefox Developer Edition es fantástico para la depuración y prueba de CSS. Sin embargo, Chrome tiene una larga lista de extensiones de herramientas que brindan soporte para las últimas funciones web y herramientas para desarrolladores que lo convierten en el favorito entre muchos desarrolladores web para aumentar la productividad de los desarrolladores web.

Chrome Marketplace tiene algunas de las mejores extensiones, más antiguas o nuevas, para ayudar a los desarrolladores a desarrollar y probar un sitio web o una página de destino. A continuación, conocerá algunas de las mejores extensiones que sugiero como "imprescindibles" en su caja de herramientas de desarrollo web.

Extensiones de Chrome que aumentan la productividad de su desarrollador web

Asistente de etiquetas

Tag Assistant ayuda a solucionar problemas de instalación de varias etiquetas de Google, incluidos Google Analytics, Google Tag Manager, etc. Tag Assistant le permite verificar que ha instalado correctamente diferentes etiquetas de Google en su página. Simplemente navegue a cualquier página y Tag Assistant le dirá qué etiquetas están presentes, informará cualquier error que encontremos y sugerirá mejoras que se pueden realizar en su implementación. Se verifican la mayoría de las etiquetas de Google, incluidos Google Analytics, Seguimiento de conversiones de Adwords, Administrador de etiquetas de Google, etc.

lo que corre

Descubra qué ejecuta un sitio web: marcos, herramientas de análisis, complementos de WordPress, fuentes, lo que sea. La extensión WhatRuns está a un clic de distancia para que encuentre las tecnologías utilizadas en cualquier sitio web que visite. Detecta incluso las herramientas y servicios nuevos y futuros, desde herramientas para desarrolladores y redes publicitarias hasta complementos y temas de WordPress. No solo eso: puede seguir sitios web para recibir notificaciones cuando usen nuevas tecnologías o eliminen las existentes.

Herramientas de desarrollo de Vue.js

Su nombre es muy explícito. Es una extensión de Chrome y Firefox DevTools para depurar aplicaciones Vue.js. Le permite inspeccionar las jerarquías de componentes de Vue.js en las herramientas para desarrolladores de Chrome. Obtendrá una nueva pestaña en Chrome DevTools: "Vue".

Herramientas para desarrolladores de React

Como Vue.js Devtools, React Developer Tools es una extensión de Chrome y Firefox DevTools para la biblioteca React JavaScript de código abierto. Le permite inspeccionar las jerarquías de componentes de React en Chrome Developer Tools. Obtendrá dos nuevas pestañas en Chrome DevTools: "Componentes" y "Perfilador". La pestaña Componentes le muestra los componentes raíz de React que se representaron en la página y los subcomponentes que terminaron representando. Al seleccionar uno de los tres componentes, puede inspeccionar y editar sus propiedades y estado actuales en el panel de la derecha. En las migas de pan, puede inspeccionar el componente seleccionado, el componente que lo creó, el componente que lo creó, etc.

Impresionante visor JSON

Esta extensión lo ayuda a visualizar la respuesta JSON de cualquier sitio web o solicitud de API en su navegador. Te presenta increíbles experiencias JSON embellecedoras. Tiene muchas características únicas que lo hacen increíble. Ayuda a los desarrolladores a formatear o embellecer JSON y recorrer las propiedades en una vista gráfica. Tiene un gráfico amigable e interactivo que representa la respuesta de su servidor o su JSON proporcionado en la sección de entrada en la vista gráfica.

Inspector de META SEO

Útil para inspeccionar los metadatos que se encuentran dentro de las páginas web, generalmente no visibles durante la navegación. Los metadatos no son solo las metaetiquetas HTML habituales, sino también las etiquetas XFN, varios microformatos, el atributo canónico recientemente introducido, los enlaces sin seguimiento, etc. Esta extensión está dirigida principalmente a desarrolladores web que necesitan verificar el HTML de su sitio para siga las Directrices de Google para webmasters, pero incluso para aquellos que tengan curiosidad por los contenidos de las páginas que normalmente no son visibles pero que pueden revelar propiedades interesantes del sitio. También tiene una opción de impresión/exportación que le permite imprimir o guardar como PDF el informe o copiar/pegar los datos en su herramienta preferida.

Visor rápido de estilo HTML

Visor rápido de estilo de elemento HTML DOM. Simplemente mueva el mouse y mostrará los estilos del objetivo.

CSSViewer

CSSViewer es un visor de propiedades CSS simple para Chrome y Firefox. Para habilitar CSSViewer, haga clic en el icono de la barra de herramientas y luego coloque el cursor sobre cualquier elemento que desee inspeccionar en la página actual.

Fuentes Ninja

Identifique las fuentes de cualquier sitio web, márquelas, pruébelas y cómprelas. Analiza archivos de fuentes para obtener resultados más precisos. Pase el cursor sobre cualquier texto para obtener el nombre de la fuente y las propiedades CSS. La ventana principal de la extensión también mostrará un resumen de todas las fuentes utilizadas en un sitio web. Puede obtener más información sobre las fuentes. Consulta cuántos estilos hay disponibles, su fundición y precio.

Me encanta adaptativo: pruebas móviles/responsivas

Herramienta para probar sitios web receptivos. La extensión de Chrome ILOVEADAPTIVE agrega un botón a su barra de herramientas. Cuando hace clic en el botón, se abrirá la URL en la que se encuentra en la pestaña actual. Las características principales incluyen una vista previa de una URL en varios dispositivos a la vez, filtrar los dispositivos, filtrar el sistema operativo, cambiar su cantidad, hacer zoom, mostrar el panel ios, cambiar a paisaje y retrato.

Web vitales

Medir métricas para un sitio saludable. Web Vitals son señales de calidad clave para ofrecer una excelente UX en la web (https://web.dev/vitals). Esta extensión mide Core Web Vitals y proporciona comentarios instantáneos sobre la carga, la interactividad y las métricas de cambio de diseño. Es consistente con la forma en que Chrome mide estas métricas y las informa a otras herramientas de Google.

Redux de regla de página

Una regla de desarrollador web/diseñador para obtener dimensiones de píxeles perfectas y posicionamiento para medir elementos en cualquier página web. Page Ruler Redux es una herramienta central de diseño y desarrollo web que le permite obtener medidas perfectas de píxeles de elementos web. Está diseñado para el desarrollo de front-end de sitios web, diseño web o cualquier tarea que pueda necesitar para obtener medidas de píxeles perfectas de cualquier elemento web.

Regla de cuadrícula

Crea cuadrículas y mide su distancia fácilmente. Te permite crear cuadrículas verticales y horizontales, estilo Photoshop. También tiene una regla para medir la distancia entre sus cuadrículas.

Esbozalo

Esta extensión describe cada elemento HTML en una página web, permitiéndole ver los bordes de los elementos. La extensión admite todos los colores del arcoíris (rojo, naranja, amarillo, verde, azul, índigo y violeta). También tiene la funcionalidad de eliminar el contorno después de que se haya aplicado.

Emulador de navegador móvil

Pruebe páginas web móviles y receptivas en su escritorio. Selecciona las resoluciones de pantalla de móvil más habituales con un solo clic de ratón. La página de la pestaña activa se abrirá en una ventana separada.

Bueno, esa es mi lista de extensiones de Chrome que sugiero que debe tener en su navegador Chrome para aumentar la productividad de su desarrollador web. Sí, sí... Hay otras extensiones útiles y geniales que no he incluido en la lista anterior. Pero, cuando llegue el momento, continuaré explorando otras extensiones fantásticas que probablemente se incluirán en un blog futuro.