MobiDevTools Autor: Francesco De Stefano

Mobile & Desktop Web Inspector — Developer Panels Add-on (v1.0)

Unlock deep insights into any webpage on Firefox with this powerful and lightweight Web Inspector Add-on, designed for both Android and Desktop environments.



Overview

This add-on integrates a user-friendly, visually pleasing panel directly into your Firefox browser, delivering instant access to critical page data and performance metrics without leaving the page or using external tools.



Key Features & Panels

• Web Inspection Panel (marked by the + icon): Inspect and interact with DOM elements, styles, and events efficiently.
• HTML Source Panel: View and edit the full, structured HTML source live with syntax highlighting and folding.
• Resources Panel: List and inspect all JavaScript, CSS, and images loaded on the page.
• Network Panel: Monitor network requests, responses, URLs, and statuses directly.
• Performance Panel: Analyze page load performance and script evaluation details.
• User Agent Panel: Check and debug browser user agent details.
• Storage Panel: Explore and manage cookies, local/session storage, and IndexedDB data.
• Log & Console Panel: Capture and filter console logs and errors for debugging.

Permissions and Why They Are Needed

This add-on requests the following permissions to deliver its full range of developer tools:

• "tabs": To access and interact with multiple browser tabs, including inactive ones, enabling inspection and editing beyond just the active tab.
• "storage": To save your settings and preferences locally.
• "webRequest" and "webRequestBlocking": To monitor and analyze network requests and responses in real time, essential for the network panel.
• "webNavigation": To track page navigations and update the panels accordingly.
• "<all_urls>": To access data on all websites you visit, allowing comprehensive inspection and editing of webpage content across domains.

These permissions enable powerful features such as full DOM access, real-time resource monitoring, and network analysis. Importantly, none of this data is collected or transmitted outside your browser; all processing happens locally to respect your privacy.



Why Choose This Add-on?

• Cross-platform: Fully functional on Firefox for Android and Desktop.
• Lightweight & Native: Built with native web APIs, no heavy dependencies.
• Developer-oriented UI: Clear monospace fonts, clean layout, and responsive design.
• Instant access with direct editing: Open and modify page source live without switching windows.

Installation & Usage

1. Install from the Firefox Add-on Gallery.
2. Click the toolbar button to open the panel.
3. Switch between tabs to inspect HTML, resources, network, and more.
4. Edit HTML live and dive deep into your webpage internals.

Future Plans

• Undo/redo support for source editing
• Network timeline visualizations
• Customizable themes and panel arrangements

Elevate your Firefox development workflow with this elegant, powerful, and privacy-respecting Web Inspector for desktop and mobile.