Dev Tools (aka Inspector)

Table of Contents

• Supported Platforms
• Configure Inspector
  • Windows
  • Android
• Accessing DevTools
  • Windows
  • UWP (Universal Windows Platform)
  • Android
• Supported panels
• Further Resources

Hummingbird remote debugging support is currently a task in active development. The Google Chrome browser is required.

Hummingbird DevTools are based on Google Chrome DevTools. The inspector actually acts the same way as one may expect form the real Google Chrome browser with remote debugging enabled. Among the many advantages of the chosen approach are the many features, the usability and no need to get used to a new GUI if you already have some experience with Google Chrome debugging.

Supported Platforms

• Windows
• Android
• UWP [partial]
• Xbox One [partial]
• PlayStation 4 [partial]
• Nintendo Switch [partial]
• Mac OS X [partial]
• iOS [planned]

Configure Inspector

First make sure to properly configure the application using Hummingbird to enable debugging. Configuration is simple - just modify a couple of values SystemSettings (see below), for Android some temporary change the manifest file is needed. From there on the workflow is the same as every JavaScript developer would expect.

Windows

• Enable inspector:
  • Make sure that the HttpServer.WindowsDesktop.dll shared library is present
  • During initialization of the application set cohtml::SystemSettings::DebuggerPort / cohtml::SystemSettings::EnableDebugger to a valid port number and to explicitly enable debugging:

sysSettings.DebuggerPort = 9444;
sysSettings.EnableDebugger = true;

• During the first time Windows will possibly ask for firewall permission that must be granted for opening requested port

Android

• Enable inspector:
  • Make sure that the libHttpServer_Android.so shared library is present
  • During initialization of the application set cohtml::SystemSettings::DebuggerPort / cohtml::SystemSettings::EnableDebugger to a valid port number and to explicitly enable debugging:

sysSettings.DebuggerPort = 9444;
sysSettings.EnableDebugger = true;

• Give internet access in the manifest file.

Note

Make sure this permission is not present in the shipping configurations unless needed by the application.

<uses-permission android:name="android.permission.INTERNET" />

Accessing DevTools

Windows

• Once the application is started if everything is configured correctly Hummingbird will listen for HTTP requests on the opened port on the PC. This means that a browser can send requests and the UI debugger is going to handle and respond to them. Make sure the chosen browser is Google Chrome.
• Connect to the PC and port provided in cohtml::SystemSettings::DebuggerPort from Google Chrome. This could be localhost:port if Google Chrome is run on the same PC as Hummingbird.

• From here on the workflow is the same as Google Chrome - all available Views are listed upon connection.

• Choose the view to debug and proceed with troubleshooting.

UWP (Universal Windows Platform)

Configuring and using the inspector is similar to Windows. However, there is an exception if you want to use the inspector on the same machine at which the application you want to inspect is running.

On UWP you can't normally connect to the inspector from an application on the same machine due to disabled network loopback. Therefore you have to connect from another IP address. However, if you want run the inspector on the same machine you can run C:\Windows\System32\CheckNetIsolation.exe with the following options:

CheckNetIsolation.exe LoopbackExempt -is -n=AppContainer Name or Package Family Name

The Package Family Name can be found by opening the appxmanifest of the UWP app in Visual Studio and selecting the Packaging tab. This command allows the application to receive inbound connections. It should be left running while you are inspecting the application. For example, to enable the inspector for the UWPCohtml sample on the same machine you have to run the following:

CheckNetIsolation.exe LoopbackExempt -is -n=8df7e036-ff94-4ed5-a2d3-2b2933d4cbf5_36aj8sfe8v5jt

After that you can connect to the PC and port provided in cohtml::SystemSettings::DebuggerPort from Google Chrome.

Android

Workflow is similar to Windows with one difference:

• Connection is remote - from the Google Chrome browser running on a PC to the application running on a device.
• In order to debug the application determine its IP address by connecting it to the Wi-Fi and checking the WLAN IP address from Settings (different per device).
• Connect using that IP and the port provided in cohtml::SystemSettings::DebuggerPort from Google Chrome, instead of localhost.

Note

Debugging is remote, rather than through a USB connection, so one is not needed.

Supported panels

• Elements panel
  • DOM tree view - read-only static view of the DOM tree. Refresh the inspector to get the latest version of the DOM tree.
  • Element styles view (accessed through the Styles sidebar tab) - read-only static view of the element inline and attribute styles. Ruleset matched styles are not shown. Styles are refreshed when an element is selected.
  • Element computed style (accessed through the Computed sidebar tab) - List of all computed styles including rendered fonts information. Styles and font info are refreshed when other element is selected.
• Debugging JavaScript (accessed through the Sources tab). Fully supported on Windows and Android only.
• Console (accessed through the Console tab). Fully supported on Windows and Android only.
• Performance profiling (accessed through the Performance tab). Partial support on all supported platforms:
  • Recording
  • Timeline - Style recalculations, script execution, layout, GPU time
  • GPU time is currently only supported with DirectX 11

Everything not mentioned is not supported.

Further Resources

For more information on DevTools usage consult the documentation here.