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.
- Firefox OS App Generator
- You can use the Firefox OS App Generator to automatically generate and install FxOS apps with particular permissions, message-listeners, types, etc.
The MDN Tools zone provides more details about using all of these tools and more.