Web Inspector - Bookmarklet

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

Web Inspector is a self-contained developer tool that runs directly on any webpage as a simple bookmarklet. It provides essential debugging features like a console, DOM inspector, and network logger, making it perfect for mobile web development or any scenario where traditional browser developer tools are unavailable.

Project Homepage: dev-tools-inspector.vercel.app

Features

• Console: View logs, warnings, and errors. Execute JavaScript directly in the page's context.
• Elements Inspector: Browse the live DOM tree, see element attributes, and inspect matched CSS rules for any selected element.
• Sources Viewer: View the content of inline and external CSS & JavaScript files loaded on the page.
• Network Logger: Monitor basic network activity by logging fetch and XHR requests with their status and method.
• Application Viewer: Inspect local storage, session storage, and cookies associated with the current page.
• Page Info: Get quick access to key information like the page URL, User Agent, viewport dimensions, and pixel ratio.
• Interactive Panel: The entire tool is packaged in a draggable and resizable panel for convenience.
• Self-Contained: No installation or browser extensions needed. It runs on demand and leaves no trace after a page refresh.

Getting Started

To use the Web Inspector, you first need to create a bookmarklet in your browser.

The Bookmarklet Code

Copy the following code. You will paste this into the URL/Address field of a new bookmark.

javascript:(function(){var s=document.createElement("script");s.src="https://dev-tools-inspector.vercel.app/javascript/main/devtools.js";document.body.appendChild(s);})();

Installation Instructions

Follow the instructions for your specific browser or device.

🖥️ Desktop Browsers (Chrome, Firefox, Edge, Safari)

1. Press Ctrl + Shift + B (or Cmd + Shift + B on Mac) to ensure your bookmarks bar is visible.
2. Right-click on the bookmarks bar and select "Add page..." or "Add Bookmark...".
3. In the Name field, type Web Inspector.
4. In the URL or Address field, paste the bookmarklet code copied from above.
5. Click Save.

📱 iOS (Safari)

1. On any webpage, tap the Share button (), then scroll down and tap "Add Bookmark".
2. Name it Web Inspector and save it.
3. Now, tap the Bookmarks button () to open your bookmarks list.
4. Find the bookmark you just saved, tap "Edit", and then tap on the bookmark itself to edit it.
5. Clear the existing website address in the URL field and paste the bookmarklet code.
6. Tap "Done" to save your changes.

🤖 Android (Chrome)

1. Bookmark any page by tapping the three-dot menu () and then the star icon ().
2. In the address bar, type chrome://bookmarks and navigate to it.
3. Find the bookmark you just created, tap the three-dot menu next to it, and select "Edit".
4. Change the Name to Web Inspector.
5. Replace the contents of the URL field with the pasted bookmarklet code.
6. Tap the back arrow to save. To use it, simply type "Web Inspector" in your address bar and tap the suggested bookmark result.

Usage

1. Navigate to any website you wish to inspect.
2. Open your bookmarks and click the "Web Inspector" bookmarklet.
3. The developer panel will appear at the bottom of the screen. You can drag it, resize it, and switch between tabs to begin debugging.

How It Works

The bookmarklet contains a small piece of JavaScript that creates a new <script> tag on the current page. The src of this script points to the remotely hosted devtools.js file. This main script, once loaded, dynamically injects the panel's HTML, applies its CSS, and overrides native functions like console.log and window.fetch to intercept and display data within the panel.

Contributing

Contributions are welcome! If you have a suggestion for a new feature or have found a bug, please open an issue on GitHub. Pull requests for bug fixes are also greatly appreciated.

License

This project is licensed under the MIT License. See the LICENSE file for details.