※スマホ対応はしてません。

タグ: デバッグ

サーバー側やCLIのNode.jsアプリをDevToolsでデバッグする(ひとり DevTools Advent Calendar 2020 – 01日目)

カテゴリー: JavaScript

1 日目の記事です。

DevTools でデバッグといえばクライアント側の話が一般的ですが、サーバー側や CLI アプリのデバッグでも利用できます。ブレイクポイントとか便利ですよね。

DevToolsでサーバーJSをデバッグする様子。変数の中身を確認できる。

先にまとめ

  • Chrome 系の DevTools を使って、Node.js アプリをデバッグできる
  • --inspect オプション付きで実行
  • DevTools に Node.js のボタンが出てくる
  • Node.js 用の DevTools ウィンドウが現れる

やり方

Node.js のページに書いてあります。

When started with the --inspect switch, a Node.js process listens for a debugging client. By default, it will listen at host and port 127.0.0.1:9229. Each process is also assigned a unique UUID.

--inspect スイッチ付きで起動すると、Node.js プロセスはデバッガークライアントを待ちます。初期値では 127.0.0.1:9229 というホストとポートを待ちます。また、各プロセスには独自の UUID が割り振られます。

というわけで、こうです。もちろんサーバーじゃない用途の開発でも同様です。

$ node --inspect ./app.js

実践してみる

試してみましょう。

プログラムの用意

express を使ったごく単純なサーバープログラムを用意しました。別にサーバーじゃなくても、例えば readline を使った対話式 CLI アプリでも構いません。

  • app.js
const express = require("express");

const port = 8000;

const app = express();

app.get("/", (req, res) => {
  console.log("Request", req);
  res.json({ message: "ok" });
});

app.listen(port, () => console.log("Listening at", port));

起動

普通に実行すると、こうです。Ctrl+C で終了します。

$ node app

これを、代わりに例の --inspect オプション付きで起動します。

$ node --inspect app

DevTools アクセス

Google Chrome で適当なページへアクセスし、DevTools を開きます。先のアプリを起動していれば、DevTools の左上に Node.js のアイコンが表示されているはずです。

ウェブページの DevTools 左上に Node.js の緑色のアイコンが表示される。

Node.js アイコンをクリックすると、別の DevTools ウィンドウが開きます。これがこのアプリ用の DevTools です。

ブレイクポイントを仕掛けてみる

Scripts タブを開いて、左側のツリーや、 Ctrl+P でファイル名入力するなどして app.js を開きます。開いたら行番号のあたりをクリックして。

はいできました。req の中身を覗いたりできますね。

req の値を覗く様子。

だめなとき

Node.js アイコンが出てこない

--inspect の位置が違うかも。

正解は実行対象の JS ファイル名より前。

$ node --inspect app.js
Debugger listening on ws://127.0.0.1:9229/36d5976e-c96a-4fe4-b0b0-7cd00d05cf80
For help, see: https://nodejs.org/en/docs/inspector
Listening at 8000

JS ファイルより後ろに書くと意味が変わってしまう。(DevTools へ接続できない。)

$ node app.js --inspect
Listening at 8000

その他

inspect サブコマンド

オプション --inspect じゃなくてサブコマンド inspect で、CLI デバッガーを起動できます。

node と同じく .exit で終了。

$ node inspect ./app.js
< Debugger listening on ws://127.0.0.1:9229/b10b6620-d35a-49d0-a6ab-4c65cdfcbc22
< For help, see: https://nodejs.org/en/docs/inspector
< Debugger attached.
Break on start in app.js:1
> 1 const express = require("express");
  2 
  3 const port = 8000;
debug> .exit

正直使ったことないのでわからないです。

リモートサーバーをデバッグ

ssh でポート転送すると手元の DevTools でデバッグできるようになります。なんかすごい。

$ ssh -L 9221:localhost:9229 [email protected]

別記事でもう少し詳しく。やります。

おしまい

やっぱりターミナルに値を出力して確認するより見やすいし、ブレイクポイント使えるのは大変便利だと思います。

まあサーバー側書く機会は減りそうだけど、CLI ツール作るときとかもデバッグに便利です。

(世のサーバーレスなやつはどうやるんだろ。)

参考

必殺の .apply()フックを打つべし! 打つべし!(JavaScript おれおれ Advent Calendar 2011 – 17日目)

カテゴリー: JavaScript, Web

JavaScript おれおれ Advent Calendar 2011 – 17日目

.apply()で成り済ましができたり仕事をスルーして丸投げしたりする事ができますが、さらにもうひとつ、フックを行う事ができます。

フック(hook)というのはフック船長のフック、鉤爪の事で、処理を「ひっかける」ような事です。ある関数が実行される際に、独自のコードを実行させる事ができます。

フック(Hook)は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。

あの処理がどこで呼ばれてるかわからないときに

具体例をひとつ。例えばjQueryで「どこかのタイミングで勝手にクラス名が追加されてしまって困っている」という場合を考えます。その場合は .addClass()を「フック」して、ログ出力の処理を追加します。

(さらに…)