Debugging Mocha in the Browser with Node and full SourceMaps!

TL;DR

As of Node v6.3.0, we can now debug Node applications in Chrome DevTools. BUT, as I’ll elaborate on later, you’re going to need Node v7.2.1 if you want full SourceMap support to boot.

Checkout a working Github repo here.

Mocha was built on Node, and with improvements in tooling, we can now utilise it to it’s fullest. With the new support for Node.js debuggability having landed recently, we can now leverage the power of testing with Mocha, and debug in the browser with full SourceMaps.

Although debugging via the DevTools Inspector was introduced in Node v6.3.0, working SourceMap support wasn’t actually realised until Node v7.2.1. And this again is only possible with Chrome Canary >57.

As Mocha runs on Node, we can add the Node CLI inspection arguments to the Mocha-CLI instruction, and they’re passed down to Node.

This makes it pretty trivial to incorporate browser based debugging into our routine

"scripts" {
  "test": "$(npm bin)/mocha", 
  "test:debug": "$(npm bin)/mocha --source-maps --inspect"
}

Works with full watch mode when adding --watch argument, and will re-execute your tests and reload your DevTools as well!

Suffice to say, grab the latest Node and Canary versions and you’ll be good to go!