Clicky

Las mejores extensiones de Chrome para profesionales Web

Chrome DevTools

Las Chrome DevTools ya proporcionan una gran cantidad de funcionalidad integrada

No es ningún secreto que los diseñadores y desarrolladores web adoran el navegador Google Chrome y sus extensiones. La potencia de las Herramientas para Desarrolladores de Chrome lo convierten en una excelente opción para el desarrollo y diseño web. Las Chrome DevTools proporcionan una gran cantidad de funcionalidad integrada, pero si todavía piensa que falta algo, las extensiones de Chrome pueden llenar el vacío.

Extensiones Chrome: Pros y Contras

El único gran inconveniente para las extensiones Chrome no nativas es que la calidad y la usabilidad pueden ser bastante inconsistentes. He usado un montón de extensiones de Chrome en los últimos años y también miré detenidamente hoy a través de la Chrome Web Store para ver si había alguna que me había perdido. Me encontré con que muchas extensiones de Chrome no funcionan o duplican la funcionalidad ya presente en las Chrome DevTools (y como resultado han sido abandonadas). También me encontré con un montón de interfaz de usuario inconsistentes. Aun así, todavía hay algunas extensiones que creo que son muy útiles en la construcción de sitios web.

Web Developer

Antes de la primera versión de Google Chrome la mayoría de los diseñadores y desarrolladores web utilizaban Firefox. Al igual que Chrome, Firefox también tiene un montón de complementos externos. Una de las extensiones más populares de Firefox fue llamada simplemente 'Web Developer'. En años posteriores, esta herramienta se ha presentado en Chrome y todavía está llena de una increíble cantidad de útiles funciones.

Web Developer

Es difícil escoger sólo una de las características de Web Developer, pero utilizo con bastante frecuencia la pestaña Outline al depurar CSS. Puede ser muy útil para resaltar elementos en función de cómo están posicionados en la página.

Instalar Web Developer

BuiltWith

BuiltWith es una extensión con un propósito muy sencillo. Si eres curioso acerca de las tecnologías web que se utilizaron para crear un sitio, puedes hacer clic en el botón BuiltWith para ver una lista desplegable de servidores, marcos y más.

BuiltWith

BuiltWith no siempre funciona a la perfección, por lo que si realmente necesitas saber cómo se construye un sitio, asegúrate de hacer un poco de seguimiento de la investigación de la cuenta con una herramienta más robusta (como las Chrome DevTools). Sin embargo, todavía puede ser una forma rápida para satisfacer la curiosidad y señalar tu búsqueda en la dirección correcta.

Instalar BuiltWith

JSONView

De forma predeterminada Chrome no hace un gran trabajo de formato con los archivos JavaScript Object Notation (JSON) cuando son vistos en una pestaña. Esto puede no parecer importante, pero si una aplicación web está construida con mucho JSON, a menudo se necesita mirar los datos JSON para fines de depuración.

JSONView

Con la extensión JSONView instalada, JSON se formateará muy bien, por lo que es mucho más fácil de leer.

Instalar JSONView

PageSpeed Insights

PageSpeed "‹"‹Insights es en realidad una extensión nativa de Chrome porque está construida por Google. A diferencia de otras extensiones que toman la forma de botones en la barra de herramientas, esta extensión agrega una pestaña en las Chrome DevTools.

PageSpeed Insights

Algunas de las funcionalidades que ofrece PageSpeed "‹"‹se duplican en el panel DevTools Audits. Sin embargo, si una página web no puede cargar demasiado rápido, usando un segundo método para acelerar los tiempos de carga de páginas puede ayudar a identificar problemas que podrían no encontrarse con otra cosa.

Instalar PageSpeed Insights

Responsive Inspector

La extensión Responsive Inspector fue creada por un desarrollador de Adobe como un proyecto paralelo. Esta extensión tiene aplicadas las preguntas de los medios de las hojas de estilo y las presenta en un gráfico interactivo.

Responsive Inspector

Al hacer clic en cualquiera de los bars resaltados en la tabla se redimensionará el navegador con el tamaño de esa consulta de medios específicos para que pueda verse lo que parece el punto de corte. También se puede hacer clic en el botón circular de código en el lado derecho para ver la consulta de medios en su contexto.

Instalar Responsive Inspector

Otras a tener en cuenta

Chrome Sniffer
Window resizer
Snip It
Colorzilla

¿Me he perdido algo?

Extensiones Chrome de alta calidad pueden ser difíciles de encontrar. Si me perdí alguna sin la que tú no puedes vivir, házmelo saber en los comentarios.

Jesus_Caceres