Skip to main content

Debug Web Browser Using Web Inspector

Tim Newman
  • Updated

Introduction

This article goes through an explanation of how to debug a web browser using web inspector on an Amino media player such as the H200.

The main points of the article are:

Prerequisites

This article assumes you are using Chrome Browser, that you are familiar with using ADB (Anroid Debug Bridge).  The typical audience for this article is someone wishing to develop or debug a web application for use on an Amino H-series device.

Summary

How to open web inspector

Firstly, to enable the H200 web inspector we need to enable on Orchestrate group or DHCP INI file the following option:

browser.inspector.enable=true

Secondly, before debugging the web browser, we need to authorize the Web Inspector to connect to the device.  We can do this by first connecting to the STB via ADB (Android Debug Bridge)

 

1) ADB to the STB

adb.PNG

Note: To ADB to the STB you need to enable developer mode, please see the article How to set developer mode and usb debug

 

2) Type the URL chrome://inspect/#devices

Note: the URL must be typed in a web browser from a device within the same network as the H200;

inspector.PNG

 

3) Click "Inspect" of the device you want to inspect and the Devtools will open,

inspector1.PNG

 

How to debug the web browser

After accessing web inspector, we have access to useful tools to debug on the H200, we will explain the most important ones such as Network, Performance, Memory and Enable JS API.

Right now the panels are empty. That is because DevTools only logs activity while it is open and no activity has occurred since you opened DevTools. Please reload the page.

Network

Click the Network tab. The Network panel opens.

Log network activity

To view the network activity that a page causes:

Reload the page. The Network panel logs all network activity in the Network Log.

mceclip0.png

Each row of the Network Log represents a resource. By default, the resources are listed chronologically. The top resource is usually the main HTML document. The bottom resource is whatever was requested last.

Each column represents information about a resource. Default columns:

    • Status. The HTTP response code.

    • Type. The resource type.

    • Initiator. What caused a resource to be requested. Clicking a link in the Initiator column takes you to the source code that caused the request.

    • Time. How long the request took.

    • Waterfall. A graphical representation of the different stages of the request. Hover over a Waterfall to see a breakdown.

 

Performance

Click the Performance tab. The Performance panel opens.

 

Log performance activity

mceclip3.png

  1. Look at the FPS chart. Whenever you see a red bar above FPS, it means that the framerate dropped so low that it is probably harming the user experience. In general, the higher the green bar, the higher the FPS.

  2. Below the FPS chart you see the CPU chart. The colors in the CPU chart correspond to the colors in the Summary tab, at the bottom of the Performance panel. The fact that the CPU chart is full of color means that the CPU was maxed out during the recording. Whenever you see the CPU maxed out for long periods, it is a cue to find ways to do less work.

  3. Hover your mouse over the FPS, CPU, or NET charts. DevTools shows a screenshot of the page at that point in time. Move your mouse left and right to replay the recording. This is called scrubbing, and it is useful for manually analyzing the progression of animations.

  4. In the Frames section, hover your mouse over one of the green squares. DevTools shows you the FPS for that particular frame. Each frame is probably well below the target of 60 FPS.

 

Memory

Click the Memory tab. The Memory panel opens.

This tool is useful to record heap snapshots with the Chrome DevTools heap profiler and find memory leaks.

The Chrome DevTools heap profiler shows memory distribution by your page's JavaScript objects. Use it to take JS heap snapshots, analyze memory graphs, compare snapshots, and find memory leaks.

 

Take a snapshot

On the Profiles panel, choose Heap Snapshot, then click Take Snapshot.

mceclip5.png

Snapshots are initially stored in the renderer process memory. They are transferred to the DevTools on demand, when you click on the snapshot icon to view it.

 

After the snapshot has been loaded into DevTools and has been parsed, the number below the snapshot title appears and shows the total size of the reachable JavaScript objects:

mceclip6.png

Note: Only reachable objects are included in snapshots. Also, taking a snapshot always starts with a garbage collection.

 

View snapshots from different perspectives for different tasks.

 

Summary view shows objects grouped by the constructor name. Use it to hunt down objects (and their memory use) based on type grouped by constructor name. 

 

Comparison view displays the difference between two snapshots. Use it to compare two (or more) memory snapshots of before and after an operation. Inspecting the delta in freed memory and reference count lets you confirm the presence and cause of a memory leak.

 

Containment view allows exploration of heap contents. It provides a better view of the object structure, helping analyze objects referenced in the global namespace (window) to find out what is keeping them around. Use it to analyze closures and dive into your objects at a low level.

 

Dominators view shows the dominators tree and can be useful to find accumulation points. This view helps confirm that no unexpected references to objects are still hanging around and that deletion/garbage collection is actually working.

 

To switch between views, use the selector at the bottom of the view:

mceclip7.png

 

Note: Not all properties are stored on the JavaScript heap. Properties implemented using getters that execute native code aren't captured. Also, non-string values such as numbers are not captured.

 

Summary view

Initially, a snapshot opens in the Summary view, displaying object totals, which can be expanded to show instances:

mceclip6.png

Top-level entries are "total" lines. They display:

  • Constructor represents all objects created using this constructor.
  • Distance displays the distance to the root using the shortest simple path of nodes.
  • Shallow size column displays the sum of shallow sizes of all objects created by a certain constructor function. The shallow size is the size of memory held by an object itself (generally, arrays and strings have larger shallow sizes).
  • Retained size column displays the maximum retained size among the same set of objects. The size of memory that can be freed once an object is deleted (and this its dependents made no longer reachable) is called the retained size. 

 

Enable JS API

Click the Console tab. The Console panel opens.

 

Running JavaScript

Amino's web browser includes support for a set of JS APIs that enable interaction from a web application to the H-series device.  Please see the references section for links to API documentation.


You can run JavaScript in the Console to interact with the page that you are inspecting, please see the following example, calling one of the API calls available on the firmware provided by Amino e.g. ENABLE.browser.getResolution();

 

mceclip9.png

 

References

More API calls are available on our firmware, please see the documentation available here.

For more information about the Devtolls resources please see devtools.

 

Related articles