Отладка Mocha в браузере с помощью Node и полных SourceMaps!

TL;DR

Начиная с Node v6.3.0, теперь мы можем отлаживать приложения Node в Chrome DevTools. НО, как я расскажу позже, вам понадобится Node v7.2.1, если вы хотите загрузить полную поддержку SourceMap.

Ознакомьтесь с рабочим репозиторием Github здесь.

Mocha был создан на основе Node, и благодаря улучшениям инструментов мы теперь можем использовать его в полной мере. Благодаря новой поддержке возможности отладки Node.js, появившейся недавно, мы теперь можем использовать возможности тестирования с помощью Mocha и отлаживать в браузере с полными SourceMaps.

Хотя отладка с помощью DevTools Inspector была введена в Node v6.3.0, работающая поддержка SourceMap на самом деле не была реализована до Node v7.2.1. И это опять же возможно только с Chrome Canary ›57.

Поскольку Mocha работает на Node, мы можем добавить аргументы проверки Node CLI в инструкцию Mocha-CLI, и они передаются в Node.

Это делает довольно тривиальным включение отладки на основе браузера в нашу рутину.

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

Работает с полным режимом наблюдения при добавлении аргумента --watch, а также повторно выполнит ваши тесты и перезагрузит ваши DevTools!

Достаточно сказать, скачайте последние версии Node и Canary, и все будет готово!