Web Inspector

A lightweight, in-page developer toolkit for any browser, on any device.

  1. Show your bookmarks bar (Ctrl+Shift+B or Cmd+Shift+B).
  2. Right-click it and select "Add page...".
  3. For "Name", enter Web Inspector.
  4. For "URL", paste the code copied from above. Click "Save".
  1. Bookmark this page: tap Share , then "Add Bookmark".
  2. Edit the bookmark: tap Bookmarks , find it, tap "Edit".
  3. Tap the bookmark, clear the address field, and paste the code.
  4. Tap "Done". To run, open bookmarks and select "Web Inspector".
  1. Bookmark this page. Go to chrome://bookmarks.
  2. Find the new bookmark, tap the three dots , and select "Edit".
  3. Change the "Name" to Web Inspector.
  4. Replace the "URL" with the code you copied. Save.

Persistent Installation (Advanced)

Use a browser extension like Tampermonkey to automatically activate the toolkit on every page load.

Chrome Edge Firefox Safari Opera
  1. Once installed, click the extension's icon and select "Create a new script...".
  2. Delete the default content and paste the following code into the editor:
// ==UserScript==
// @name         DevTools Injector
// @namespace    https://dev-tools-inspector.vercel.app
// @version      1.0
// @description  Inject remote devtools script into pages
// @match        *://*/*
// @run-at       document-idle
// @grant        none
// ==/UserScript==

(function () {
  'use strict';
  const SRC = 'https://dev-tools-inspector.vercel.app/javascript/main/devtools.js';
  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement('script');
  s.src = SRC;
  s.type = 'text/javascript';
  s.async = true;
  s.onload = () => { /* loaded */ };
  document.documentElement.appendChild(s);
})();
  1. Go to the "File" menu and click "Save".
  2. The script is now active. To disable it, click the extension icon and untoggle "DevTools Injector".