path: root/files/bn/archive/b2g_os/debugging/developer_settings/index.html

---
title: Developer settings for Firefox OS
slug: Archive/B2G_OS/Debugging/Developer_settings
translation_of: Archive/B2G_OS/Debugging/Developer_settings
---
<div class="summary">
 <p><span class="seoSummary">Contained in the Firefox OS Settings app is the Developer panel. This panel offers a number of options that can make debugging your open web app on Firefox OS easier.</span> This article covers the options available and how to make use of them.</p>
</div>
<p>The settings panel for developer options is intentionally buried deep to avoid having end users who have no need for these options inadvertently turning on options that make their device run more slowly or add strange visual effects to their displays. The panel looks something like this (the following is from a Geeksphone Keon running an April 2014 build of Firefox OS 2.0; yours may differ if you are running a different version):</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7801/developermenu-short.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
<p>The developer panel is reached as follows:</p>
<ul>
 <li>In Firefox OS &lt;1.4, you open the developer panel via <em>Settings &gt; Device information &gt; More Information &gt; Developer</em>.</li>
 <li>In Firefox 1.4+, you have to enable the developer panel via <em>Settings &gt; Device information &gt; More Information &gt; Check the Developer Menu checkbox</em>.  Once you've done this, you can then access the developer panel via <em>Settings &gt; Developer</em>.</li>
</ul>
<p>The following sections cover each of the options in the Developer panel, explaining what they do and why they're useful.</p>
<h2 id="Developer_Tools_settings">Developer Tools settings</h2>
<h3 id="Debugging_via_USB">Debugging via USB</h3>
<p>The "Remote debugging" option enables support for <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">remotely debugging</a> your Firefox OS device. This also enables <a href="/en-US/Firefox_OS/Debugging/Installing_ADB">ADB</a> command usage.<strong> </strong>In Firefox &lt;1.4 there is only a single checkbox; in Firefox 1.4 there are three options available in a select box:</p>
<ul>
 <li>Disabled: remote debugging is turned off (the default.)</li>
 <li>ADB only: Allows access to the device by ADB.</li>
 <li>ADB and Devtools: Allows access to the device by ADB and Firefox Devtools such as the <a href="/en-US/Firefox_OS/Using_the_App_Manager">App Manager</a>.</li>
</ul>
<h3 id="Developer_HUD">Developer HUD</h3>
<p>In Firefox OS 1.4+, tapping this section brings you to the Developer HUD selection view.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7803/developerhud-new.png" style="width: 320px; height: 480px; margin: 0px auto; display: block;"></p>
<p>There's a checkbox you can use to enable or disable the Developer HUD altogether (a section at the top of the Firefox OS UI for displaying developer information), and then five checkboxes to enable or disable:</p>
<ul>
 <li><strong>Log changes in adb</strong>: Enables logging of device changes to adb logcat.</li>
 <li><strong>Warnings</strong>: Displays console warnings.</li>
 <li><strong>Errors</strong>: Displays console errors.</li>
 <li><strong>Security issues</strong>: Displays potential security issues.</li>
 <li><strong>Reflows</strong>: Displays reflows as they occur.</li>
 <li><strong><a href="/en-US/Firefox_OS/Platform/Architecture#Jank">Jank</a>/Jank threshold</strong>: Notify the phone user about occurrences of unacceptably high jank, the threshold for which can be customised.</li>
 <li><strong>Frames per second</strong>: Displays frames per second, as explained in the {{ anch("Frames_per_second") }} section below.</li>
 <li><strong>Time to load</strong>: Displays time to load information, as explained in the {{ anch("Time_to_load") }} section below.</li>
 <li><strong>App memory</strong>: Displays information on how much memory the app is using, and allows you to enable or disable the different memory usage factors. See {{ anch("App_memory") }} below for more details.</li>
