InspectDev
Add to Chrome for Free
← Back to Docs

Getting Started

Once InspectDev is installed, here's how to start using it.

Opening the Panel

Click the InspectDev icon in your browser toolbar. The extension opens as a side panel on the right side of your current tab, giving you access to every tool without navigating away from the page.

You can also use the keyboard shortcut:

  • Windows / Linux: Ctrl+Shift+I
  • macOS: Cmd+Shift+I

If the shortcut doesn't work, it may conflict with another extension. You can remap it on chrome://extensions/shortcuts.

The side panel shows a toolbar at the top with icons for each available tool. Click any icon to switch to that tool. The panel remembers the last tool you used and reopens to it the next time.

Tools are organized roughly by category:

  • Inspect — Element Inspector, CSS Inspector, SEO Meta Inspector
  • Design — Color Picker, Page Ruler, Responsive Viewer
  • Capture — Screenshot, Table Capture, Export Elements
  • Data — Local Storage Manager, Cookie Editor, Web Scraper
  • Utilities — UTM Builder, Accessibility Tools, and more

Context-Aware Tools

Several tools automatically populate based on the current page:

  • SEO Meta Inspector — reads the current page's meta tags the moment you open it; no extra step needed
  • Color Picker — click the tool, then hover any element on the page to see its color values
  • Element Inspector — opens with the currently focused element selected

Keyboard Shortcuts

Every tool has at least one keyboard shortcut. Press ? while the panel is open to see the full list.

Common shortcuts:

  • Escape — close the panel or cancel the current action
  • Ctrl+P — toggle element picker mode (Element Inspector)
  • Ctrl+D — open Color Picker

Settings

Click the gear icon in the panel footer to open Settings. Here you can:

  • Toggle dark mode
  • Customize the default panel width
  • Enable or disable individual tools in the toolbar
  • Reset all settings to defaults