Inspector Lab DevTools
Inspector Lab is a movable, resizable in-page inspector built as a Manifest V3 Chrome extension. It brings full DevTools capabilities directly to your page—Elements inspection with live styles and DOM editing, console capture and evaluation, network monitoring, and storage editing—running on desktop Chrome, Chromium browsers, and iPadOS through Orion by Kagi. Released under the MIT license.
Why Inspector Lab exists
Modern development increasingly means supervising agents and remote systems rather than typing code directly. When your work happens on a remote machine and you verify it from a tablet, the DevTools you rely on disappear—iPadOS has no F12, and desktop Chrome's inspector cannot run there at all.
Inspector Lab solves this by embedding a full inspection window directly into the page as a browser extension. Because it uses only content scripts and standard extension APIs—no debugger protocol—it runs anywhere a browser can load an extension: desktop Chrome, Chromium variants, and Orion on iPad and iPhone.
What you get
- Elements Panel: Pick and highlight elements, edit attributes and text in place, apply validated inline CSS, view computed styles with a box-model diagram, and force element states.
- Console: Capture page output, evaluate expressions in the page context, view values colored by type with
file:linesource links. - Network: Record live requests with headers, timing, and fetch/XHR body inspection; DevTools-style details pane for each request.
- Sources: Browse page sources in a collapsible tree with syntax highlighting; external files fetch on demand.
- Cookies & Storage: Edit cookies, local storage, and session storage in place.
- UI: Floats or docks to any viewport edge, resizable, themed light and dark, persists across reloads until closed.
The extension launches from the popup on your demand, using only temporary activeTab permission—no standing access to every site you visit.
Getting started
Install Inspector Lab in one click from the Chrome Web Store — this works on desktop Chrome, Chromium browsers, and Orion on iPad and iPhone, and updates automatically:
Building from source
Prefer to run a local build for development? Requires Node 20+ and pnpm 9+.
git clone git@github.com:luangjokaj/inspector-lab.git
cd inspector-labpnpm installpnpm devOpen chrome://extensions, enable Developer mode, click Load unpacked, and select apps/extension/build/chrome-mv3-dev. The build reloads as you edit.
Inspector Lab works on iPad via Orion by Kagi, a free browser for iOS and iPadOS. All panels—Elements, Console, Sources, Cookies, and Storage—work fully. The Network panel captures live fetch and XHR traffic; where iOS limits the extension API surface, panels fall back gracefully and indicate what is unavailable.
iPad installation
On iPad and iPhone, enable Chrome extensions once in Orion (⋯ → Extensions → Chrome extensions), then open the Chrome Web Store listing and tap install — no Files app, no sideloading. The installation guide covers this plus the manual sideloading flow for local builds.
Features & Capabilities
Full tour of every panel, keyboard shortcuts, device support, and known limitations.Installation & Setup
Detailed steps for desktop and iPad, development build setup, and troubleshooting.Known Limitations
Honest boundaries: what Inspector Lab can and cannot do, and why.Development
Set up a dev environment, run the build, and contribute to the project.Explore the panels
Elements Panel
DOM tree, live styles, attribute editing, forced states, and computed values with box model.Console Panel
Page output capture, expression evaluation, and source link navigation.Network Panel
Live request recording, headers, timing, and response body inspection for fetch and XHR.Sources Panel
Collapsible source tree with syntax highlighting and on-demand file fetching.Cookies Panel
View, edit, add, and delete cookies with full access to all attributes.Storage Panel
In-place editing of local storage and session storage.Under the hood
Architecture Overview
Component structure, page bridge, injection, React rendering, and Shadow DOM isolation.Message Protocol
Content script, background, and popup communication; request-response patterns.Page Bridge & Injection
Safe DOM access, data serialization, and lifecycle management from content scripts.Theming & Styling
Light and dark themes, Cherry UI integration, and custom CSS with DevTools fallback mode.Advanced topics
XML & SVG Document Support
Inspect non-HTML documents and SVG with full tree editing support.Settings & Persistent State
Theme preferences and per-tab inspector state stored locally.Privacy & Data Handling
What Inspector Lab collects (nothing), stores (only preferences), and transmits (never).Open source
Inspector Lab is built with Plasmo and released under the MIT license. The code is on GitHub—issues and pull requests are welcome. If you are planning a larger change, open an issue first to discuss it.