Web 負荷テストにも使える Chrome デベロッパーツールの便利機能を紹介します!

こんにちは。チョイです。

余談ですが、先日同僚と飲み会に行ったのですが、激辛の店だったため結局辛すぎてあまり話ができず、全然交流できませんでした。残念。

今後は、無理せずに辛さを楽しみましょう。

 

さてと、本日は意外と知られていない Chrome Developer Tools HTTP 通信ログ機能を紹介したいと思います。

 

背景

少し前に担当させていただいたブラウザゲームの負荷テストを実施した際のお話ですが、負荷テスト用にシナリオを作成する必要がありました。

なるべくゲームサーバ側のロジックを変更せず、ユーザの実際の動向に近い形で負荷をかけたかったので、実際にゲームプレイの通信ログをベースにユーザの動きを模倣するスクリプトを作成することにしました。 

WireShark JMeter などの定番ツールもありましたが、もっと手軽なツールはないか探していたら、Chrome Developer Tools にもそのような機能があることに気づき感動しました。

 

実際にやってみよう

1. まずは、あたりまえですが、Chrome で「表示」メニューから、「デベロッパーツール」を有効にします。下図にデモ用にダミーのゲームを作成しましたが、実際はこのようなおもしろいゲームは存在しませんのでご了承ください。また、ここでは Chrome のシークレットモードを使っていますが、必要ではありません。

(デベロッパーツールを表示)

(デベロッパーツールを表示)

2. 今回利用するのは「Network」タブですのでそれに移動します。まだ空な状態で何も表示されていませんが、デフォルトではページロードごとにログが書き替えされますので、今のうち「Preserve log」オプションを有効にして、ログの上書きをしないように設定します。

(開いた直後は空ですが「Preserve log」を有効にします)

(開いた直後は空ですが「Preserve log」を有効にします)

3. これで準備完了ですので、適宜ゲーム画面を触って、テストしたいシナリオ通りにゲームを操作します。「Network」タブの下でログが溜まっていくのはおわかりでしょう。

(テストシナリオどおりにゲームを操作する)

(テストシナリオどおりにゲームを操作する)

4. シナリオの最後になったら、下図のようにログの部分を右グリックして「Save as HAR with Content」でログをエクスポートすることができます。HAR とは、HTTP ARchive format のことで、ブラウザなどのツールからリソースをロードする際のパフォーマンス情報を出力するために設計されているものです。拡張子「.har」で保存されますが、中身は JSON です。

(ログを HAR フォーマットへエクスポートする)

(ログを HAR フォーマットへエクスポートする)

 

今回取得された HAR の例

だいぶ省略していますが、テストシナリオの構築に必要な部分だけ残しています。そのほかの詳細は HTTP ARchive format の仕様を参照してください。


{
 "log": {
   // ...
   "entries": [
     {
       "startedDateTime": "2015-03-25T02:32:26.637Z",
       "time": 2.769947052001953,
       "request": {
         "method": "GET",
         "url": "http://localhost/game/api/match.php",
         // ...
     },
     {
       "startedDateTime": "2015-03-25T02:32:47.597Z",
       "time": 1.310110092163086,
       "request": {
         "method": "GET",
         "url": "http://localhost/game/api/user_param.php?user_id=489173590",
         // ...
         "queryString": [
           {
             "name": "user_id",
             "value": "489173590"
           }
         ],
         // ...
     },
     // ...
     

実際にやったこと

冒頭に話した負荷テストについてですが、今回は Chrome Developer Tool から取得できた HAR ファイルから、別のスクリプトで ”method” “url””queryString” など必要な部分を抽出し、得られた情報をみながらテストシナリオを模倣するスクリプトを手で作成しました。

次に、下記のような負荷テスト環境を作り、テストスクリプトを負荷かけサーバーにデプロイしました。

[負荷テストの環境構成]

[負荷テストの環境構成]

 それから、Apache Bench を利用し、必要な同時アクセス数だけ発動しテストシナリオスクリプトを実行させました。

図中の構成では、負荷かけサーバーは 1 台構成にしていますが、十分に負荷がかからない場合、スケールアウトして複数台で構成することも簡単にできます。

 

課題点

あたりまえですが、Chrome Developer Tools を利用することが前提ですので、ブラウザゲーム・ブラウザアプリにしか適用できず、Native アプリに対応しないのは残念です。

また、負荷テストのシナリオ作成のベースとしての利用することに関しても、やはり手動でスクリプトを組むことはとても大変ですので、むやみにおすすめできませんが、将来的に HAR からテストシナリオのスクリプトが自動生成できるようになったらいいなと勝手に妄想したりしています(笑)

 

以上となりますが、あまりにも簡単で記事として公開するのは躊躇していましたが、HAR というフォーマットの認知度もそれほど高くないと思いますのであえて寄稿させていただきました。最後までお読みいただき、ありがとうございました!