やりたいこと

node のフレームワークである Sails を Chrome でデバッグする方法についてメモします。

今回は node に標準搭載されているデバッグ機能（inspect）を Sails.js で使ってみます。

環境

OS: macOS High Sierra 10.13.6
node.js: 10.15.1
Sials.js: 1.2.2

node に標準搭載されているデバッグ機能を使えば、コード内に debugger と追記することで処理を止めることができます。

今回は、api/controllers/entrance/signup.js を使って試してみたいと思います。
signup.js は Sails を 1. Web App テンプレートでインストールすると最初から用意されているコントローラです。

ユーザー登録の処理が行われるときの input の中身を確認してみましょう。
以下の場所に debugger を追記します。

api/controllers/entrance/signup.js

// ...略...
  fn: async function (inputs) {
    debugger; // ここに追記

    var newEmailAddress = inputs.emailAddress.toLowerCase();
// ...略...

次にサーバーを立ち上げます。

サーバーの起動については、いろいろな記事で sails lift コマンドが紹介されていますが、これでは今回のデバッグ方法が使えません。

デバッグする際は以下のコマンドを使用します。

$ sails inspect

また、古いバージョンでは sails debug コマンドを使用するみたいですが、最新版（2019年６月現在）では上記のコマンドを使用します。

実際にデバッグする画面を Chrome 上に表示させます。

Chrome を起動し chrome://inspect/ にアクセスします。
すると、以下のような画面が表示されるかと思います。

一番下に「inspect」という表示があるのでクリックします。

上記のようなウィンドウが表示されます。
この画面上でデバックを行います。

実際にデバッグして見ましょう。

サーバーを起動した状態で http://localhost:1337 にアクセスすると、sials デフォルトのホーム画面が表示されます。

ホーム画面右上に「Sing up」ボタンがあるのでクリックし、ユーザー登録をおこなってください。

「Create account」を押すと、先ほどのウィンドウが表示され、debugger の部分で止まっているのがわかります。

input の隣には変数の中身が表示されています。
また、input にカーソルを合わせたり、右サイドバーの Scope からも中身を確認できます。

右上のアイコンをクリックすることでステップ実行も可能です。
重宝しそうです。