Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationEventAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.


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 で実行する。

yarn run v1.16.0
$ node --inspect --expose-gc node_modules/.bin/nuxt-ts
Debugger listening on ws://
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://
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: 大量のリクエストで負荷をかける


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

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

ab コマンドを利用する

$ ab -c100 -n100000

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
Help us understand the problem. What are the problem?