node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »




  1. Include bootstrap.js in after video.js: <script src="src/js/bootstrap.js"></script>
  2. Include debugger.css: <link href="src/css/debugger.css" rel="stylesheet">
  3. Initialize the debugger with the url to the debugger.js file:
var player = videojs('video');
  js: "src/js/debugger.js",
  css: "src/css/debugger.css"

F2 or Triple Tap to open debugger

The debugger is loaded on demand via a certain trigger.

  • On desktops, the trigger is <F2>.
  • On mobile devices, the trigger is a three finger tap


  • js: The url to the debugger script
  • css: The url to the debugger stylesheet



Once the the plugin gets loaded, there are several extra logging methods available for use. ### Available always

  • videojs.log.debug - Adds a debug message
  • videojs.log.warn - Adds a warn message
  • - Adds an info message. This one is equivalent to videojs.log itself
  • videojs.log.error - Adds an error message

Available after the debugger has been opened

  • videojs.log.resize - Toggles the size of the debugger window
  • videojs.log.clear - Clears the current output in the debugger window
  • videojs.log.move - Moves the debugger window to the next corner
  • videojs.log.profile - Adds a profile message

Known issues

  • Email: To test emailing the log, you will need to supply a recipient's email address when your email client opens.
  • Email: Currently, email does not format the log dump. The contents of the email are the contents of the array of Strings, separated by commas. Would formatting be handled better on the server side?