Debugging Firefox Mobile on Your Computer

I needed to debug a web page that I was working on, which was having some issues on mobile versions of firefox.  I just needed to look at the console, but setting this up was a bit complicated, moreso than it should be.  This should hopefully help:

  1. On your phone: Settings>About Phone>Build number (tap this 7 times to become a developer).
  2. Enable USB sharing: On your phone: Settings>Developer Options>USB Debugging
  3. In firefox on your desktop, open developer tools (Ctrl+Shift+I). Click on the gear icon. In the Advanced Settings section, check the boxes for \’Enable chrome and add-on debugging\’ and the \’Enable remote debugging.
  4. Open the firefox on your mobile device. Click on the menu, then go to Settings>Developer Tools. Enable remote debugging by checking the appropriate checkbox.
  5. Connect your phone to your computer with a USB cable
  6. In Firefox on your desktop, go to Tools>Web Developer>WebIDE
  7. Click on \’Select Runtime\’ dropdown, your device should be listed, click on it.
  8. Look at your phone, there should be a message to allow the connection. Click ok
  9. In WebIDE, click on the \’Open App\’ dropdown. There is a section that lists currently open tabs, click on the tab you would like to debug.
  10. You should now have access to the console, inspector, etc…