1.7.2.9
Prysm
Dev Tools (aka Inspector)

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

Prysm's DevTools are based on Google Chrome's DevTools. The DevTools 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 debugging in Google Chrome.

Supported Platforms

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

Refer to the Supported panels below for more info.

Configure Inspector

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

Windows

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

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 Cohtml 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 ran on the same PC as Cohtml. All available Views are listed upon connection.
inspectablePages.jpg
Image
  • 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 - view and modify the DOM tree.
    • Element styles view (accessed through the Styles sidebar tab) - view of the element's inline and attribute styles.
    • 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 another 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.
  • Sources
    • The panel is supported on all compatible platforms
    • Known issues: When navigating between pages (or dynamically re-loading the same page) while connected with the DevTools, the Sources panel is not updated correctly. Please refresh the browser window with DevTools to see the correct loaded sources.
  • Performance profiling (accessed through the Performance tab). Partial support on all supported platforms:
    • Recording
    • Timeline - see how much time did different components take - style recalculations, script execution, layout, GPU time.
    • GPU metrics are only supported with DirectX 11

Anything not mentioned is not yet supported.

Source maps

Since the inspector loads source maps by itself and doesn't understand the coui:// protocol, the only way to use source maps is if they are embedded. How to do that https://github.com/CoherentLabs/InlineSourceMaps

Further Resources

For more information on DevTools usage consult the documentation here.