</ul>
<h4 id="Frames_per_second">Frames per second</h4>
<p>Enabling this option reports three numbers in the top left of the Firefox OS display; the values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, all numbers are "guesses":</p>
<ul>
 <li>The left number is the <strong>composition rate</strong>: the estimated number of times per second Firefox OS is drawing frames to the hardware framebuffer. This is an estimate of the user-perceived framerate, and only an estimate. For example, the counter may report 60 compositions per second even if the screen is not changing. In that case the user-perceived framerate would be 0. However, when used with this caveat in mind and corroborated with other measurements, the monitor can be a useful and simple tool.</li>
 <li>The middle number is the <strong>layer transaction rate</strong>, the estimated number of times per second processes are repainting and notifying the compositor. This number is mostly useful for Gecko platform engineers, but it should be less than or equal to the composition rate number on the left.</li>
 <li>The right hand number is a measure of the number of pixels drawn as a percentage of the screen size. A number of 273 means the screen was painted 2.73 times. Ideally this number should be as close to 100 as possible.</li>
</ul>
<p><img alt="A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate." src="https://mdn.mozillademos.org/files/6889/framerate-fxos.jpg" style="width: 357px; height: 640px; display: block; margin: 0px auto;"></p>
<h4 id="Time_to_load">Time to load</h4>
<p>Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.</p>
<p><img alt="A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds." src="https://mdn.mozillademos.org/files/6891/startup-time-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
<h4 id="App_memory">App memory</h4>
<p>Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has <em>App memory</em> and <em>JS objects</em> checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7731/memory-usage.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
<h3 id="Flash_repainted_area">Flash repainted area</h3>
<p>In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.</p>
<p><img alt="A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame." src="https://mdn.mozillademos.org/files/6893/paint-update-fxos.jpg" style="width: 378px; height: 640px; display: block; margin: 0px auto;"></p>
<h2 id="Graphics_settings">Graphics settings</h2>
<h3 id="Enable_APZ_for_all_content_(was_Async_PanZoom)">Enable APZ for all content (was Async Pan/Zoom)</h3>
<p>When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">MozillaWiki APZ</a> article.</p>
<h3 id="Tiling_(was_Layers_Enable_tiles)">Tiling (was Layers: Enable tiles)</h3>
<p>Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.</p>
<h3 id="Simple_tiling_(was_Layers_Simple_tiles)">Simple tiling (was Layers: Simple tiles)</h3>
<p>This flips between the two different content painting implementations described in the section above.</p>
<h3 id="Hardware_composer_(was_Enable_hardware_compositing)">Hardware composer (was Enable hardware compositing)</h3>
<p>When enabled, this setting causes the device to use its <a href="https://source.android.com/devices/graphics.html#hwc">Hardware Composer</a> to composite visual elements (surfaces) to the screen.</p>
<h3 id="Draw_tile_borders_(was_Layers_Draw_tile_borders)">Draw tile borders (was Layers: Draw tile borders)</h3>
<p>This is very similar to the {{ anch("Draw layer borders") }} option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.</p>
<h3 id="Draw_layer_borders">Draw layer borders</h3>
<p>When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.</p>
<p><img alt="A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers." src="https://mdn.mozillademos.org/files/6897/paint-layers-borders.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
<h3 id="Dump_layers_tree">Dump layers tree</h3>
<p>This option causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.</p>
<h3 id="Cards_View_Screenshots">Cards View: Screenshots</h3>
<p>When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.</p>
<h2 id="Window_management_settings">Window management settings</h2>
<h3 id="Software_home_button">Software home button</h3>
<p>Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
<h3 id="Home_gesture">Home gesture</h3>
<p>Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.</p>
<h3 id="Edges_gesture">Edges gesture</h3>
<p>Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox.</p>
<h3 id="Continuous_transition">Continuous transition</h3>
<p>This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.</p>
<h3 id="App_transition">App transition</h3>
<p>Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.</p>
<h3 id="App_suspending">App suspending</h3>
<p>If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.</p>
<h2 id="Debug_settings">Debug settings</h2>
<h3 id="Log_slow_animations">Log slow animations</h3>
<p>This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:</p>
<pre>I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
</pre>
<h3 id="Wi-Fi_output_in_adb">Wi-Fi output in adb</h3>
<p>Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
<h3 id="Bluetooth_output_in_adb">Bluetooth output in adb</h3>
<p>Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
<h3 id="Console_enabled">Console enabled</h3>
<p>When enabled, this option lets you use the <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console" title="/en-US/docs/Mozilla/Firefox_OS/Debugging/Using_the_Remote_Web_Console">Web Console</a> in Firefox to remotely access the console output on the device; without this option enabled, the {{domxref("console.log()")}} function does nothing.</p>
<h3 id="Gaia_debug_traces">Gaia debug traces</h3>
<p>Enabling this directly enables DEBUG traces in Gaia; see {{ bug("881672") }} for more details.</p>
<div class="note">
 <p><strong>Note</strong>: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.</p>
