How I Built a Chrome Extension That Eliminates Salesforce Debugging Hell

The Problem That Drove Me Crazy

Picture this: It's 4 PM, production is down, and you're debugging a Salesforce issue. You have 17 browser tabs open:

• Tab 1: The user's record causing the error
• Tab 2: Setup → Debug Logs (still loading...)
• Tab 3: Developer Console for SOQL queries
• Tab 4: Setup → Apex Classes to find the trigger
• Tab 5: Back to Debug Logs (404 error now)
• Tabs 6-17: Various Setup pages you opened while hunting for clues

Sound familiar? This was my daily reality as a Salesforce developer until I decided to build a solution.

The Technical Challenge

Salesforce's debugging workflow forces developers into a multi-tab nightmare because:

1. Debug logging affects ALL users when enabled at the org level
2. SOQL queries have strict limits (50,000 records, offset limitations)
3. Component discovery requires manual navigation through Setup menus
4. No unified debugging interface exists within Salesforce

I needed to solve these problems while working within Salesforce's security constraints and API limitations.

The Solution: A Modern Chrome Extension

I built Salesforce Debugger - a comprehensive debugging toolkit that consolidates four essential tools into one interface.

Technical Stack

// Core architecture
React 19 + TypeScript + TailwindCSS 4
Vite build system with CRXJS plugin
Manifest V3 extension architecture

The extension uses modern web standards with hot reloading support for development, making it both powerful and maintainable.

Feature Deep Dive

1. APEX Debugger - Safe Multi-User Debugging

The biggest breakthrough was solving user-specific debug logging:

// Enable debug logging for specific user only
const enableDebugTrace = async (userId: string, duration: number) => {
  await salesforceAPI.post('/services/data/v58.0/tooling/sobjects/TraceFlag/', {
    TracedEntityId: userId,
    LogType: 'DEVELOPER_LOG',
    StartDate: new Date().toISOString(),
    ExpirationDate: new Date(Date.now() + duration * 3600000).toISOString(),
    DebugLevelId: await getOrCreateDebugLevel()
  });
};

Key innovations:

• User-specific trace flags prevent debugging interference in shared orgs
• Automatic cleanup removes debug artifacts after specified duration
• Real-time sync updates status across all browser tabs
• Smart log fetching with performance metrics and full-text search

2. SOQL Studio - Breaking Query Limitations

Traditional SOQL queries hit limits quickly. I implemented cursor-based pagination to bypass these constraints:

// Cursor-based pagination for unlimited results
const executeUnlimitedQuery = async (soql: string) => {
  let allRecords = [];
  let nextRecordsUrl = null;

  do {
    const response = await salesforceAPI.query(
      nextRecordsUrl || `/services/data/v58.0/query/?q=${encodeURIComponent(soql)}`
    );

    allRecords = [...allRecords, ...response.records];
    nextRecordsUrl = response.nextRecordsUrl;
  } while (nextRecordsUrl);

  return allRecords;
};

Features include:

• 50-line query editor with syntax highlighting
• Auto-completion with relationship field traversal
• Query management - save and organize frequently used queries
• Real-time results with sorting and navigation

3. Smart Search - Metadata Discovery at Scale

Finding components in large Salesforce orgs is painfully slow. I built a comprehensive search engine:

// Search across 12 component types simultaneously
const SEARCHABLE_COMPONENTS = [
  'ApexClass', 'ApexTrigger', 'LightningComponentBundle',
  'AuraDefinitionBundle', 'Flow', 'CustomObject', 'ValidationRule',
  'WorkflowRule', 'CustomLabel', 'PermissionSet', 'Layout', 'Report'
];

const searchMetadata = async (searchTerm: string) => {
  const searchPromises = SEARCHABLE_COMPONENTS.map(type => 
    salesforceAPI.tooling.query(
      `SELECT Id, Name, DeveloperName FROM ${type} 
       WHERE Name LIKE '%${searchTerm}%' OR DeveloperName LIKE '%${searchTerm}%'`
    )
  );

  return Promise.all(searchPromises);
};

This provides 90%+ faster component discovery compared to manual Setup navigation.

4. LWC Debugger - Real-Time Component Inspection

For Lightning Web Components, I integrated with Chrome DevTools:

// Monitor Apex calls from LWC components
const trackApexCalls = () => {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      if (entry.name.includes('apex')) {
        logApexCall({
          method: extractMethodName(entry.name),
          duration: entry.duration,
          timestamp: entry.startTime
        });
      }
    });
  });

  observer.observe({ entryTypes: ['measure'] });
};

Real-World Impact

Since launching, the extension has:

• 1,000+ active users across development teams
• 90%+ reduction in component discovery time
• Zero tab switching for common debugging tasks
• Safe multi-user debugging in production environments

Technical Challenges Overcome

1. Salesforce API Limitations

Working within strict API limits while providing unlimited functionality required creative solutions like cursor-based pagination and intelligent batching.

2. Security Constraints

The extension operates entirely within Salesforce's security model - no bypassing of permissions, all API calls use existing user sessions.

3. Performance Optimization

Handling large datasets and real-time updates required careful state management and efficient React rendering strategies.

4. Cross-Tab Synchronization

Maintaining consistent state across multiple Salesforce tabs required implementing a robust messaging system between content scripts.

Code Architecture

// Extension structure
src/
├── content-script/     # Salesforce page integration
├── popup/             # Main debugging interface
├── devtools/          # LWC debugging panel
├── background/        # Service worker for API calls
├── components/        # Reusable React components
└── utils/            # Salesforce API helpers

The modular architecture allows for easy feature additions and maintenance while keeping the codebase organized.

Key Learnings

1. User-centric design beats feature-rich complexity - Solving real workflow problems matters more than adding features
2. API limitations spark innovation - Working within constraints led to better solutions
3. Developer tools need developer UX - Even internal tools deserve polished interfaces
4. Security-first approach builds trust - Never compromising on Salesforce security model was crucial

What's Next?

Currently working on:

• Flow debugger for visual workflow debugging
• Performance profiler for org-wide performance analysis
• Team collaboration features for shared debugging sessions

Try It Yourself

The extension is free and available on the Chrome Web Store.

Quick start:

1. Install the extension
2. Navigate to any Salesforce org
3. Press Alt+S for SOQL Studio or click the extension icon
4. Start debugging without the tab chaos!

Discussion

What's your biggest Salesforce debugging pain point? Have you built solutions to overcome platform limitations? Share your experiences in the comments!

---

Connect with me: https://www.linkedin.com/in/arijitparia/
Extension link: https://chromewebstore.google.com/detail/salesforce-debugger-all-i/dmfledeppinlciakcinbegohoadmbigm?authuser=0&hl=en

---