アルゴリズムとかオーダーとか

仕事で勉強したことなどをまとめてます

IntelliJ Idea(Ultimate)からmochaのdebuggerを使う

今回はタイトルの通り、IntelliJ Ideaを使ったmochaのdebuggerを使う環境構築の方法を紹介します。
いい加減、mochaのtestを書くためにconsole.logで変数を追っていくのに疲れたので、重い腰をあげてdebugger環境を作ってみました。

結論としては非常に簡単に作れました。なお、Ultimate版のみ対応とのことです。

では以下で構築方法を簡単に説明します。

前提

今回のゴールは、IntelliJ IdeaのGUI上からmochaで実行しているtestにbreakpointを入れたり、変数の中身をみたりできるようにすることです。そのために、まず、mocha testをnode debuggerから起動する方法を調べてみました。

が、その前に、そもそもとして僕はNode.jsのdebuggerを使ったことがなかったので、まずはNode.jsのデバッガーの起動方法を調べてみました。

1. Node.jsデバッガーの起動方法

Node.jsはデフォルトでデバッガー機能を持っています。

次のコマンドでNode.jsのcli debuggerを起動できます。

node inspect app.js

Node.jsではデフォルトでデバッガーを持っていること、そしてNode.jsデバッガーの起動方法がわかりました。次は、mocha testをこのデバッガーを用いてstep実行する方法について調べてみます。

2. mocha testをNode.jsのデバッガーから起動する

調べた結果すごく簡単にmocha testをNode.jsのデバッガーから起動できることがわかりました。
qiita.com

ということで早速やってみます。

  • 2.1. package.jsonにmocha debugのscriptを作成

f:id:y_nakajo:20181114012932p:plain

  • 2.2. npm run debugで実行

f:id:y_nakajo:20181114013141p:plain

ここまでで、ひとまずコンソールからmochaをNode.jsのデバッガー経由で実行できる方法がわかりました。ということで、次はIntelliJ Ideaからmochaのデバッガーを起動する方法を調べてみます。

3. IntelliJ Ideaからmochaのデバッガーを起動する

IntelliJの公式ページにmochaのデバッガーをIdeaから利用する方法が書いてました。

ただし、

This feature is only supported in the Ultimate edition.

との記述もありました。幸い僕はUltimateを使っているので早速やってみました。

  • 3.1. mochaのrun configurationを作成

f:id:y_nakajo:20181114013816p:plain
configurationにmochaがあったのでこれを選択

f:id:y_nakajo:20181114013937p:plain
package.jsonにすでに設定したあったoptionなどを記入

  • 3.2. mochaのデバッガーをIntelliJから起動する

f:id:y_nakajo:20181114014109p:plain

デバッグモードで起動したところ、上図の通り無事ブレイクポイントで停止して変数の中身が表示されました。

まとめ

IntelliJ Ideaではすでにmocha testのデバッガー環境がサポートされていたようで、思ったよりも非常に簡単に環境を作ることができました。
こんなことならさっさとやっておけばよかった。。。