今回から「技術塾」と題して主に初心者向けに基本的な技術情報を提供するカテゴリを作りました。最初の内容は、NodeJSアプリケーション開発において必須のスキルであるデバッグです。デバッグのできないプログラマなんて、寿司の握れない板前、英会話のできない英語教師、ホームランの打てない4番バッター、はたまた、メダルを逃したオリンピック選手(これはちょっと違うか)、例えたら切りが無いですね。今回はそんな残念なNodeJSプログラマにならないために、基本となる3つのデバッグ方法を紹介します。
見出し
はじめに
NodeJSに限らずデバッグはプログラマ、エンジニア、デベロッパーにとって必ずマスターしなければいけないスキルの一つです。そのスキルが無いと、バグが発生した時に原因を突き止めて改修することが事実上不可能だからです。
今回はNodeJSの初心者を対象として、基本となる3つのデバッグ方法を紹介しますので、必ずマスターしましょう。
なお、デバッグの0番目の方法としてconsole.logがありますが、当たり前なので書きません。
基本の3つのデバッグ方法
デバッグ用のソースコードの準備
それではデバッグを試すためだけの簡単な環境を準備しましょう。
$ mkdir nodejs-debugging
$ cd nodejs-debugging/
$ yarn init -y
$ yarn add node-emoji
$ touch debugging.js
「debugging.js」は以下にします。
const emoji = require('node-emoji');
const puppy = {
name: 'Pochi',
age: 1,
feeling: emoji.get('heart'),
owner: 'Tom Cruise'
};
console.log(puppy);
単にオブジェクトをコンソールに出力するだけのコードです。
標準のデバッガーでのデバッグ
1つ目は「debugger」と「inspect」コマンドを使うコンソールでのデバッグ方法を紹介します。これはnode-inspectという機能で、NodeJSには最初から搭載されています。
やり方はアナログですが、ブレークポイントを設定したい場所に「debugger」を書きます。
続いて、「node inspect」コマンドにより、デバッグを開始します。
「c」コマンドにより、ブレークポイントまで進みます。
ブレークポイントで停止した状態で、「repl」コマンドを実行することで、値を確認したり、値を変更したりできます。今回はpuppyのfeelingをheartからrelaxedに変更しました。確認や変更が終わったらControl+Cでこのモードから抜けます。
そして、「c」コマンドを実行すると他にブレークポイントが無いので終了します。値を変更した箇所は変更されたままで出力されていることが確認できます。「.exit」でデバッグを終了します。
デバッグ時のコマンドは以下です。
- cont, c … ブレークポイントまで進む
- next, n … 次のステップへ進む
- step, s … ステップイン
- out, o … ステップアウト
- pause … ポーズ
今回使ったのは「c」コマンドだけですが、詳しくは公式ドキュメントを参照して下さい。
Chromeでのデバッグ
2つ目はCromeのDevToolを使ってデバッグ方法を紹介します。まさにNodeJSがJavascriptであることを活かしたデバッグ方法です。
まず、Chromeを開き、「chrome://inspect/」を表示します。
次にコマンドラインで「node –inspect-brk」を実行しましょう。
$ node --inspect-brk debugging.js
Debugger listening on ws://127.0.0.1:9229/b50c177f-31d8-4db5-aac8-2411cdce33d9
For help see https://nodejs.org/en/docs/inspector
先程のChromeの画面にRemote Targetが表示されます。そうしたら「Open dedicated DevTools for Node」のリンクをクリックします。
するとChromeのデバッグ画面が表示されます。
試しに、コンソールのデバッグでやったのと同じことをしてみましょう。デバッグ画面からブレークポイントを設定します。ソースコードの横をクリックするだけです。
右上の三角のボタンをクリックするとデバッグが開始されます。以下のようにブレークポイントで止まり、値を確認できます。
Chromeのコンソールから値を確認することもできます。今回はfeelingの値をcycloneに変更しました。
もう一度右上の三角ボタンをクリックすると、他のブレークポイントが無いので、デバッグが終了します。コンソールに結果が出力されています。
この方法はかなり便利で、特にnodemonでアプリケーションを起動している場合は、ソースコードを変更してすぐに、デバッグの画面が更新されてます。node-inspectよりはるかにデバッグが簡単です。
Visual Studio Codeでのデバッグ
3つ目はVS Codeを使ったデバッグ方法を紹介します。
ソースコードをVS Codeで開き、左側の虫のようなアイコンをクリックします。
するとデバッグ画面が表示されるので、上の「構成がありません」をクリックします。
そして、「構成の追加」を選びます。
「環境の選択」には「Node.js」を選びます。
すると「launch.json」というデバッグ設定ファイルが自動生成されます。
今回は単にデバッグモードで実行できれば良いので、デバッグ設定ファイル(launch.json)は以下のように設定します。
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Run",
"program": "${workspaceFolder}/debugging.js"
}
]
}
後は、Chromeの時と同じようにデバッグできます。
ソースコードの右側をクリックして、ブレークポイントを設定します。
デバッグボタンをクリックするとデバッグが開始されます。
ブレークポイントで止まっている状態では以下のようになっています。
それでは、先ほどと同じように値を変更してみます。デバッグコンソールからChromeの時と全く同じように値を扱えます。
値の確認と変更が終わったら、上にある三角のボタンをクリックすれば、実行が再開されます。
デバッグコンソールに結果が出力されて、デバッグが終了しました。
この方法であれば、VS Codeのエディタ上でコーディングからデバッグまで完結させることができ、大変便利です。なので、当然これが一番オススメの方法です。
デバッグ設定ファイルの詳細はVS Codeの公式サイトを参照して下さい。
最後に
いかがでしたか？これでNodeJSのデバッグ方法の基本はマスターできたと思います。自分の関わったアプリケーションで障害が出た時に、華麗にデバッグして原因を究明し、ささっと改修してプロの仕事を見せつけましょう。それでは。
環境
- NodeJS : v9.5.0
- node-emoji : 1.8.1
最新記事 by Keid (全て見る)
- FormikでReactのフォームを華麗に扱う方法 - 2019年4月12日
- React Hooksを試してみよう！(useStateとuseEffect編) - 2019年4月5日
- GatsbyJSをWordPressのHeadless CMSのREST APIと連携する方法(JWT認証編) - 2019年3月11日
コメントを残す