aGoDevTools v1.0

12 developer tools in one Chrome extension

Getting Started

aGoDevTools is a complete toolkit for web developers. Inspect, edit, capture, debug, analyze and optimize any website — all from a single Chrome extension.

Installation

Install aGoDevTools from the Chrome Web Store
Click the extension icon in the toolbar
Select any of the 12 available tools

Quick Start

Open the panel — Click the aGoDevTools icon in the browser toolbar
Choose a tool — Each tool has its own button in the panel
Use keyboard shortcuts — Alt+I for Inspector, Alt+P for Color Picker, Alt+C for Screenshots and more

Tip: Learn the keyboard shortcuts for a faster workflow. Every main tool has its own Alt+key shortcut.

Inspector `Alt+I`

The Inspector lets you examine any page element in detail. Hover over elements to highlight them and click to see all their information.

Features

Hover to highlight — Move the cursor over any element to see its dimensions and boundaries
Computed styles — Click an element to see colors, typography, spacing and more
Accessibility info — Review ARIA attributes and color contrast
Live editing — Modify any CSS value directly and see changes instantly
Copy selector — Copy the element's CSS selector with one click
Copy styles — Copy all computed styles or just your changes as clean CSS
Reset changes — Revert to the original state at any time

Live editing: Changes made with the Inspector are temporary and will be lost on page reload. For persistent changes, copy the generated CSS and add it to your stylesheet.

Color Picker `Alt+P`

Pick colors from any pixel on the page with precision. Includes a 10x magnifier for exact pixel selection.

How to Use

Activate the Color Picker with Alt+P or from the panel
Move the cursor over the page — you'll see the 10x magnifier
Click the desired pixel to capture the color
The color is shown in three formats: HEX, RGB and HSL
Click any format to copy it to clipboard

Tip: The 10x magnifier makes it easy to select the exact pixel, especially in gradients or thin borders.

Screenshots `Alt+C`

Capture screenshots with 4 different modes, suited for any documentation or reporting need.

Capture Modes

Mode	Description
Visible Tab	Instant capture of what's currently visible on screen
Full Page	Captures the entire page via auto-scroll stitching
Selected Element	Click any element to capture it individually
Selected Area	Drag to select a custom rectangular region

Full Page: The full page mode auto-scrolls and stitches screenshots to generate a complete image of the site, regardless of its length.

Responsive Viewer

Preview your site on multiple devices simultaneously. Check how it looks at different resolutions without leaving your browser.

Included Devices

iPhone — Popular iPhone models
iPad — iPad and iPad Pro
Galaxy — Samsung Galaxy series
Pixel — Google Pixel
Desktop — Common desktop resolutions

Custom Sizes

Add your own custom dimensions to test any specific resolution you need.

SEO Analyzer

Instant SEO audit of any page. Identify issues and optimization opportunities in seconds.

Elements Analyzed

Element	What It Checks
`Title`	Presence, length and content of the page title
`Meta Description`	Presence and length of the meta description
`Headings`	H1/H2 heading structure, correct hierarchy
`Images`	Images missing alt attributes for accessibility
`Open Graph`	OG tags for social media (og:title, og:image, etc.)
`Canonical`	Canonical URL to prevent duplicate content
`Structured Data`	Schema.org and JSON-LD structured data
`Viewport`	Viewport meta tag for mobile responsiveness

Assets & Performance

Assets Panel

Browse all resources loaded on the page, organized by type.

Images — JPG, PNG, SVG, WebP, GIF
Scripts — JavaScript files
CSS — Stylesheets
Media — Video and audio
Documents — PDFs, Word, Excel and other files

Download resources individually, multi-select, or download all at once.

Performance Metrics

Real-time performance metrics, all color-coded to quickly identify issues.

Metric	Description
`First Paint`	Time until the first visual render
`FCP`	First Contentful Paint — first visible content
`DOM Interactive`	Time until the DOM is ready for interaction
`TTFB`	Time to First Byte — server response time
`DOM Nodes`	Total number of DOM nodes
`Resources`	Number of loaded resources
`Transfer Size`	Total size transferred over the network

Layout Tools

Ruler & Guides `Alt+R`

Horizontal and vertical rulers with marks every 10, 50 and 100 pixels. Ideal for verifying alignment and element dimensions on the page.

Grid Overlay

Overlays a 12-column grid with 8px baseline on the page. Perfect for verifying that your design respects the grid system and vertical rhythm.

Spacing Visualizer

Hover over any element to visualize its spacing:

Yellow — Margin (outer spacing)
Cyan — Padding (inner spacing)

Quickly identify spacing inconsistencies without opening DevTools.

Font Detector & Code Editor

Font Detector

Lists all fonts used on the page with detailed information:

Font name and font family
Weights in use
Sizes in use
Colors applied

Code Editor

Inject custom CSS or JavaScript into the page in real time. Changes apply instantly, ideal for:

Rapidly prototyping style changes
Testing visual bug fixes
Experimenting with animations and transitions
Debugging behavior with custom scripts

Note: Injected changes are temporary and will be lost on page reload. Copy your code before reloading if you want to keep it.

Keyboard Shortcuts

Quickly access the main tools without opening the extension panel.

Shortcut	Tool	Description
`Alt+I`	Inspector	Toggle the element inspector
`Alt+P`	Color Picker	Activate the color picker with magnifier
`Alt+C`	Screenshots	Open the screenshot capture menu
`Alt+R`	Ruler & Guides	Show/hide rulers and guides

Tip: Shortcuts work on any web page while the extension is active. You don't need to open the panel first.

Privacy & Permissions

100% Local

aGoDevTools runs entirely in your browser. No data is collected, stored or sent to any external server.

No tracking — No analytics, telemetry or third-party cookies
No account — No sign-up or login required
No network — All tools work offline (except loading the page you're inspecting)
Open source — You can inspect exactly what the extension does

Chrome Permissions

The extension requests only the minimum permissions needed to function:

activeTab — To interact with the current page when you activate a tool
scripting — To inject the inspection tools into the page

Frequently Asked Questions

Is it free?

Yes. aGoDevTools is completely free with no limitations. All 12 tools are available from the start.

Does it work on any website?

Yes. It works on any public website. Some internal browser pages (chrome://, about:) have security restrictions that prevent script injection.

Are changes made with the Inspector permanent?

No. All changes are temporary and will be lost on page reload. To save them, use the "Copy changes as CSS" function and add them to your stylesheet.

Can I use the extension without an internet connection?

Yes. All tools run locally in your browser. You only need a connection to load the web page you want to inspect.

Does the extension collect my data?

No. aGoDevTools is 100% local. No data is collected, stored or sent to external servers. No tracking, no analytics, no third-party cookies.

The full page screenshot isn't working correctly. What should I do?

The Full Page mode uses auto-scroll stitching, which can have issues with sites that have sticky elements or scroll-triggered animations. Try temporarily disabling sticky elements or use the "Selected Area" mode as an alternative.

Can I customize the Responsive Viewer devices?

Yes. In addition to the preset devices (iPhone, iPad, Galaxy, Pixel, Desktop), you can add custom sizes with the exact dimensions you need.

Need help?