DevTools

devtools/ is Firefox's built-in developer tools: Inspector, Console, Debugger, Network, Performance, Storage, Style Editor, Accessibility Inspector. The DevTools UI is implemented in JS, and they communicate with the inspected page through a Remote Debugging Protocol (RDP) server that runs in the same browser.

Components

devtools/
├── client/         # The DevTools UI (frontend)
│   ├── inspector/
│   ├── debugger/
│   ├── netmonitor/
│   ├── webconsole/
│   ├── memory/
│   ├── performance-new/
│   ├── styleeditor/
│   ├── accessibility/
│   ├── application/  # Service workers, PWAs
│   ├── shared/
│   └── ...
├── server/         # The RDP server (in-process; speaks to client over WebSocket)
├── shared/         # Shared modules between client and server
├── platform/       # Glue to lower-level Gecko APIs
├── startup/        # DevTools startup, registration
├── docs/
└── perfdocs/       # Performance test docs

Architecture

graph LR
    UI[DevTools UI<br/>devtools/client] -->|RDP over WS| Server[devtools/server<br/>Actor-based]
    Server --> InspectedDoc[Inspected document]
    Server --> JSContext[Inspected JS context]
    Server --> Network[Networking events]
    Server --> Storage[Cookies/IDB/cache]
    UI --> Toolbox[Toolbox UI]

Actors

The DevTools server uses its own actor model (different from IPDL) — JS classes that handle a small protocol of named requests and emit named events. A target (tab, worker, web extension) gets a root actor, which manages child actors (Inspector, Console, Network, …). The wire protocol is JSON over WebSocket / pipe.

Targets

DevTools can target:

• The current tab.
• The browser chrome (Browser Toolbox).
• A remote Firefox over USB / WiFi (about:debugging).
• Web Workers and Service Workers.
• WebExtensions.

Key entry points

• devtools/client/framework/toolbox.js — toolbox window, panel registration.
• devtools/server/actors/root.js — root actor served on each target.
• devtools/client/debugger/ — the debugger app (React + Redux).
• devtools/client/inspector/ — DOM/CSS Inspector.
• devtools/client/netmonitor/ — Network monitor.

Custom Tools

Web extensions can add panels via the devtools.panels API. WebExtension support lives in devtools/client/themes/ and toolkit/components/extensions/.

Related

• Automation
• DOM