30
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-17

: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 が起動したらヒープダンプも取得可能なのでメモリリーク調査に有効です。具体的な調査方法は以下が参考になりました。

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

30
27
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?