Debugging

Like with any software development project, things can (and do) go wrong. Although you can always use console.log to print some information, there are several more efficient options for debugging Eko projects.

Debug Mode

You can use our debug plugin to enable Debug Mode. Just add the query string parameter debug=true to the url.

In Debug Mode an overlay will be placed on top of the player with some useful debugging views. The top bar allows navigation between the different debugging views. Placing the debug views on top of the player allows testing and debugging in embeddable context, where accessing the console and the browser devtools is not always available. You can even add your own tabs that provide information about your code and logic.

The bottom bar shows the player engine, player version, current node, current time and playlist duration.

Player

The Player tab shows data about the network bandwidth, fps and information about the video formats that were chosen for current node.

Playlist

The Playlist tab shows realtime info about the playlist’s status. The node being played is displayed in green. The progress within the node is represented as a moving black line. The red line represents the prefetching status of future nodes in the playlist.

By hovering a node you can see the children and prefetches of that node.

Consolay

The Consolay tab displays all the logs from the console in an overlay. It is useful for debugging your project on platforms in which you can not access the Javascript console (i.e Facebook mobile app).

Decision

The Decision tab shows information about decision instances.
For each decision instance it displays the parent node, children nodes, start and end time, as well as the status and selected node. The red background color helps you see the changes in the decision instance properties in runtime.

Variables

The Variables tab shows all the variables you defined in your project via the variables plugin.
Like in the decision tab, the red color appears in runtime for each variable change.

Player Options

The Player Options tab shows the playerOptions object that was passed to the player upon initialization. You can expand / collapse the different objects in the options. The colors signify, which part of Eko’s platform contributed that specific value. dev signifies changes made by the project developer (that’s you!) in src/config/playerOptions.json, while studio, helloeko and cms all represent internal Eko sources.

Adding your own debug tab

Sometimes you may have some extra data in your project that you might want to see visually for easier debugging. In order to do that you can add your own tab on the debug plugin by using the api player.debug.addTab.

Player events

Since a lot of the player code is event-driven, you can listen to player events and add your own traces in order to understand more easily what is happening and when. For example:

player.on('nodestart', function(node) {
    console.log('this node has started: ', node.id);
});

For a full list of events, check out the Player API documentation.

React devtools

The React Developer Tools Chrome extension cannot be used with Eko projects since it does not support embeddable apps served in iframes. We recommend working with the standalone react-devtools.

Install react-devtools globally via npm:

npm i -g react-devtools

When testing add the --react-devtools flag. The React devtools window will open and the connection to the project being tested will be established.

eko studio test --react-devtools

Redux devtools

When working with Redux it’s often useful to see the current state and the history of changes. This is possible by using the Redux devtools extension.
The extension has an ability to “time-travel” between the state timeline. This is very useful to debug components that need to reflect state changes without reloading and rerunning the entire project.

Alt Text

Exceptions

Unhandled exceptions that are thrown in your code while in a player event handler context will be caught by the Eko Player and printed to the console. Although the error printed might appear as if it’s coming from the player, you can see the origin of the exception and jump to the corresponding line in the code by expanding the error.

Rate this page: X
Tell us more!