How do I debug Firefox on iOS?

I tried debugging using safari, and a weird error occurs that if the safari debugger is attached the site renders differently, so want to do the same with firefox.

I’ve looked at the documentation, and it only shows how to debug both firefox and chrome in android.

1 Like

Debugging Firefox on iOS can be done using Safari’s Web Inspector. Here are the steps to get started:

Enable “Web Inspector” on your iOS device by going to “Settings” > “Safari” > “Advanced” and turning on “Web Inspector.”

Connect your iOS device to your Mac using a USB cable.

Open Firefox on your iOS device and navigate to the website you want to debug.

On your Mac, open Safari and go to “Preferences” > “Advanced” and check “Show Develop menu in menu bar.”

From the “Develop” menu in Safari, select your iOS device and choose the website you want to debug.

The website will now open in Safari’s Web Inspector. You can use the Web Inspector to inspect the HTML, CSS, and JavaScript of the website, as well as view console logs and network requests.

Note that not all features of Firefox may be available for debugging in Safari’s Web Inspector, and some debugging tasks may require additional tools or resources.

Which version of iOS (15.7.3 for me) and MacOS (Ventura 13.2.1 for me) did you use ?
I have tried and it didn’t work for me. Safari on the mac is not displaying the firefox context. Safari is working as expected but not Firefox.

For anyone like me stumbling upon this and wondering why Firefox tabs are not showing in the menu: the “Develop” menu in Safari only seems to show the currently focused app on the iOS device. You have to have Firefox open and in focus for it to work.

Once I realized this I could see why no-one bothers to mention this as it sounds like it goes without saying, but this might save some people a little bit of time!

Your provided solution is accurate, but there is a small clarification needed. The “Develop” menu in Safari allows you to inspect and debug web pages, but it doesn’t necessarily mean that all features of Firefox are directly accessible through Safari’s Web Inspector. It’s essential to mention that debugging capabilities may be limited compared to using Firefox Developer Tools directly.

Here’s the corrected version:

To debug Firefox on iOS, you can leverage Safari’s Web Inspector. Follow these steps to get started:

  1. Enable “Web Inspector” on your iOS device by going to “Settings” > “Safari” > “Advanced” and turning on “Web Inspector.”
  2. Connect your iOS device to your Mac using a USB cable.
  3. Open Firefox on your iOS device and navigate to the website you want to debug.
  4. On your Mac, open Safari and go to “Preferences” > “Advanced,” then check “Show Develop menu in menu bar.”
  5. From the “Develop” menu in Safari, select your iOS device and choose the website you want to debug.
  6. The website will open in Safari’s Web Inspector. Utilize the Web Inspector to inspect the HTML, CSS, and JavaScript of the website, and view console logs and network requests.

Note: Keep in mind that not all features of Firefox may be available for debugging in Safari’s Web Inspector. Some debugging tasks might require using Firefox Developer Tools directly or additional tools and resources.

Sabela Carson
Web Developer at YES IT Labs