Nuxt.js で SSR モードのデバッグに関する Tips

:taco: Chrome DevTools でデバッグする
----
SPA モードであればブラウザから Chrome DevTools を起動することが可能ですが、以下の script で SSR 時にも Chrome DevTools を起動することが可能です。
`node --inspect node_modules/.bin/nuxt-ts`
＃ts を利用していない場合は `node_modules/.bin/nuxt` になるかと思います。

package.json に以下のような script を追加しました。
`"debug": "node --inspect node_modules/.bin/nuxt-ts"`

これを `$ yarn debug` で実行する。

```log.txt
yarn run v1.16.0
$ node --inspect --expose-gc node_modules/.bin/nuxt-ts
Debugger listening on ws://127.0.0.1:9229/3607848e-d3ad-4aa5-9ee4-8444a98502c5
For help, see: https://nodejs.org/en/docs/inspector

   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.2                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                     11:57:50
ℹ Initial build may take a while                                                                                                                                                        11:57:50
✔ Builder initialized                                                                                                                                                                   11:57:50
✔ Nuxt files generated                                                                                                                                                                  11:57:50
ℹ Starting type checking service...                                                                                                                                     nuxt:typescript 11:57:54
ℹ Using 1 worker with 2048MB memory limit                                                                                                                               nuxt:typescript 11:57:54

✔ Client
  Compiled successfully in 17.81s

✔ Server
  Compiled successfully in 16.63s

ℹ No type errors found                                                                                                                                                  nuxt:typescript 11:58:12
ℹ Version: typescript 3.6.2                                                                                                                                             nuxt:typescript 11:58:12
ℹ Time: 10407ms                                                                                                                                                         nuxt:typescript 11:58:12
ℹ Waiting for file changes                                                                                                                                                              11:58:12
ℹ Memory usage: 457 MB (RSS: 547 MB)                                                                                                                                                    11:58:12
Debugger attached.
Debugger listening on ws://127.0.0.1:9229/3607848e-d3ad-4aa5-9ee4-8444a98502c5
For help, see: https://nodejs.org/en/docs/inspector
```

ここまで表示されたら `chrome://inspect/#devices` を開く。

<img width="1112" alt="スクリーンショット 2019-12-17 17.14.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49585/753cb21b-4b4f-3220-360e-6a3f4e6905cc.png">

inspect のリンクで Chrome DevTools が起動します。

Chrome DevTools が起動したらヒープダンプも取得可能なのでメモリリーク調査に有効です。具体的な調査方法は以下が参考になりました。
- [Node.jsでのJavaScriptメモリリークを発見するための簡単ガイド](https://postd.cc/simple-guide-to-finding-a-javascript-memory-leak-in-node-js/)
- [メモリの問題の解決 | Tools for Web Developers](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=ja)

:taco: メモリの使用量を観測する
-----

メモリの使用量を観測することはメモリリークの調査などに有効です。

[nuxt-memwatch](https://github.com/pimlie/nuxt-memwatch) を利用します。

詳細な利用方法は README に記載されているので割愛しますが、以下のようにグラフィカルにリソースの使用量を確認することができます。

<img src="https://raw.githubusercontent.com/pimlie/nuxt-memwatch/master/assets/demo.gif">

また `--expose-gc` オプションを利用することでコード内で `global.gc()` によるガベージコレクションを実行できるので合わせてこれと合わせて利用すると効果的です。

`node --expose-gc node_modules/.bin/nuxt-ts`

:taco: 大量のリクエストで負荷をかける
-----

### 1秒置きにリクエストする

これは Nuxt.js 関係ありませんが、便利なので。

`$ while true; do curl http://localhost:3000; sleep 1s; done`

### ab コマンドを利用する

`$ ab -c100 -n100000 http://127.0.0.1:3000/`

Ab(Apache Bench) コマンドで同時リクエスト100000、総リクエスト100しています。
ab コマンドについては下記の資料に詳しいことが載っていました。

[Ab(Apache Bench)を使用した負荷テストのやり方](https://qiita.com/mmmm/items/f31b15b4f80427360207)