</div>
<h3 id="Show_accessibility_settings">Show accessibility settings</h3>
<p>This enables the accessibility settings menu, subsequently found at <em>Settings &gt; Accessibility</em>. The options contained within are as follows:</p>
<h4 id="Screen_reader">Screen reader</h4>
<p>Enabling this option turns on Firefox OS's screen reader. Currently at a very early stage, it changes the way the standard touch events work. For example, you can:</p>
<ul>
 <li>Long press somewhere to focus that app (or whatever) and be alerted as to what it is, then double click to select it.</li>
 <li>Swipe from top to bottom to do a "tab" equivalent, moving sequentially through apps and being alerted to each one's name.</li>
 <li>Swipe from bottom to top to do "shift tab", moving sequentially backwards through apps and being alerted to each one's name.</li>
</ul>
<h4 id="Speech_volume">Speech volume</h4>
<p>A slider that controls how loud the speech is delivered.</p>
<h4 id="Speech_rate">Speech rate</h4>
<p>A slider that controls how fast the speech is delivered.</p>
<h3 id="Launch_first_time_use">Launch first time use</h3>
<p>The "Launch first time use" button runs the first-time startup program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.</p>
<h2 id="Obsolete_settings">Obsolete settings</h2>
<p>This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.</p>
<h3 id="Accessibility">Accessibility</h3>
<p>In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the {{ anch("Show_accessibility_settings") }} section above.</p>
<h3 id="Grid">Grid</h3>
<p>The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5071/Grid.png" style="width: 320px; height: 480px; display: block; margin: 0px auto;"></p>
<p>The grid's heavier lines are 32 pixels apart, both horizontally and vertically.</p>
<h3 id="Show_frames_per_second">Show frames per second</h3>
<p>In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the {{ anch("Frames_per_second") }} section above.</p>
<h3 id="Show_time_to_load">Show time to load</h3>
<p>In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the {{ anch("Time_to_load") }} section above.</p>
<h3 id="Rocketbar_enabled">Rocketbar enabled</h3>
<p>In Firefox OS versions older than newer 1.4, this option enables the new <a href="https://groups.google.com/forum/#!topic/mozilla.dev.gaia/Nlfbrq1KMP0">Firefox Rocketbar</a> on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.</p>
<div class="note">
 <p><strong>Note</strong>: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.</p>
</div>
<h3 id="Contacts_debugging_output_in_adb">Contacts debugging output in adb</h3>
<p>Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using <code>adb logcat | grep "Error"</code> in the Terminal.)</p>
<h3 id="Progressive_paint_(was_Layers_Progressive_paint)">Progressive paint (was Layers: Progressive paint)</h3>
<p>This was introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).</p>
<h3 id="Displayport_Heuristics">Displayport Heuristics</h3>
<ul>
 <li>Default</li>
 <li>Center displayport</li>
 <li>Assume perfect paints</li>
 <li>Taller displayport</li>
 <li>Faster paints</li>
 <li>No checkerboarding</li>
</ul>
<p>These options were introduced to help with debugging of the <a href="https://wiki.mozilla.org/Platform/GFX/APZ">Async Panning/Zoom module</a> (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).</p>
<h2 id="Keyboard_layouts">Keyboard layouts</h2>
<p>In addition to the developer-specific options listed above, Firefox OS &lt; 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5079/InputMethods.png"></p>
<p>As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.</p>
<div class="note">
 <p><strong>Note</strong>: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.</p>
</div>
<p> </p>