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 で実行する。
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 を開く。
inspect のリンクで Chrome DevTools が起動します。
Chrome DevTools が起動したらヒープダンプも取得可能なのでメモリリーク調査に有効です。具体的な調査方法は以下が参考になりました。
- Node.jsでのJavaScriptメモリリークを発見するための簡単ガイド
- メモリの問題の解決 | Tools for Web Developers
メモリの使用量を観測する
メモリの使用量を観測することはメモリリークの調査などに有効です。
nuxt-memwatch を利用します。
詳細な利用方法は README に記載されているので割愛しますが、以下のようにグラフィカルにリソースの使用量を確認することができます。
また --expose-gc オプションを利用することでコード内で global.gc() によるガベージコレクションを実行できるので合わせてこれと合わせて利用すると効果的です。
node --expose-gc node_modules/.bin/nuxt-ts
大量のリクエストで負荷をかける
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 コマンドについては下記の資料に詳しいことが載っていました。