MobiDevTools 3.1.1 — Release Notes

Firefox Mobile compatibility fixes
This patch release resolves two critical issues that prevented the Sources panel from working correctly on Firefox Mobile.
Fixed: File tree not responding to taps
@media (pointer:coarse) is not recognized by Firefox Mobile — Firefox Mobile incorrectly reports pointer:fine even on touch screens. All layout breakpoints have been rewritten using JavaScript-evaluated template literals (IS_MOBILE) that inject the correct CSS at injection time, bypassing the broken media query entirely.
Fixed: Snippet editor not writable on mobile
The snippet textarea was trapped inside a flex container with conflicting flex:1 and missing min-height:0 declarations, resulting in a zero-height element that could not be tapped or focused. On mobile, styles are now applied directly via explicit cssText to guarantee correct layout regardless of inherited flex constraints. Font size is set to 15px to prevent Firefox Mobile's automatic zoom-on-focus behavior.
Improved: Touch responsiveness
File tree items and snippet list rows now respond to touchend instead of relying solely on click, eliminating the 300ms tap delay inherent in Firefox Mobile's click event handling.
Improved: Keyboard handling
The snippet editor's focus() call is now deferred by 100ms on mobile to prevent the virtual keyboard from jumping abruptly when the editor loads.
Improved: Panel state reset
Switching from a snippet tab back to a regular source file now correctly resets the editor container styles, preventing layout artifacts left over from the snippet editor.

What's new in 3.1
This update focuses on mobile usability and editor improvements across all panels.
Elements panel — The Styles sidebar now opens below the DOM tree on mobile instead of side by side, making CSS editing fully usable on small screens. Tap any property value to edit it live, use the checkbox to toggle rules on and off, and copy any rule with the ⎘ button.
Sources panel — Completely reworked for Firefox Mobile. The file navigator now appears as a collapsible drawer at the top of the panel. Tap 📁 Files to browse page scripts and stylesheets, tap a file to open it in the editor, and the drawer closes automatically to give the editor full screen space.
Snippets — Now accessible directly from the mobile toolbar with a dedicated 📝 Snippets button. Create, rename and delete snippets with the inline action buttons (▶ ✏ 🗑) that appear on each snippet row. The snippet editor uses a larger font and touch-friendly layout on mobile.
Console — New Chrome-style toolbar with filter input, log level selector (Default levels / Verbose / Info / Warnings / Errors), settings panel with options like Preserve log, Group similar messages and Show CORS errors, and a gear icon ⚙ to toggle settings. User input appears inline as > code exactly like a professional DevTools console.
Bug fixes — Fixed JavaScript execution in the REPL on sites with strict Content Security Policy. Fixed context menus (right-click on desktop, long-press on mobile) in the DOM tree and Source editor. Removed all references to third-party browser names to comply with Mozilla Add-on policies.

MobiDevTools 3.0 is a full-featured developer console designed for Firefox Mobile and desktop. Inspired by professional browser DevTools, it gives you a complete debugging toolkit directly inside your browser — no desktop required.
Features:

Elements — Inspect and live-edit the DOM tree. Click any element to select it, modify CSS values in real time, add or remove classes, edit HTML directly, and view computed styles in a Chrome-style sidebar with breadcrumb navigation.
Console — Full JavaScript REPL with syntax autocomplete, command history, log filtering by level, grouped messages, and source file links. Intercepts all page logs, errors and warnings.
Sources — Browse all scripts and stylesheets loaded by the page with syntax highlighting. Set breakpoints, pretty-print minified code, and create reusable Snippets that run on any page.
Network — Monitor every fetch() and XHR request in real time. Inspect headers, status codes, timing and size. Export as HAR.
Application — Explore localStorage, sessionStorage, cookies, IndexedDB and Cache Storage — view, filter, edit and delete entries.
Performance — Live FPS counter, Core Web Vitals (LCP, FID, CLS, FCP), Navigation Timing and JS Heap usage.
Device — Full browser and device information including viewport, DPI, RAM, CPU cores and connection type.
Interactive Guide — Built-in step-by-step tutorial to learn every feature.

Optimised for Firefox Mobile with large touch targets, gesture resize, long-press context menus and mobile-specific controls.

Release Notes for Version 1.0

Add-on Name: MobiDevTools — Advanced Developer Panels

Summary

This initial release provides a powerful developer toolkit inside Firefox for Android and Desktop. Features include a foldable, syntax-highlighted, editable HTML source panel, resource auditor (JS, CSS, images), network and performance monitor, user agent info, storage viewer, and console logs — all within a clean, native UI.

Key Features

• Foldable & editable HTML source with live syntax highlighting.
• Resource panel showing JS, CSS, and images.
• Network, performance, user agent, storage, and console panels.
• Cross-platform support: Firefox Desktop & Android.
• Built with native Web APIs, no external libraries.
• Secure code evaluation by injecting scripts into page context (avoids eval/Function).
• Well-structured, maintainable codebase.

Compliance Highlights

• No eval() or Function() in extension context; code evaluation occurs via injected scripts posting results with window.postMessage.
• Fully readable source with no obfuscation.
• No external dependencies included.
• Permissions minimal and scoped (page contexts, activeTab).
• User inputs strictly validated and sandboxed where possible.