Inicio Rapido
aGoDevTools es un toolkit completo para desarrolladores web. Inspecciona, edita, captura, depura, analiza y optimiza cualquier sitio web — todo desde una sola extension de Chrome.
Instalacion
- Instala aGoDevTools desde la Chrome Web Store
- Haz clic en el icono de la extension en la barra de herramientas
- Selecciona cualquiera de las 12 herramientas disponibles
Primeros Pasos
- Abre el panel — Haz clic en el icono de aGoDevTools en la barra del navegador
- Elige una herramienta — Cada herramienta tiene su propio boton en el panel
- Usa atajos de teclado —
Alt+I para Inspector, Alt+P para Color Picker, Alt+C para Screenshots y mas
Tip: Aprende los atajos de teclado para un flujo de trabajo mas rapido. Cada herramienta principal tiene su propio atajo Alt+tecla.
Inspector Alt+I
El Inspector te permite examinar cualquier elemento de la página en detalle. Pasa el cursor sobre los elementos para resaltarlos y haz clic para ver toda su informacion.
Funcionalidades
- Hover para resaltar — Mueve el cursor sobre cualquier elemento para ver sus dimensiones y limites
- Estilos computados — Haz clic en un elemento para ver colores, tipografía, espaciado y mas
- Informacion de accesibilidad — Revisa atributos ARIA y contraste de colores
- Edicion en vivo — Modifica cualquier valor CSS directamente y ve los cambios al instante
- Copiar selector — Copia el selector CSS del elemento con un clic
- Copiar estilos — Copia todos los estilos computados o solo tus cambios como CSS limpio
- Resetear cambios — Vuelve al estado original en cualquier momento
Edicion en vivo: Los cambios que hagas con el Inspector son temporales y se pierden al recargar la página. Para cambios persistentes, copia el CSS generado y agregalo a tu hoja de estilos.
Color Picker Alt+P
Selecciona colores de cualquier pixel de la página con precision. Incluye un magnificador 10x para selección exacta de pixeles.
Como Usar
- Activa el Color Picker con
Alt+P o desde el panel - Mueve el cursor sobre la página — veras el magnificador 10x
- Haz clic en el pixel deseado para capturar el color
- El color se muestra en tres formatos: HEX, RGB y HSL
- Haz clic en cualquier formato para copiarlo al portapapeles
Tip: El magnificador 10x facilita seleccionar el pixel exacto, especialmente en gradientes o bordes finos.
Screenshots Alt+C
Captura screenshots con 4 modos diferentes, adaptados a cualquier necesidad de documentacion o reporte.
Modos de Captura
| Modo | Descripcion |
|---|
| Visible Tab | Captura instantanea de lo que se ve en pantalla |
| Full Page | Captura la página completa mediante auto-scroll stitching |
| Selected Element | Haz clic en cualquier elemento para capturarlo individualmente |
| Selected Area | Arrastra para seleccionar una region rectangular personalizada |
Full Page: El modo de página completa hace scroll automático y une las capturas para generar una imagen completa del sitio, sin importar su largo.
Responsive Viewer
Previsualiza tu sitio en multiples dispositivos simultaneamente. Verifica como se ve en diferentes resoluciones sin salir de tu navegador.
Dispositivos Incluidos
- iPhone — Modelos populares de iPhone
- iPad — iPad y iPad Pro
- Galaxy — Samsung Galaxy series
- Pixel — Google Pixel
- Desktop — Resoluciones de escritorio comunes
Tamanos Personalizados
Agrega tus propias dimensiones personalizadas para probar cualquier resolucion especifica que necesites.
SEO Analyzer
Auditoría SEO instantanea de cualquier página. Identifica problemas y oportunidades de optimización en segundos.
Elementos Analizados
| Elemento | Que Verifica |
|---|
Title | Presencia, longitud y contenido del titulo de la página |
Meta Description | Presencia y longitud de la meta descripcion |
Headings | Estructura de encabezados H1/H2, jerarquia correcta |
Images | Imagenes sin atributo alt para accesibilidad |
Open Graph | Tags OG para redes sociales (og:title, og:image, etc.) |
Canonical | URL canonica para evitar contenido duplicado |
Structured Data | Schema.org y datos estructurados JSON-LD |
Viewport | Meta viewport para responsividad movil |
Assets y Performance
Assets Panel
Explora todos los recursos cargados en la página, organizados por tipo.
- Imagenes — JPG, PNG, SVG, WebP, GIF
- Scripts — Archivos JavaScript
- CSS — Hojas de estilo
- Media — Video y audio
- Documentos — PDFs, Word, Excel y otros archivos
Descarga recursos individualmente, selecciona varios, o descarga todos de una vez.
Performance Metrics
Metricas de rendimiento en tiempo real, todas con indicadores de color para identificar rapidamente problemas.
| Metrica | Descripcion |
|---|
First Paint | Tiempo hasta el primer renderizado visual |
FCP | First Contentful Paint — primer contenido visible |
DOM Interactive | Tiempo hasta que el DOM está listo para interacción |
TTFB | Time to First Byte — tiempo de respuesta del servidor |
DOM Nodes | Cantidad total de nodos en el DOM |
Resources | Numero de recursos cargados |
Transfer Size | Tamano total transferido por la red |
Layout Tools
Ruler y Guides Alt+R
Reglas horizontales y verticales con marcas cada 10, 50 y 100 pixeles. Ideales para verificar alineacion y dimensiones de elementos en la página.
Grid Overlay
Superpone una grilla de 12 columnas con linea base de 8px sobre la página. Perfecta para verificar que tu disenio respeta el sistema de grilla y el ritmo vertical.
Spacing Visualizer
Pasa el cursor sobre cualquier elemento para visualizar su espaciado:
- Amarillo — Margin (espacio exterior)
- Cyan — Padding (espacio interior)
Identifica rapidamente inconsistencias de espaciado sin necesidad de abrir DevTools.
Font Detector y Code Editor
Font Detector
Lista todas las fuentes utilizadas en la página con informacion detallada:
- Nombre de la fuente y familia tipografica
- Pesos (weights) utilizados
- Tamanos en uso
- Colores aplicados
Code Editor
Inyecta CSS o JavaScript personalizado en la página en tiempo real. Los cambios se aplican al instante, ideal para:
- Prototipar cambios de estilo rapidamente
- Probar correcciones de bugs visuales
- Experimentar con animaciones y transiciones
- Depurar comportamientos con scripts personalizados
Nota: Los cambios inyectados son temporales y se pierden al recargar la página. Copia tu codigo antes de recargar si deseas conservarlo.
Atajos de Teclado
Accede rapidamente a las herramientas principales sin necesidad de abrir el panel de la extension.
| Atajo | Herramienta | Descripcion |
|---|
Alt+I | Inspector | Activar/desactivar el inspector de elementos |
Alt+P | Color Picker | Activar el selector de color con magnificador |
Alt+C | Screenshots | Abrir el menu de captura de pantalla |
Alt+R | Ruler & Guides | Mostrar/ocultar reglas y guias |
Tip: Los atajos funcionan en cualquier página web mientras la extension este activa. No necesitas abrir el panel primero.
Privacidad y Permisos
100% Local
aGoDevTools funciona completamente en tu navegador. No se recopilan, almacenan ni envian datos a ningun servidor externo.
- Sin tracking — No hay analytics, telemetria ni cookies de terceros
- Sin cuenta — No necesitas registrarte ni iniciar sesion
- Sin red — Todas las herramientas funcionan offline (excepto cargar la página a inspeccionar)
- Codigo abierto — Puedes inspeccionar exactamente que hace la extension
Permisos de Chrome
La extension solicita permisos minimos necesarios para funcionar:
activeTab — Para interactuar con la página actual cuando activas una herramientascripting — Para inyectar las herramientas de inspeccion en la página
Preguntas Frecuentes
Es gratis?
Si. aGoDevTools es completamente gratuita y sin limitaciones. Todas las 12 herramientas están disponibles desde el primer momento.
Funciona en cualquier sitio web?
Si. Funciona en cualquier sitio web publico. Algunas páginas internas del navegador (chrome://, about:) tienen restricciones de seguridad que impiden la inyección de scripts.
Los cambios que hago con el Inspector son permanentes?
No. Todos los cambios son temporales y se pierden al recargar la página. Para guardarlos, usa la funcion "Copiar cambios como CSS" y agregalos a tu hoja de estilos.
Puedo usar la extension sin conexión a internet?
Si. Todas las herramientas funcionan localmente en tu navegador. Solo necesitas conexión para cargar la página web que quieres inspeccionar.
La extension recopila mis datos?
No. aGoDevTools es 100% local. No se recopila, almacena ni envia ningun dato a servidores externos. Sin tracking, sin analytics, sin cookies de terceros.
El screenshot de página completa no funciona bien. Que hago?
El modo Full Page usa auto-scroll stitching, que puede tener problemas con sitios que tienen elementos sticky o animaciones en scroll. Prueba desactivar elementos sticky temporalmente o usa el modo "Selected Area" como alternativa.
Puedo personalizar los dispositivos del Responsive Viewer?
Si. Ademas de los dispositivos predefinidos (iPhone, iPad, Galaxy, Pixel, Desktop), puedes agregar tamanos personalizados con las dimensiones exactas que necesites.
Necesitas ayuda?
Contactanos en ago.cl/contacto o escribe a hola@ago.cl.
