Las mejores extensiones de Google Chrome para desarrolladores WordPress

Las mejores extensiones de Google Chrome para desarrolladores WordPress

• Etiquetas: contenido, correo, diseño, navegación, optimización, posicionamiento, programación, responsive, seguridad, seo, web móvil, website, wordpress

Como desarrollador web quieres estar seguro de que lo que has diseñado se pueda adaptar a cualquier dispositivo y navegador. Google Chrome, como el navegador más utilizado, debería ocupar el primer lugar dentro de ese checklist.

Con ese fin, hemos reunido una lista de extensiones Chrome útiles para desarrolladores, que creemos necesarias para poder evaluar en este navegador la funcionalidad de tus sitios.

Para la edición del contenido

WordPress Admin Bar Control

Seguramente alguna vez te ha molestado esa barra de administración de WordPress que aparece (en la parte superior) cuando intentas ver la interfaz de tu sitio, bloqueando componentes importantes que deseas apreciar en una vista previa.

Pues bien, esta extensión hace una sola cosa, pero lo hace bien. Puede ocultar esa barra de administración cuando haces clic en su icono junto a la barra de direcciones. Es una forma súper rápida de ver lo que te estás perdiendo, sin tener que recurrir a cerrar sesión, abrir una ventana de incógnito o reconfigurar opciones en tu usuario wordpress.

WordPress Site Manager

Esta extensión de Chrome almacena información de tu WordPress y permite un acceso rápido y fácil a la edición de las páginas principales.

Una vez que ingresas los datos de inicio de sesión de tu administrador wordpress, puedes acceder a las rápidas tareas que te permite ejecutar esta extensión: editar páginas principales, agregar sitios a tu red, hacer ajustes a temas, y otros cambios básicos.

Grammarly

Grammarly es una extensión que no solo te ayuda a identificar con precisión los errores ortográficos (con un subrayado rojo), sino que también señala los gramaticales (con un subrayado verde).

La característica más útil es cómo muestra cómodamente sugerencias de corrección cuando pasas el cursor sobre el error en cuestión. Simplemente presionas en la sugerencia que deseas utilizar, y de manera automática reemplazarás la(s) palabra(s) o texto original.

No sólo funciona con wordpress, sino con cualquier texto que tengas en pantalla: posts de redes sociales, correos electrónicos que estés editando online, etc etc.

Para el diseño y estética

ColorZilla

¿Alguna vez has estado navegando por un sitio del que te atraen sus colores?, pues ColorZilla hace que sea realmente fácil encontrar el código hexadecimal para cualquier color que tengas visible en pantalla.

Con más de 5 millones de descargas y 1,3 millones de usuarios, ColorZilla es una de las extensiones de Google Chrome más populares.

Todo lo que tienes que hacer es agarrar el ícono del gotero, colocar el cursor sobre el color, y luego hacer clic en él, para que puedas visualizar su código.

Fonts Ninja

Fonts Ninja identifica fuentes de cualquier sitio web, por lo evitará tengas los pelos de punta pensando “¿cuál es esa fuente?” 😊.

Pasa el cursor sobre cualquier texto para obtener el nombre de la fuente y las propiedades CSS. La ventana de extensión principal también mostrará un resumen de todas las fuentes utilizadas en el sitio web visitado.

QR Code Generator

El generador de códigos QR es muy útil y tiene una alta calificación. Convierte la página visitada en un código QR, con un simple click. 

Las características claves incluyen: modo oscuro automático, capacidad de descargar el código QR como una imagen, posibilidad de crear un código QR personalizado con el logotipo, compatibilidad con teclas de acceso rápido, y más.

Nimbus

Nimbus Screenshot & Screen Video Recorder es una herramienta muy útil y muy versátil.

Utiliza Nimbus Capture para tomar capturas de pantalla: completas o sólo una parte, e igualmente grabar videos de lo que tienes en pantalla o lo que ves con tu cámara web (si tienes una activa). Puedes agregar notas, recortar, incluir dibujos, flechas, cliparts o resaltar textos.

Esta extensión ofrece una increíble cantidad de opciones. Estas son solo algunas, adicionales a las capturas de pantalla y video:

• Personaliza la resolución y la velocidad de fotogramas de la pantalla de video
• Comparte capturas de pantalla a través de un enlace
• Envía capturas de pantalla a Slack, o súbelas a Google Drive y Google Classroom
• Guarda capturas de pantalla en un PDF

Page Ruler Redux

Page Ruler Redux es una herramienta que te permite obtener mediciones perfectas en píxeles de elementos web, para el desarrollo de cualquier tarea que requiera tengas las medidas precisas de ciertos elementos visibles en pantalla (imágenes de redes sociales, por ejemplo).

WordPress Theme Detector and Plugin Detector

El Detector de temas de WordPress y el Detector de plugins pueden precisamente: detectar el tema y plugins que está usando el sitio wordpress que tienes en pantalla.

Haciendo click en Tema usado en / mostrar más del menú desplegable del ícono de extensiones, verás incluso ejemplos de otros sitios que usan el mismo tema detectado.

