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 pagina 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, tipografia, 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 pagina. 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 pagina con precision. Incluye un magnificador 10x para seleccion exacta de pixeles.
Como Usar
- Activa el Color Picker con
Alt+P o desde el panel - Mueve el cursor sobre la pagina — 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 pagina 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 pagina completa hace scroll automatico 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
Auditoria SEO instantanea de cualquier pagina. Identifica problemas y oportunidades de optimizacion en segundos.
Elementos Analizados
| Elemento | Que Verifica |
|---|
Title | Presencia, longitud y contenido del titulo de la pagina |
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 pagina, 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 esta listo para interaccion |
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 pagina.
Grid Overlay
Superpone una grilla de 12 columnas con linea base de 8px sobre la pagina. 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 pagina 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 pagina 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 pagina. 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 pagina 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 pagina 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 pagina actual cuando activas una herramientascripting — Para inyectar las herramientas de inspeccion en la pagina
Preguntas Frecuentes
Es gratis?
Si. aGoDevTools es completamente gratuita y sin limitaciones. Todas las 12 herramientas estan disponibles desde el primer momento.
Funciona en cualquier sitio web?
Si. Funciona en cualquier sitio web publico. Algunas paginas internas del navegador (chrome://, about:) tienen restricciones de seguridad que impiden la inyeccion de scripts.
Los cambios que hago con el Inspector son permanentes?
No. Todos los cambios son temporales y se pierden al recargar la pagina. Para guardarlos, usa la funcion "Copiar cambios como CSS" y agregalos a tu hoja de estilos.
Puedo usar la extension sin conexion a internet?
Si. Todas las herramientas funcionan localmente en tu navegador. Solo necesitas conexion para cargar la pagina 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 pagina 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 [email protected].
