Documentation - DevLensPro

Installation

Install the Chrome Extension

Download the extension ZIP and load it manually in Chrome, Arc, or any Chromium-based browser.

Works with Chrome, Arc, Brave, Edge, and all Chromium-based browsers

Configure MCP Server

Add DevLensPro to your Claude Code MCP configuration:

~/.claude/settings.json

{
  "mcpServers": {
    "devlens": {
      "command": "npx",
      "args": ["-y", "@devlenspro/mcp-server"]
    }
  }
}

Or install globally for faster startup:

npm install -g @devlenspro/mcp-server

Verify Installation

Extension icon appears in Chrome toolbar
Claude Code shows "devlens" in available MCP tools
Clicking an element in Chrome triggers the extension

Configuration

DevLensPro supports two modes: Local Mode for maximum privacy, and Cloud Mode for remote development scenarios.

Local Mode

Recommended

All data stays on your machine. The extension communicates directly with the local MCP server on localhost:7007.

Maximum privacy
No internet required
Zero latency

Cloud Mode

For Remote Dev

Connect to Claude Code running on a remote VPS. Data is relayed through our secure WebSocket server.

Remote development
Team collaboration
Anonymous room IDs

Cloud Relay Server

The cloud relay only forwards messages between your browser and Claude Code. No data is stored on our servers. Connection uses anonymous room IDs that expire after 24 hours of inactivity.

Usage Guide

Basic Workflow

1
Activate Selection Mode
Click the DevLensPro icon or press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
2
Click Any Element
Hover over elements to see the highlight overlay, then click to capture
3
Ask Claude
In Claude Code, ask about the element: "Style this button", "Fix the alignment", "What's the CSS?"
4
Get AI-Powered Solutions
Claude analyzes the element context and provides targeted code suggestions

What Data is Captured

Element Information

• CSS selector (unique path)
• Computed styles
• Bounding box / position
• Tag name and attributes

Context Data

• Parent element hierarchy
• Sibling elements
• Applied CSS classes
• Inline styles

Pro Tips

Use with Screenshots

Combine element data with Playwright screenshots for complete context

Debug React Components

Click on React components to get props and state suggestions

Batch Operations

Select multiple elements to analyze layout patterns and relationships

MCP Tool Reference

get-pointed-element

Get information about the currently pointed/shown DOM element.

Parameters

textDetail

0 = none | 1 = visible | 2 = full (default)

cssLevel

0-3: 0 = no CSS | 1 = layout basics | 2 = box model | 3 = full computed

Example Usage

// In Claude Code conversation
"Get the CSS for the element I'm pointing at"
// Claude uses: get-pointed-element with cssLevel=3

"What's the selector for this button?"
// Claude uses: get-pointed-element with textDetail=1

Troubleshooting

Extension not connecting to MCP server▼

Ensure Claude Code is running with MCP enabled
Check that the pointer MCP server is listed in your settings.json
Restart Claude Code after configuration changes
Check browser console for connection errors

Element highlight not appearing▼

Click the extension icon to ensure it's active
Some websites with strict CSP may block the overlay
Try refreshing the page
Check if the extension has permission for this site

Cloud mode not connecting▼

Verify the room ID matches on both extension and remote server
Check your firewall settings
Ensure the remote MCP server is accessible
Try generating a new room ID

Getting Started with DevLensPro