App developer tools Redirect 1

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
Logs useful information associated with the running of a web page — including network requests, code errors and warnings — and allows you to execute JavaScript expressions on the fly in the current context of the page.
JavaScript Debugger
Enables you to step through JavaScript code and examine or modify its state to help track down bugs.
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.
Profiler
Finds bottlenecks in your JavaScript code. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples.
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.

Mobile tools

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.

See also

The MDN Tools zone provides more details about using all of these tools and more.

 

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,