Firefox Developer Tools, episode 34

A new set of Firefox Developer Tools features has just been uplifted to the Aurora channel. These features are available right now in Aurora, and will be in the Firefox 34 release in November. This release brings new tools (storage inspector, WebIDE), an updated profiler, and handy enhancements to the existing tools

WebIDE

The WebIDE is the replacement for the App Manager. Like the App Manager, it enables you to run and debug Firefox OS apps using the Firefox OS Simulator or a real Firefox OS device.

However, it also provides an editing environment for you to create and develop Firefox OS apps, including a tree view of all the files in your app with the ability to edit and save them, and two app templates to help you get started.

The WebIDE is available from Firefox 34 onwards.

You can also enable it in Firefox 33, by changing a preference: Visit about:config, find the preference called devtools.webide.enabled and set it to true.

WebIDE allow users to:

  • Edit apps (WebIDE comes with its own code editor)
  • Install apps to the device/simulator
  • Debug apps (WebIDE integrates the usual Firefox DevTools).

Major features

  • Code Editor: The user can write the code of its app in WebIDE. It’s an optional feature. User can still use his own editor.
  • App Creation: 2 simple app templates are offered to the user.
  • App Validation : A validation mechanism will report any common errors in the manifest and the app structure.
  • Runtimes & Simulators : WebIDE supports Firefox OS devices connected via USB. It’s also possible to install and run simulators.
  • Auto-install ADB : ADB (required to connect the phone via a USB cable) is automatically installed and controlled via WebIDE. The user won’t need to install extra addons or android tools.
  • Key-bindings and quick iteration : Common keybindings make iterating very simple. Write code in WebIDE. Save (Ctrl-s). Push and reload app (Ctrl-r). Close app (Ctrl-w). Repeat.
  • Device Info: get an extensive list of data from the device (versions, hardware, screen resolution, permissions, …
  • Debug non-local apps: Apps running on the device (like gaia apps) are debuggable. Certified apps are not debuggable by default (see how to enable certified apps debugging)

Storage inspector

The Storage Inspector enables you to inspect various types of storages that a web page can use. Currently it can be used to inspect the following storage types:

  • Cookies – All the cookies created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.
  • Local Storage – All local storage items created by the page or any iframes inside the page.
  • Session Storage – All session storage items created by the page or any iframes inside the page.
  • IndexedDB – All indexedDB databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.

storage-inspector-3-500

For the time being, the Storage Inspector only gives you a read-only view of storage. But there is work in progress to allow editing the  storage contents in future releases.

The Storage Inspector is new in Firefox 34.

Storage Inspector is disabled by default. Enable it in the Developer Tools Settings.

jQuery events

The event listener popup in the Inspector now supports jQuery. This means the popup will display the function you attached with e.g. jQuery.on(), and not the jQuery wrapper function itself. See this post for more info and how to add support for your preferred framework. (development notes)

jQuery-events-500

 

Iframe switcher

Change the frame you’re debugging using the new frame selection menu. Selecting a frame will switch all of the tools to debug that iframe, including the Inspector, Console, and Debugger. Add the frame selection button by checking off Settings > “Available Toolbox Buttons” > “Select an iframe”. (docs) (development notes)(UserVoice request)

iframe-switcher-500

 

https://www.youtube.com/watch?list=PLo3w8EB99pqLZNY22xKbTEzMfYo9PXAlm&v=Me9hjqd74m8

Updated profiler

An updated JavaScript profiler appears in the new “Performance” tab (formerly the “Profiler” tab). New to the profiler are a frame rate timeline and categories for frames like “network” and “graphics”. (docs) (development notes)

updated-profiler-2-500

console.table()

Add a call to console.table() anywhere in your JavaScript to log data to the console using a table-like display. Log any object, array, Map, or Set. Sort a column in the table by clicking on its header. (docs) (development notes)

console.table-500

 

Selector preview

Hover over a CSS selector in the Inspector or Style Editor to highlight all the nodes that match that selector on the page. (development notes)

selector-preview-2-500

Firefox Developer Tools things worth mentioning

  • Persistent split console – The split console (opened by pressing ESC) will now open with the tools if you had it open the last time the tools were closed. (development notes)
  • Web audio – AudioParam connections – the Web Audio Editor now displays connections from AudioNodes to AudioParams. (development notes)