This article summarises all the most useful tools available to you for Firefox OS/open web app development, testing and debugging.
Firefox developer tools
Firefox ships with a default set of tools built from the ground up (known as the Toolbox; access it using Cmd + Opt + I on Mac, or Ctrl + Shift + I on Windows/Linux) to ensure a great development experience that is both snappy and efficient. This includes all you'd need for debugging web content, including:
- Web Console
- Page Inspector
- Allows you to examine and modify the structure and layout of a page.
- Style Editor
- Enables you to view and edit all the stylesheets associated with a page, create new stylesheets from scratch, and import existing stylesheets and apply them to the page.
- Network Monitor
- Shows you all the network requests Firefox makes (for example, when it loads a page, or due to XMLHttpRequests), how long each request takes, along with other details.
Below are a few of the tools you'll find useful as you develop apps with mobile browsers in mind, including Gecko on Firefox OS.
- Firefox OS App Manager
- Provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and simulators, directly from your browser. Works with Firefox OS 1.2+.
- Firefox OS simulator
- An add-on for desktop that enables you to test and debug Firefox OS apps. This is a bit more limited than the App Manager, and mainly useful for debugging older Firefox OS versions (<1.2).
- Remote debugging
- Allows you to connect a mobile device to your desktop/laptop, then use the Firefox toolbox on your desktop to debug code running remotely on mobile.
- Responsive Design View
- Makes it easy to see how your website or web app will look on different screen sizes; you can view your web app in different screen dimensions commonly found on devices today, or enter your own user-defined dimensions to test, and change screen orientation to better understand how your device will respond.
- App Validator
- Allows you to validate packaged and hosted Firefox OS apps by pointing it to the location of the app manifest.
The MDN Tools zone provides more details about using all of these tools and more.