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 blue. The progress within the node is represented as a moving green line. The red line represents the prefetching status of future nodes in the playlist. Note also the Click-to-Seek Mode checkbox: Checking this will enable you to jump directly to a specific position in the playlist by clicking in the relevant node.
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, eko and cms all represent internal Eko sources. queryParams represent options that were derived due to query string params in the current URL.
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.
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.
