Node.js で簡単に devtools のコンソールを使いたい
◆ chrome://inspect/ で設定
◆ node --inspect=0.0.0.0:9229 で実行
◆ node --inspect=0.0.0.0:9229 で実行
Node.js で Chrome の devtools を使ったデバッグをする手順です
VSCode のデバッグ機能でもいい気がしますが なれてる Chrome のほうが好きなので Chrome にしました
ただの REPL だけじゃなくて debugger を置けばそこで停止できて その時の変数状態を色々見れるので普通の Node.js の REPL より便利です
まず 「chrome://inspect/」 を開いて Configure... から Node.js を実行する PC の IP とポートを指定します
ポートはとりあえず標準の 9229 にします
Node.js を実行するマシンでただの node コマンドの代わりに
を実行します
ポートを変えるならここも変えます
「chrome://inspect/」 の Remote Target に Node.js が出てくるのでクリックします
適当なページの devtools が開いてる状態なら devtools の左上に Node.js アイコンが出るのでそこをクリックでもいいです
クリックしたら devtools ウィンドウが開くので そこのコンソールでコードを打てば Node.js で実行されます
require でライブラリをロードして内部の動作を調べたりすると便利です
例えばこういうコードを打ちます
path.resolve の前で停止してステップ実行できるので path.resolve が内部で何をしてるかを細かく確認できます
debugger も便利ですが一番助かるのは変数を詳しく見れる部分だと思います
Node.js で console.log を実行すると折りたたみがなく全部表示される上 ネストが深いと省略されたりで とても見づらいです
さらに prototype とかわざわざ指定して console.log しないと見れませんし console.log の表示をカスタムして一部だけしか表示しなくしてるものもあります
全部表示すると邪魔なのでありがたいといえばそうなのですが 全部のデータを把握したいときには困ります
そういう部分も含めて全て見れるので デバッグや新しく使うライブラリが内部で何してるか知りたいときとかに助かります
とすれば実行した上で devtools の接続もできます
実行しながら コンソールで REPL を使えます
アプリの全体データをどこかのモジュールに保存していれば それを require で表示して現在の状態を知ることができます
わざわざ現在の状態を出力するような API を設けたりしなくても devtools で見たいときに見れるので便利です
REPL 以外にも debugger や breakpoint があればそこで停止して変数の値を見たり書き換えたりもできますし ありとなしだと効率がかなり違ってくると思います
Ctrl-Shift-F でロードしてる全ファイルから検索できるので 目的のファイルを見つけて breakpoint を設置できます
require のときの相対パスは実行中のファイルじゃなくてカレントディレクトリからになります
VSCode のデバッグ機能でもいい気がしますが なれてる Chrome のほうが好きなので Chrome にしました
ただのデバッグ実行
普段 Chrome で devtools を開いてコンソールで色々実行するのを Node.js で行いますただの REPL だけじゃなくて debugger を置けばそこで停止できて その時の変数状態を色々見れるので普通の Node.js の REPL より便利です
まず 「chrome://inspect/」 を開いて Configure... から Node.js を実行する PC の IP とポートを指定します
ポートはとりあえず標準の 9229 にします
Node.js を実行するマシンでただの node コマンドの代わりに
node --inspect=0.0.0.0:9229
を実行します
ポートを変えるならここも変えます
「chrome://inspect/」 の Remote Target に Node.js が出てくるのでクリックします
適当なページの devtools が開いてる状態なら devtools の左上に Node.js アイコンが出るのでそこをクリックでもいいです
クリックしたら devtools ウィンドウが開くので そこのコンソールでコードを打てば Node.js で実行されます
require でライブラリをロードして内部の動作を調べたりすると便利です
例えばこういうコードを打ちます
debugger
path.resolve("foo", "/bar")
path.resolve の前で停止してステップ実行できるので path.resolve が内部で何をしてるかを細かく確認できます
debugger も便利ですが一番助かるのは変数を詳しく見れる部分だと思います
Node.js で console.log を実行すると折りたたみがなく全部表示される上 ネストが深いと省略されたりで とても見づらいです
さらに prototype とかわざわざ指定して console.log しないと見れませんし console.log の表示をカスタムして一部だけしか表示しなくしてるものもあります
全部表示すると邪魔なのでありがたいといえばそうなのですが 全部のデータを把握したいときには困ります
そういう部分も含めて全て見れるので デバッグや新しく使うライブラリが内部で何してるか知りたいときとかに助かります
Node.js アプリのデバッグ
ただの REPL だけじゃなく 普通のアプリケーション実行でも使えますnode --inspect=0.0.0.0:9229 app.js
とすれば実行した上で devtools の接続もできます
実行しながら コンソールで REPL を使えます
アプリの全体データをどこかのモジュールに保存していれば それを require で表示して現在の状態を知ることができます
require("./store")
// { /* data */ }
わざわざ現在の状態を出力するような API を設けたりしなくても devtools で見たいときに見れるので便利です
REPL 以外にも debugger や breakpoint があればそこで停止して変数の値を見たり書き換えたりもできますし ありとなしだと効率がかなり違ってくると思います
Ctrl-Shift-F でロードしてる全ファイルから検索できるので 目的のファイルを見つけて breakpoint を設置できます
require のときの相対パスは実行中のファイルじゃなくてカレントディレクトリからになります