Otra pequeña (pero útil) característica interesante: al usar la extensión su icono se vuelve azul si detecta un sitio WordPress, gris si no lo hace.

Productividad y Organización

Asana

Sirve para agregar tareas mientras examinas una web: asignar miembros del equipo, espacios de trabajo y descripciones. Es la herramienta perfecta para ayudar a mantenerte organizado y concentrado en tus tareas.

Evernote Web Clipper

Con la extensión Evernote Web Clipper puedes guardar páginas web completas, partes específicas de su contenido, realizar (y compartir) capturas de pantalla (agregándoles notas, marcas e imágenes), guardar documentos PDF, y más; todo esto dentro de “cuadernos” que organizas como tú quieras.

Toggl Track

La extensión Toggl Track pone un temporizador en cualquier herramienta web, lo que te permite un seguimiento rápido de la productividad en tiempo real, con todos los datos almacenados en tu cuenta de Toggl.

Ya sea que uses Trello, Slack, Asana, Todoist, Jira, Notion o una de las más de 100 herramientas integradas, esta extensión te permite rastrear el tiempo de ejecución de las tareas programadas en esas aplicaciones.

OneTab

Todos en algún momento nos hemos encontrado con demasiadas pestañas abiertas, donde el revoltijo se vuelve confuso y sobre todo se consume drásticamente la memoria disponible en tu equipo.

¿La solución?: OneTab, ahorra hasta un 95% de memoria y reduce el desorden de pestañas. Simplemente haces click en el icono de la extensión para convertir todas tus pestañas en una lista. Cuando necesites acceder a las pestañas nuevamente, puede restaurarlas de forma individual o todas a la vez.

HubSpot Sales

Con esta extensión podrás realizar tareas de marketing, servicio y operaciones como: programar correos electrónicos, hacerles seguimiento, registrar mensajes desde tu CRM a Gmail y compartir plantillas de correo electrónico con tu equipo, utilizando las herramientas de productividad de ventas de Hubspot. También puedes reservar reuniones, que se sincronizarán a través de tu calendario de Google. Incluso tiene aplicaciones móviles, tanto para iOS como para Android.

Rendimiento del sitio web

SimilarWeb

Similarweb es la última herramienta de inteligencia digital competitiva para una vista completa de 360 ​​grados de tu industria, competidores y clientes.

Accede a las métricas claves de cualquier sitio web, incluida la tasa de participación, la clasificación y origen del tráfico, keywords, etc.

La extensión Similarweb te proporciona toda la utilidad del sitio similarweb.com, directamente en la barra de herramientas de tu navegador. Con un solo click puedes obtener estadísticas detalladas de cualquier sitio web que tengas en frente.

app.telemetry

App.telemetry facilita una prueba rápida de la velocidad de carga de tu sitio, indicándote -además de los tiempos de carga- dónde puedes mejorar.

Algunos de los valores que puedes visualizar incluyen: redireccionamientos, caché, búsqueda de DNS y eventos de carga. Si bien no muestra estadísticas detalladas, es una gran solución si necesitas una forma rápida de verificar el progreso de tu sitio, mientras está en desarrollo.

Lista de verificación para desarrolladores web

Una de las herramientas más útiles para los desarrolladores es sin duda la extensión de Google Chrome de Toptal: analiza y verifica tu página web en búsqueda de violaciones importantes. Revisa SEO, usabilidad, accesibilidad y rendimiento (velocidad de la página), entre otros.

Open SEO Stats

Open SEO Stats (anteriormente llamado PageRank Status), te ayuda a obtener una instantánea de la posición de tu sitio en Internet, al mostrarte los rangos de la página en Alexa, Google, Compete y Quantcast.

También tiene la capacidad de mostrar información de WHOIS y la cantidad de páginas que están indexadas en los motores de búsqueda (incluidos Google, Bing y Yahoo).

Además, muestra estadísticas de caché (Archive.org, Google), información de backlinks, redes sociales, ubicación geográfica de IP y más.

Ubersuggest – SEO e ideas de palabras clave

Ubersuggest ofrece una forma rápida de obtener una descripción general del SEO de los sitios web que estás visitando, junto con las keywords que los rankean.

Una vez instalado, vas a Google, YouTube o Amazon, y realizas una búsqueda. Allí es donde verás datos sobre las palabras clave y los términos de búsqueda que estás usando.

La extensión de Ubersuggest SEO también tiene gráficos y tendencias, datos de backlinks, palabras clave relacionadas, “la gente también busca”, palabras clave de tendencia, junto con personalización de tu ubicación e idioma.

Lighthouse

Si deseas conocer el rendimiento promedio de algunos otros sitios web de terceros, aquí es donde la extensión para desarrolladores de Lighthouse resulta útil.

Al auditar una página, Lighthouse ejecuta una serie de pruebas en ella y luego genera un informe, sobre qué tan bien le fue a la página. 

Tag Assistant for Conversions Beta (de Google)

Tag Assistant for Conversions Beta ayuda a validar las conversiones de Google Ads en tu sitio web.

Tag Assistant te permite seguir todo el recorrido que hace un usuario desde que llega a tu página, navega por el sitio y finalmente hace click en algún anuncio.

