PromptsLove
Back to Documentation

Getting Started

Welcome to Developer's Toolkit! This guide will help you get up and running in minutes.

What is Developer's Toolkit?

Developer's Toolkit is a comprehensive Manifest V3 Chrome extension designed for modern web development. It lives in your browser's side panel and provides instant access to:

  • Page diagnostics and metadata analysis
  • Dedicated modules for Forms, Cookies, CSS, JavaScript, and Media
  • AI assistant powered by OpenRouter for intelligent debugging
  • PageSpeed Insights integration for performance audits
  • Links analysis and comprehensive toolbox utilities

Quick Start

1

Install the Extension

Download and install Developer's Toolkit from the Chrome Web Store.

Install Extension
2

Open the Side Panel

After installation, click the extension icon in your Chrome toolbar and select "Open Side Panel" or use the toolbar popup for quick actions.

Tip: Pin the extension to your toolbar for easy access. Right-click the extension icon and select "Pin to toolbar".

3

Configure API Keys (Optional)

For AI features and unlimited PageSpeed Insights, configure your API keys in Settings.

  • OpenRouter API Key: Required for AI-powered features
  • PageSpeed API Key: Optional, prevents rate limiting
View Settings Guide
4

Explore Features

Navigate through the side panel to explore all available modules and tools.

→ Forms Module→ Cookies Module→ CSS Module→ JavaScript Module

Extension Surfaces

Side Panel (Main UI)

The primary interface for accessing all tools and features. Open from the toolbar popup or extension icon.

Provides full access to all modules and diagnostics

Popup (Quick Actions)

Quick access menu from the toolbar icon for common actions like opening the side panel or toggling overlays.

Includes CSS Overlay, Highlight Links, View Cookies, Theme toggle

Context Menu

Right-click menu integration for inspecting elements and using AI to explain selected text.

"Inspect with Developer's Toolkit" and "AI: Explain Selection"

In-Page Overlays

On-demand visual overlays that highlight elements, links, images, and headings directly on the page.

Activated via popup or side panel tools

Daily Workflow

  • Use the popup for quick actions and overlay toggles
  • Use the side panel for comprehensive module features
  • Use More Tools for quick inspect, validate, and outline utilities
  • Use AI Tools for intelligent page analysis and debugging assistance

Next Steps

Installation Guide

Detailed installation instructions and setup guide

Read more

AI Features

Learn how to use AI-powered debugging and analysis

Read more