This article goes through an explanation of how to debug a web browser using web inspector on H200 Set-up-box.
The main points of the article are:
- How to open web inspector
- How to debug web browser
How to open web inspector
Firstly, to enable the H200 web inspector we need to enable on Engage group or DHCP INI file the following option,
Secondly, before debugging the web browser, we need to access the web inspector using the following steps,
1º ADB to the STB
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;
3º Click "Inspect" of the device you want to inspect and the Devtools will open,
How to debug 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
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.
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.
Click the Performance tab. The Performance panel opens.
Log performance activity
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.
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.
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.
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.
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.
Take a snapshot
On the Profiles panel, choose Heap Snapshot, then click Take Snapshot.
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.
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:
Initially, a snapshot opens in the Summary view, displaying object totals, which can be expanded to show instances:
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.
More API calls are available on our firmware, please see the documentation available on our Download Area.
More information about the Devtolls resources please see devtools.