mozilla
Your Search Results

    App developer tools Redirect 2

    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.

    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, wicky
    Last updated by: wicky,