在 Firefox OS Settings 应用中有一个开发者面板。这个面板提供了许多选项可以使您在 Firefox OS 上调试 open web app 更简单。本文则对有效的选项和如何使用进行了介绍。
开发者选项的设置面板故意将路径设置的不太好找,这是为了避免不需要这些选项的终端用户无意中打开该选项,从而使设备变得更慢或者在界面中显示出特殊的效果。该面板与下图类似 (下图是一个运行 Firefox OS 2.0 2014 四月版本的 Geeksphone keon ):
可以通过下面路径找到开发者面板:
- Firefox OS <1.4 版本, 通过 Settings > Device information > More Information > Developer 打开开发者面板。
- Firefox 1.4+ 版本, 首先需要在路径 Settings > Device information > More Information > Check the Developer Menu checkbox 下使能开发者面板。完成后,就可以通过 Settings > Developer 来访问开发者面板。
下面的章节则对开发者面板中的每个选项进行了介绍,包括它们是做什么的以及为何有效。
开发者工具设置
通过 USB 调试
“远程调试” 选项会在 Firefox OS 设备上对 远程调试功能 进行使能。同时也使能了 ADB 命令用法。在 Firefox <1.4 版本,只是一个复选框;在 Firefox 1.4 中是一个下拉选框,其中有三个有效的选项:
- Disabled: 远程调试被禁用 (默认情况)
- ADB only: 允许通过 ADB 对访问设备
- ADB and Devtools: 允许通过 ADB 和 Firefox Devtools 如 App Manager 访问设备
开发者 HUD
Firefox OS 1.4+ 版本中, 点击该部分会进入开发者 HUD 选择视图。
在显示开发者信息的 FIrefox OS UI 的顶部,有一个复选框可涌来使能或禁用开发者 HUD 全部的功能,下面有 5 个复选框可以用来启用或禁用:
- Log changes in adb: 使用 adb logcat 时启用设备 log记录
- Warnings: 显示终端警告
- Errors: 显示终端错误
- Security issues: 显示潜在的安全问题
- Reflows: 当发生时,显示 reflows(这里可能至再次重复此场景,但不太确切)
- Jank/Jank threshold: 通知手机用户出现出现不可接受的 Jank 的数目,其门限值可以设定。
- Frames per second: 显示每秒的 frames,在下面 Frames_per_second 章节中有介绍。
- Time to load: 显示撞在信息的时间,在下面章节 Time_to_load 有介绍。
- App memory: 显示 app 使用的内存信息,并允许您启用或禁用不同的内存使用系统。请参考 App_memory 获取更多信息。
每秒帧数(Frames per second)
启用该选项会使 Firefox OS 显示界面左上角显示 3 个数字; 这个数字表示的是在滑动窗口中近期的平均值,指瞬时数据,但又是相当精确的。实际上,所有的数字都是推测出来的:
- 左侧的数字是 合成速率(composition rate): 这个估计值是指Firefox OS 每秒钟向硬件 framebuffer 所绘制的帧数。 这仅仅是一个用户界面所接收帧数速率的估计值。例如,即使屏幕没有变化, 计数器可能也会报告出每秒 60次的速率, 但真实的情况是此时用户的接收速率应该是 0。 然而,当您知道这种情况后,并且经其他的测量工具真实, 这种监测器仍时一个有效而且简单的工具。
- 中间的数字是 layer transaction rate, 表示每秒钟绘制和通知合成器的估计次数。 这个数字对 Gecko 平台工程师是非常有用的, 但是它应该小于或等于左侧的合成速率。
- 右手侧的数字是的屏幕大小的百分比作为绘制的像素值。数字 273 表示屏幕被绘制了 2.73 次。最佳的情况是该数字应尽可能接近 100。
装载时间
Firefox OS 也有一个工具可以帮助测量启动时间,尤其是“初次绘制“ 时间。 由工具所显示的值 — 位于 Firefox OS 界面右上角 — 是指从距今最近的应用的启动时间到应用第一次绘制自己 UI 估计值 之间的时间间隔,间隔以毫秒为单位。 这个数字只是接近“第一次真正画界面”的时间,一般会比实际值要小。 然而, 降低这以数值一般与改善真正的启动时间有直接关系, 因此它可以用来快速的测量优化问题。
App 内存
它会显示有关 app 所使用内存的信息, 并且允许您启用或禁用使用内存的不同条目以显示当前 app 所使用的内存。 例如,下面的截图显示了只有 App 内存 和 Js 对象勾选了,就会在界面右下角提示 Settings app 中 Js 对象使用了 414.77KB 内存。
Flash 重绘区域
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.
Graphics settings
Enable APZ for all content (was Async Pan/Zoom)
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 MozillaWiki APZ article.
Tiling (was Layers: Enable tiles)
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.
Simple tiling (was Layers: Simple tiles)
This flips between the two different content painting implementations described in the section above.
Hardware composer (was Enable hardware compositing)
When enabled, this setting causes the device to use its Hardware Composer to composite visual elements (surfaces) to the screen.
Draw tile borders (was Layers: Draw tile borders)
This is very similar to the Draw layer borders option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.
Draw layer borders
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.
Dump layers tree
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.
Cards View: Screenshots
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.
窗口管理设置
Software home button
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.
Home gesture
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.
Edges gesture
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.
Continuous transition
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.
App transition
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.
App suspending
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.
Debug settings
Log slow animations
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:
I/Gecko ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
Wi-Fi output in adb
Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error"
in the Terminal.)
Bluetooth output in adb
Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error"
in the Terminal.)
Console enabled
When enabled, this option lets you use the Web Console in Firefox to remotely access the console output on the device; without this option enabled, the console.log()
function does nothing.
Gaia debug traces
Enabling this directly enables DEBUG traces in Gaia; see bug 881672 for more details.
Note: 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.
Show accessibility settings
This enables the accessibility settings menu, subsequently found at Settings > Accessibility. The options contained within the accessibility settings are as follows:
Screen reader
Enabling this option turns on Firefox OS's screen reader. This is technology that allows a blind person to use a Firefox OS device. Currently at a very early stage, it changes the way the standard touch events work. When the screen reader is on, you must interact with the screen as follows:
- Touch somewhere to focus that app (or whatever) and be alerted as to what it is. This is indicated both by audible speech output and a rectangle around the selected item. Double tap anywhere on the screen (two taps in rapid succession) to activate the item that has the rectangle around it.
- Swipe from left to right to move sequentially through items on the screen. Items are moved through from left to right, then top to bottom, including scrolling the screen vertically if there are more items to display, and you will be alerted as to each one's name via speech output and a rectangle. Swiping right to left moves through the items in reverse order. Again, double-tap the screen to execute the currently highlighted item.
- Do a swipe with two fingers — left, right, up or down — to scroll the screen in that direction. This is equivalent to swiping one finger across the screen in the given direction when the screen reader is not running. For example, a two-finger swipe left on the first home screen will flip to the second one, and a two-finger swipe upwards on a home screen or browser would cause the screne to scroll downwards to show more content.
Note: If you have turned the screen reader on and wish to disable it again, you must navigate back to the setting via these new gestures and double-tap the checkbox once it is highlighted to turn it off again. That will restore the touch screen functionality to its default behaviour.
Note: In Firefox 1.4 and above, there is a quick toggle for the screen reader. Press volume up, then down, three times (up, down, up, down, up, down). The screen reader will instruct you to perform this same action again (volume up, down, up, down, up, down) to turn it on if it is not running, or to turn it off if it is already running. If you do not want to change the current toggle state, simply do something else. That way, you can turn it on and off at will to test your web application for accessibility without having to navigate the accessibility settings menu each time.
Speech volume
A slider that controls how loud the speech is delivered.
Speech rate
A slider that controls how fast the speech is delivered.
Launch first time use
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.
Obsolete settings
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.
Accessibility
In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the Show_accessibility_settings section above.
Grid
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:
The grid's heavier lines are 32 pixels apart, both horizontally and vertically.
Show frames per second
In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the Frames_per_second section above.
Show time to load
In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the Time_to_load section above.
Rocketbar enabled
In Firefox OS versions older than newer 1.4, this option enables the new Firefox Rocketbar 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.
Note: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.
Contacts debugging output in adb
Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error"
in the Terminal.)
Progressive paint (was Layers: Progressive paint)
This was introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see bug 1003228).
Displayport Heuristics
- Default
- Center displayport
- Assume perfect paints
- Taller displayport
- Faster paints
- No checkerboarding
These options were introduced to help with debugging of the Async Panning/Zoom module (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).
Keyboard layouts
In addition to the developer-specific options listed above, Firefox OS < 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:
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.
Note: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.