Debug Android Websites with Firefox Developer Tools

This guide shows you how to use Firefox Developer Tools to debug websites running on an Android device. You’ll be able to inspect HTML, CSS, JavaScript, network requests, and console messages directly from your desktop, making mobile debugging much easier.

What You’ll Need

• A desktop computer with Firefox installed (any recent version).
• An Android device with Firefox for Android installed (from the Google Play Store).
• A USB cable to connect the Android device to the computer.
• USB debugging enabled on the Android device (explained in Step 1).

Step-by-Step

1. Enable USB debugging on your Android device. Go to Settings > About phone and tap Build number seven times until you see “You are now a developer!” Then go back to Settings > Developer options and toggle on USB debugging. You may also need to enable Install via USB if prompted later.
2. Connect your Android device to your computer via USB. Use a good-quality cable. When the device asks to allow USB debugging, check “Always allow from this computer” and tap OK.
3. Open Firefox on your desktop. In the address bar, type about:debugging and press Enter. This opens the debugging interface.
4. Click on “This Firefox” (or “Setup”) in the left sidebar. You’ll see a section called USB Devices. Click the Connect button next to your device name. If your device isn’t listed, try clicking Refresh or re-plugging the USB cable.
5. Once connected, your device name appears. Click on it to expand. You’ll see a list of open tabs in Firefox for Android, plus a button labeled Open URL if you want to open a new page.
6. Click “Inspect” next to the tab you want to debug. A new window (or a tab in the same Firefox window) opens with the full set of Developer Tools—Inspector, Console, Debugger, Network, Style Editor, Performance, and more—all pointed at the mobile page.
7. Use the tools as you would on desktop. For example:
   • Inspector: Right-click an element to inspect it, edit CSS live, and see the box model.
   • Console: View JavaScript errors and log messages, and run JavaScript directly in the page’s context.
   • Network: See all requests, their status codes, and response times.
   • Debugger: Set breakpoints in the JavaScript source and step through code.
8. When you’re done, close the debugging window. You can also disconnect the USB cable or tap “Disconnect” in the about:debugging page.

Common Mistakes

• USB debugging not enabled: The most common issue. Double-check that Developer options is actually turned on and USB debugging is toggled.
• Wrong USB mode: Some devices default to “Charge only” mode. Swipe down from the notification shade and change the USB mode to “File Transfer” or “MTP”—this often makes the device visible to the computer.
• Using the wrong Firefox on Android: You must use Firefox for Android (the standard version), not Firefox Focus or a third-party browser based on Firefox. The debugging protocol only works with the main Firefox app.
• Forgetting to allow the debugging prompt: When you first connect, the device asks permission to allow USB debugging. If you miss it, the connection won’t work. Reconnect and watch for the prompt.
• Not using the latest versions: Older versions of Firefox or Android may have bugs or missing features. Update both to the latest versions.

Tips

• Use the “Screenshot” button in the Inspector toolbar to capture the current mobile viewport—useful for sharing or documenting bugs.
• Enable “Responsive Design Mode” on desktop (Ctrl+Shift+M) to simulate different screen sizes, but remember that real device debugging shows the actual device rendering, which is more accurate.
• Use the Network panel to throttle network speed (e.g., simulate 3G) to test performance on slow connections.
• If you need to debug a page that’s not open on the device, use the “Open URL” button in about:debugging to open it directly from the desktop.
• Bookmark about:debugging on your desktop for quick access.

Troubleshooting

• Device not showing in about:debugging:
  • Check the USB cable—try a different one if possible.
  • Re-plug the device and click “Refresh” in about:debugging.
  • On the Android device, go to Developer options and toggle USB debugging off and on again.
  • Restart both Firefox on desktop and on the device.
• Connection keeps dropping: Try a different USB port (preferably a direct port on the computer, not a hub). Also, disable any battery-saver apps on the device that might kill the debugging process.
• “Inspect” button is grayed out: Make sure the tab is fully loaded. If it’s a special page (like about:home), it may not be inspectable—try opening a regular website.
• Console shows no messages: Ensure you’re looking at the right tab’s console (the title should show the page URL). Also, check if the page has any errors—try opening a simple test page like example.com to confirm.
• Can’t set breakpoints in Debugger: Make sure the source file is loaded and not minified (or use “Pretty print” to format it). Also, check that you’re in the correct thread (if using service workers).

Frequently Asked Questions

Do I need to root my Android device?

No, USB debugging works on stock, unrooted devices. You just need to enable Developer options.

Can I debug a website in Chrome on Android?

Yes, but this guide is specifically for Firefox. For Chrome, you’d use chrome://inspect on the desktop. The steps are similar but the interface differs.

Why can’t I see my device in about:debugging?

Most likely USB debugging isn’t enabled, or the device is in charge-only mode. Follow the troubleshooting steps above.

Can I debug a local development server (like localhost) on my device?

Yes, but the device needs to access the server via your computer’s IP address (e.g., http://192.168.1.10:3000). Make sure your computer and phone are on the same Wi-Fi network, and that the server is listening on 0.0.0.0.

Is there a wireless option?

Yes, if you have Android 11 or later, you can use wireless debugging via ADB. However, this requires setting up ADB (Android Debug Bridge) and is more advanced. The USB method is simpler for most users.

Can I edit files directly on the device?

No, the Developer Tools only let you inspect and modify the live page. To change the actual source files, you’d need to edit them on your computer and reload the page.

Related

• Variable vs Parameter in SQL: Key Differences
• Install Custom Recovery Android: Steps & Risks
• Kb5127648 Smart App Control Known Issue Windows 11