MobiDevTools — Francesco De Stefano

Mobile & Desktop Web Inspector — Advanced Developer Panels Add-on

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



Overview

This add-on provides an intuitive and visually appealing panel interface embedded directly inside your Firefox browser. Whether you develop for mobile or desktop web, gain instant access to critical page data and performance metrics — all without leaving the browser or resorting to external tools.



Key Features & Panels

1. HTML Source Panel with Foldable & Editable Tree

• View the full structured HTML source in a beautifully foldable tree layout.
• Expand or collapse any HTML tag easily — gain a quick overview or drill down into details.
• Syntax highlighting for tags, attributes, and values enhances readability.
• Edit the HTML source live within the panel—update attribute values and text content directly without refreshing.
• Native browser folding via <details> and <summary> ensures smooth performance without external libraries.

2. Resources Panel

• Instantly fetch and list all JavaScript and CSS files loaded on the page.
• See every image embedded or referenced in the page, organized with clickable links for easy inspection.
• Scrollable, clean UI design for quick resource auditing in one place.

3. Network Panel

• Monitor network requests and responses directly from the add-on.
• Get detailed insights on request URLs, methods, and statuses without opening external devtools.

4. Performance Panel

• Analyze page performance metrics to identify bottlenecks and optimize load times.
• View script evaluation and rendering details in an easy-to-understand format.

5. User Agent Panel

• Check your current browser user agent string and identity.
• Useful for debugging user-agent-dependent page behaviors.

6. Storage Panel

• Explore cookies, local storage, session storage, and IndexedDB entries quickly.
• Edit or delete storage entries to simulate scenarios or troubleshoot issues.

7. Log & Console Panel

• Capture console logs and errors to debug JavaScript runtime problems.
• Filter logs, copy messages, and maintain visibility without leaving the panel.

Why Use This Add-on?

• Cross-Platform: Fully compatible with Firefox on Android and Desktop.
• Lightweight & Native: No heavy external libraries or dependencies; built with native web APIs and styling.
• Developer-Friendly UI: Monospace fonts, clean color schemes, and responsive design provide a comfortable coding environment on any device.
• Instant Access: Opens inline with one click, no need to open separate devtools windows.
• Direct Editing: Modify HTML source live, preview changes instantly, and debug faster.

Permissions Required

• Access to webpage data for analysis across network, DOM, and resources.
• Runs in-page allowing real-time inspection and editing.

Ideal For

• Web developers who want an embedded, lightweight developer panel on the go.
• Mobile web testers targeting Android Firefox.
• Frontend engineers needing quick resource and performance insight without switching contexts.

Installation & Use

1. Install the add-on from the Firefox Add-on Gallery.
2. Click the toolbar button to open the panel.
3. Navigate between tabs to explore HTML source, scripts, images, network, and more.
4. Enjoy folding and editing your HTML source live and deep dive into your page internals with ease.

Future Enhancements

• More advanced source editing with undo/redo support.
• Network timeline visualization.
• Customizable themes and panel arrangement.

Empower your Firefox browser with in-depth webpage introspection using this elegant and powerful add-on — optimized for desktop and Android, making debugging truly mobile-friendly.