Este análisis destacará posibles problemas o configuraciones incorrectas, y te permitirá saber cuándo sí y cuándo no se está registrando correctamente la conversión.

Desarrollo WordPress

Plugins de WordPress.org Enlace SVN

Esta no es su extensión típica: no aparece un botón en la parte superior de tu navegador. En su lugar (una vez que instalas la extensión), se muestra un botón adicional en las páginas del directorio de plugins de WordPress, llamado: SVN Repository o Repositorio SVN. Presionando en este botón consultas anticipadamente el código del plugin en cuestión.

Podrás echar un vistazo debajo del capó y ver la calidad del código antes de decidir descargar el plugin. Teniendo la oportunidad de detectar códigos inflados o maliciosos, antes de instalar el plugin, lo que te ayudará a evitar un desastre antes de que ocurra.

Administrador de MySQL

Esta extensión para desarrolladores de Google Chrome te facilita la administración de tu base de datos MySQL, proporcionándote la GUI de administración del servidor MySQL -similar a phpMyAdmin- : Sequel Pro.

Las características de MySQL Admin incluyen:

• Conexión al servidor MySQL (4.1 o posterior), vía SSL o a través del reenvío de puertos SSH2.
• Mostrar las estadísticas y la lista de procesos del servidor conectado, la lista de la tabla y las filas de la tabla seleccionada.
• Crear y soltar tablas, insertar y actualizar filas.
• Exportación de bases de datos.

Link Redirect Trace

Link Redirect Trace se creó para reemplazar todas las demás extensiones de “resultados parciales”, es el analizador de rutas de redireccionamiento todo en uno, que te brinda una imagen completa de cada uno: encabezados HTTP, Rel-Canonicals, robots.txt, poder de enlace, confianza y riesgo.

Realiza un análisis avanzado, completo y, lo más importante, correcto de enlaces, redireccionamientos y REL-canónicos. Utiliza esta extensión para análisis de SEO: SEO en la página, SEO fuera de la página, análisis de la competencia y más.

CSS Peeper

Inspecciona estilos de una manera simple y bien organizada con CSS Peeper.

¿Necesitas saber la altura de una línea, la fuente o el tamaño de un botón? Verifica fácilmente el estilo CSS de objetos, colores y demás elementos en la web visitada, usando esta extensión.

Web Developer

Con casi un millón de usuarios y una calificación de 4.5 estrellas, es seguro decir que Web Developer es una de las mejores extensiones de Google Chrome para desarrolladores.

Esta extensión agrega una pequeña barra con varias herramientas de desarrollo web relacionadas con: imágenes, información, cambio de tamaño, formularios y mucho más.

Clockwork

Clockwork proporciona un conjunto de herramientas para desarrolladores de PHP. Maneja un panel con toda la información necesaria para depurar y crear perfiles de scripts PHP, incluidos los datos de solicitud, el registro de la aplicación, las consultas de la base de datos, las rutas, y la visualización del tiempo de ejecución de la aplicación.

Clockwork utiliza un componente del lado del servidor que recopila todos los datos relevantes y se integra fácilmente con cualquier proyecto PHP. Incluye soporte para aplicaciones basadas en Laravel, Slim 2 y CodeIgniter 2.1.

XDebug Helper

Esta extensión de Google Chrome ayuda a depurar, perfilar y rastrear el código PHP en lugar de luchar con las variables POST / GET o las cookies.

XDebug Helper es muy útil para los desarrolladores de PHP que utilizan herramientas con soporte Xdebug (como PHPStorm, Eclipse con PDT, Netbeans y MacGDBp) o cualquier otra herramienta de creación de perfiles compatible con Xdebug (como KCacheGrind, WinCacheGrind o Webgrind).

Importante: debe estar en modo Desarrollador (en chrome: // extensions / page) para que esto funcione.

Wappalyzer

Wappalyzer es una extensión de Google Chrome que permite a los desarrolladores identificar las diversas tecnologías que componen el back-end de un sitio web.

Es una utilidad de código abierto y multiplataforma que puede detectar más de 1000 tecnologías, incluidos sistemas de gestión de contenido, plataformas de comercio electrónico, frameworks, software de servidor, herramientas de análisis y más.

Window Resizer

Ahora es más importante que nunca que los desarrolladores prueben los sitios web para el diseño responsive; aquí es donde entra en juego Window Resizer.

Esta extensión de Google Chrome cambia el tamaño de la ventana del navegador para que puedas probar tu diseño en función de varias resoluciones. Los tamaños de pantalla más comunes están disponibles (para computadora portátil, computadora de escritorio y móvil), pero también puede ingresar tus propios tamaños de ventana personalizados.

Tab Resize

Muchas veces puede resultar muy útil dividir la pantalla entre varias ventanas, ya sea para copiar el contenido o incluso para seguir un tutorial. Con esta extensión, puedes dividir la pantalla entre cuatro ventanas, o entre dos, vertical y horizontalmente.

También tienes las opciones de “pestaña vacía”, que crea automáticamente otras pestañas vacías, o “pestaña única”, que cambia solo la pestaña actual. Con Tab Resize dividir la pantalla es sumamente fácil.