Help us understand the problem. What is going on with this article?

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 を開く。

スクリーンショット 2019-12-17 17.14.31.png

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

Chrome DevTools が起動したらヒープダンプも取得可能なのでメモリリーク調査に有効です。具体的な調査方法は以下が参考になりました。
- Node.jsでのJavaScriptメモリリークを発見するための簡単ガイド
- メモリの問題の解決 | Tools for Web Developers

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

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

nuxt-memwatch を利用します。

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

また --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)を使用した負荷テストのやり方

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした