Quantcast
Channel: Advancing WebRTC
Viewing all articles
Browse latest Browse all 14

Debugging with about:webrtc in Firefox, Getting Data Out

$
0
0

Inspecting data in about:webrtc during a call can be helpful when diagnosing WebRTC call troubles. Doing so in real time while participating in a call is not always an option. Recent work in about:webrtc has made it easy to get data out of Firefox and into your notes, your bug reports, or your service tickets.

Today, we’ll go over the different information that the about:webrtc page holds and how to get it out into your clipboard quickly and effectively.

What is the about:webrtc page

Most browsers have about: pages that show internal configurations and states. You can navigate to about: pages in the address bar to view and configure browser settings, discover advanced information, and more. In Firefox, you can find a list of all about: pages at about:about.

We’ve made a number of improvements to the about:webrtc page where you can see call signaling, network traffic, and connection establishment and incorporate this data into your notes or bug reports. There are four main sections on this page; RTCPeerConnection Statistics, a Connection Log, User-modified WebRTC configs, and Media Context. We’ll look at these elements in more detail in the following sections below.

RTCPeerConnection statistics

In order to analyze the current state of a call a number of stats are exposed to web developers. As a user, getting access to these stats from within a call can be challenging. For that reason, a live view of this data is also available inside of about:webrtc.

Auto Refresh checkbox in about:webrtcBefore elaborating, it is important to note that in about:webrtc stats will be continually updated when “Auto-refresh” is selected for the “RTCPeerConnection Statistics” section. Conversely, unchecking this option will freeze the displayed stats. I find it helpful to turn off Auto Refresh during a transient event I wish to inspect.

Copy Report

Pressing the “Copy Report” button within a RTCPeerConnection subsection copies to the clipboard the most recently displayed stats report in JSON format. Instructions for pasting JSON data into a Bugzilla bug are provided at the end of the article.

 

RTCPeerConnection statistics subsections

copying subsection stats in about:webrtcSometimes, less is more. Perhaps you don’t need an entire stats report, but a sub-class of stats would suffice. Many UI sections let you copy data using a rollover copy button. Most sections are derived from stats reports and work like the “Copy Report” button. It will copy the stats objects from the most recently displayed stats report data to the clipboard in JSON format. Adding this to a bug in a Bugzilla follows the same steps as attaching a full stats report. The SDP section, which is not derived from the stats reports, can also be copied as JSON.

Stats report history

about:webrtc "Copy Report History" buttonSometimes more is more. about:webrtc stores a rolling window of stats reports which can be copied to the clipboard via the “Copy Report History” button. By default the duration of the history is one minute. This can be useful for inspecting data after the fact from a transient event. The process for adding this data to a Bugzilla bug report is identical to adding a single stats report.

This rolling window of reports is not persisted when the browser is closed. It can also be cleared by pressing the “Clear History” button in the “RTCPeerConnection Statistics” section heading of about:webrtc and then refreshing the page.

about:webrtc "Clear History" button

Save Page button

about:webrtc "Save Page" button While not new, it is important to note that the “Save Page” button at the bottom of about:webrtc will, when pressed, produce a static HTML file with the contents of about:webrtc. A save dialog will appear, allowing the user to save this file to their machine.

Preferences

Anywhere a preference appears in about:webrtc one can click the copy button to copy the preference path to the clipboard. That can then be pasted into the search field inside of about:config. Neat.

Pasting JSON data into Bugzilla bugs

JSON can be directly attached to a bug in Bugzilla via the “Attach File” button in the “Attachment” section. You can paste the JSON-formatted report into the “File” field, choose “JSON source (application/json)” from the “select from list:” content-type option, and add a brief description in the “Description” field.

More

Sometimes even more information is helpful, so in an upcoming blog post we will discuss logging and profiling WebRTC calls in Firefox. If one is interested in debugging Firefox we now have in-tree documentation that you may find helpful. If one wants to try out about:webrtc without starting a conference call with friends, try a single tab call from the WebRTC.org code samples.

The post Debugging with <code>about:webrtc</code> in Firefox, Getting Data Out appeared first on Advancing WebRTC.


Viewing all articles
Browse latest Browse all 14

Trending Articles