HAR ファイルの生成と Web リクエストの分析

パフォーマンスのトラブルシューティング ツール - ベスト プラクティス

このページの内容

お困りですか?

アトラシアン コミュニティをご利用ください。

コミュニティに質問

目的

HAR HTTP ARchive (アーカイブ) 形式の短縮形であり、Web ブラウザとサイトの間のすべてのやり取りのログを追跡します。

特に以下のような問題では、問題のトラブルシューティングに HAR ファイルが必要となる場合があります。

  • パフォーマンスの問題: ページの読み込みに時間がかかる、特定のタスクを実行する際のタイムアウト
  • ページのレンダリング: ページの形式が正しくない、情報が欠落している

このガイドでは、トラブルシューティングで最初に行うべき手順について説明します。これらの情報をサポート チームに提供することで、トラブルシューティング プロセスにかかる時間を短縮できます。

はじめる前に

サポート対象プラットフォームを確認し、ブラウザがサポートされていることを確認します。

比較のため、複数の HAR ファイルを生成することを強く推奨します。以下は、効果的な情報収集のためのガイドラインです。

  1. 影響を受けていないページ (パフォーマンスの問題やページ レンダリングの問題が発生していないページ) の HAR ファイルを生成する。例: ダッシュボード、課題ビュー、課題検索およびプロジェクト ページ。
  2. 影響を受けたページの HAR ファイルを生成する。平均値を正確に取得し、一貫したタイミングを捉えるため、複数回生成することをおすすめします。

ソリューション

 HAR ファイルの生成方法は、使用しているブラウザによって異なります。 

Chrome

HAR ファイルの生成には、開発者ツールをネイティブで提供している Chrome を使用することを お勧めします 。Chrome の開発者ツールの詳細については、このリンクをご参照ください。

ツールセット

Chrome には、一覧の開発者ツールが含まれます。詳細については左記リンクをご参照ください。

JavaScript エラー

Chrome コンソールを確認し、JavaScript エラーを探します。 

ネットワークの問題

サポートの問題を診断するには、ネットワーク タブを使用できます。

  1. Chrome を開き、開発者ツールを有効にします。
  2. ネットワーク タブを選択します。
  3. ログの保存を有効化します。
  4. 問題のあるページを読み込みます。
  5. 読み込みが完了するまで待ちます。
  6. エラーを確認し、エラーの意味を「HTTP/1.1 ステータス コード」で確認します。


アトラシアン サポートでは、ブラウザでのデバッグ ログの取得を依頼することがあります。この情報を依頼されていない場合、内容をスキップして「サポートに情報を提供する」をご参照ください。

追加のブラウザ ログを有効化する方法:

  1. --enable-logging --v=1"」パラメーターを付与してブラウザを起動します (主要なプラットフォームでの手順についてはこの記事をご参照ください)。
  2. 「chrome_dubug.log」というファイルが、Chrome ユーザーの既定の場所に生成されます。

サポートに情報を提供する

  1. 次のいずれかの方法で開発者ツールを起動します。
    • キーボード ショートカット (OS X では ⌘⌥I、Linux では Ctrl + Shift、Windows では F12 )を使用する
    • ブラウザ ウィンドウ右上の Chrome メニュー Chrome メニュー から、 [ツール] > [開発者ツール] を選択します。
  2. 開発ツールネットワークタブに移動します。
  3. このページのリソースのキャッシュを防ぐため、[キャッシュを無効にする] オプションを選択します。
  4. ページを更新し、ブラウザとサーバーの間のトラフィックの取得を開始します。

     分析対象の問題に先立って行われたリクエストを確認できるよう、ページ全体の読み込みをキャプチャするようにします。

  5. 問題のトリガーとなった、または問題を示す手順を完了します。
  6. ネットワーク レコードが表示されている領域で右クリックし、[コンテンツを含む HAR として保存] をクリックします。

  7. アトラシアンに HAR ファイルを送信する前に、テキスト エディタを使用して機密情報 (パスワード、秘密情報など) を削除 / 難読化します。

Firefox

拡張機能をインストールすると、ブラウザのパフォーマンスに影響が出る場合があります。インストール後にパフォーマンスの問題が発生した場合、プラグインを削除してみてください。このガイドはトラブルシューティングを目的としており、プラグインはサードパーティ製プラグインです。アトラシアンではこれらに対するサポートは提供していません。

ツールセット

Firefox には、トラブルシューティングに使用できる開発者ツールのセットが埋め込まれています。

JavaScript エラー

コンソールで JavaScript エラーを確認します。

ネットワークの問題

Firefox 開発者ツールの [ネットワーク] タブにアクセスし、ネットワークのエラーを確認します。HTTP コードに関する詳細は、HTTP/1.1 ステータス コードをご覧ください。

サポートに情報を提供する

  1. [ツール] > [Web Developer] > [ネットワーク]に移動します。
  2. ページを更新し、ブラウザとサーバーの間のトラフィックの取得を開始します。
    • 注: 分析対象の問題に先立って行われたリクエストを確認できるよう、ページ全体の読み込みをキャプチャするようにします。
  3. 問題のトリガーとなった、または問題を示す手順を完了します。
  4. [エクスポート] > [名前を付けて保存...] の順にクリックし、HAR ファイルを保存します。
  5. アトラシアンに HAR ファイルを送信する前に、テキスト エディタを使用して機密情報 (パスワード、秘密情報など) を削除 / 難読化します。

コンソールのエクスポートも役立つ場合があります。


Internet Explorer

ツールセット

Internet Explorer は開発者ツールバーをサポートしています。さらに、Fiddlerはブラウザの問題のデバッグによく使用されるサードパーティ製アプリケーションです。

JavaScript エラー

Microsoft の「F12 ツールのコンソールを使ったエラーおよびステータスの表示」ナレッジベースで、JavaScript エラーの判別方法をご確認ください。

ネットワークの問題

Microsoft の「Windows Internet Explorer 開発者ツールのネットワークキャプチャ機能を使用する」ナレッジベースを使用して、ネットワークの問題の診断方法を判別できます。HTTP コードの詳細については、「HTTP/1.1 ステータス コード」をご覧ください。

サポートに情報を提供する

データの確認のため、データのコピーを依頼する場合があります。これを実行するには、以下の手順を実行します。 

Microsoft Edge

ツールセット

Microsoft Edge には開発者ツールが組み込まれています。

JavaScript の問題

コンソール タブで JavaScript エラーを確認します。

ネットワークの問題

サポートの問題を診断するには、ネットワーク タブを使用できます。

  1. 組み込みの開発者ツールを開きます。
  2. ネットワーク タブを選択します。
  3. 問題のあるページを読み込みます。
  4. 読み込みが完了するまで待ちます。
  5. エラーを確認し、エラーの意味を「HTTP/1.1 ステータス コード」で確認します。

サポートに情報を提供する

  1. F12 キーボード ショートカットキーを使用して開発者ツールにアクセスします。

  2. ページを更新し、ブラウザとサーバーの間のトラフィックの取得を開始します。 

    • 注: 分析対象の問題に先立って行われたリクエストを確認できるよう、ページ全体の読み込みをキャプチャするようにします。

  3. 問題のトリガーとなった、または問題を示す手順を完了します。
  4. [HAR としてエクスポート] (開発者ツールの停止ボタンの横にあるフロッピー ディスク ボタン) をクリックし、[名前をつけて保存...] を選択して HAR ファイルを保存します。

Safari

ツールセット

Safari には Safari Web 開発ツールが付属しています。詳細については左記のリンクをご参照ください。

JavaScript の問題

Apple が、JavaScript エラーの見つけ方の詳細を示した「エラー コンソールの使用」ガイドを提供しています。

ネットワークの問題

Safari Web Inspector ガイド」を参照し、その内容にしたがってネットワーク エラーを探します。HTTP/1.1 ステータス コードは、HTTP ステータス コードの意味を判別するのに役立ちます。

Web リクエストの分析

HAR ファイルがキャプチャした Web リクエストの分析手順は、 パフォーマンスの問題 または ページレンダリングの問題 のトラブルシューティングによって異なります。

生成された HAR ファイルの表示に使用される一般的なツールは、Web アプリケーションとして利用可能な HAR Viewer です。

パフォーマンスの問題のトラブルシューティング

パフォーマンスの問題では、読み込み時間と、ブラウザがユーザーにコンテンツを提供するための遅延の原因となっているリクエストの特定が重要です。トラブルシューティングを効果的に行うには、Web リクエストに使用する定義を理解する必要があります。以下を参照してください。

以下は、 HAR Viewer または Google のツールである HAR Analyzer で読み込まれた HAR ファイルから抽出されたものです。



HAR ファイルの読み込み後に Web リクエストを強調表示すると、次の情報が表示されます。

Request start time since the beginning

ハイライトされたリクエストは、最初のリクエストから指定した時間後にコールされます。例: 以下の +6.32s は、現在のリクエストが、最初のリクエスト (ほとんどの場合、初回の HTML リクエスト) の 6.32 秒後にコールされていることを意味します。

Waiting

サーバーの応答を待機する時間。この値が高い場合、次のような可能性があります。

  1. ローカルでの待機時間が少ない場合、クライアントとサーバーの間のネットワークに問題があります。ネットワークのトラバースを阻害する要因にはさまざまなものが考えられます。クライアントとサーバーの間には多数のポイントがあります。それぞれが接続について独自の制限事項を持ち、問題の原因になる可能性があります。これを軽減するテストを行う最も簡単な方法として、アプリケーションを別のホストに移動させて待機時間が改善するかどうかを確認することが考えられます。
  2. サーバーがビジー状態か、サーバでパフォーマンスの問題が発生している。次の画像では、サーバーからの応答の待機時間が 2 秒程度であることを確認できます。この例で影響していたのは複雑な JQL クエリでした。

一般的に、この状況が発生した場合、負荷のかかるタスク (バックアップの作成、再インデックスなど) をクロスチェックします。

問題が一日のうちの特定の時刻に発生している場合、発生時刻を記録して support.atlassian.com からサポート チケットを作成し、根本原因の調査を依頼してください。

Receiving

必要な情報をクライアントに転送するためにサーバーが使用した時間の量です。一般に、ここでネットワークの問題が検出されます。例:


この例の待機時間は 1.6 秒となっており、遅延のほとんどがリクエストの完了によるものです。

DOM Loaded

DOM Loaded とは、ブラウザがすべての HTML を受信し、DOM ツリーへのパースを完了して、操作が可能になったことを示します。

ページが完全にレンダリングされる前に発生します (画像、CSS、JavaScript やその他のリンクされている外部リソースがまだ完全にはダウンロードされていない可能性があります)。

 これは onload イベントとは異なる点にご注意ください。

onload イベントはオブジェクトが読み込まれたときに発生します。onload は一般に <body> エレメント内で使用され、Web ページがすべてのコンテンツ (画像、スクリプト ファイル、CSS ファイルなど含む) を完全に読み込んだ後にスクリプトを実行します。

onload イベントを使用して、訪問者のブラウザのタイプやブラウザのバージョンを確認したり、情報に基づいて Web ページの適切なバージョンを読み込むことができます。

参照: http://www.w3schools.com/jsref/event_onload.asp

Page Loaded

ページを完全に読み込むのにかかった時間の合計 (Google analytics など、外部サーバーでデータを生成するための、Javascript での AJAX コールまたは REST コールを含みます)。

ページの完全な読み込みが完了するまでの間にページが白い場合、コンテンツが存在しないとは限りません。ページは一般に onload イベントの後に、外部コールからの情報を生成して表示されます。(読み込み時のダッシュボード ガジェットなど)


ページに含まれる外部リソース (ガジェット、外部リンクなど) がある場合、ページの完全な読み込みには時間がかかる可能性があります。所要時間は、サーバーのパフォーマンスよりも、他のサイト / サーバーからのリクエストの処理速度に応じて異なります。

サイズ

処理するリクエストのサイズもパフォーマンスの問題の原因の 1 つです。リクエストのサイズが遅延に与える影響を理解するための例を下に示します。

2.4MB のデータの取得にかかる時間はどれぐらいでしょうか。次のように計算されます。

3 Mbps = 約 0.375MBps (注: B = バイト、b = ビット)

2.4 MB の取得にかかる時間:

2.4 MB / 0.375 MBps = 6.4 秒

これは利用可能なスループットによって異なります。一般に、スピード テストを実施し、一番近いサーバーからホストしているデータセンターまでのスループットを調べることができます。

上記の各ブラウザ タイプの [ネットワーク] タブから、同様のビューを表示できます。 

上記の定義を明確に理解している場合、分析の手順は非常に簡単です。

  1. レスポンスに遅延があるリクエストを検索します (一般に、合計 Web リクエスト数を表示している中で一番長いバー)
  2. 最長の待機時間を持つリクエストと、実際の待機時間を特定します
  3. 遅延の主な原因を確認します (Blocking、Waiting、Receiving)
  4. ページを複数回リロードして問題が再現するかどうかを確認します
  5. 遅延の原因がサーバーであると特定された場合、取得した情報をサポート チームに提供してサポートを依頼します。その他の問題 (ネットワークなど) の場合、ご利用の ISP または社内のホスティング チームに直接サポートを依頼することをおすすめします。ここまでの手順で収集した情報を調査に活用できます。

レンダリングの問題のトラブルシューティング

ページのレンダリングに失敗する場合、開発者ツール の [ネットワーク] タブに原因が記録されていることが多くあります。原因が記録されていない場合、[キャッシュの無効化] の横のチェックボックスを選択してブラウザ キャッシュを無効化することをおすすめします。これにより、ブラウザでキャッシュ データを使用せずにページを最初からレンダリングできます。同様に、HAR ファイルのステータス コードも、問題の原因となるリクエストの特定に役立ちます。

Example for some error message seen in Console tab accompany the code of 404 Bad Request:

{"errorMessages":["Error in JQL Query: Expecting either a value, list or function but got 'IN'. You must surround 'IN' in quotation marks to use it as a value. (line 1, character 11)"],"errors":{}}

これは、ページ レンダリングの不具合である JRA-42216 - Getting issue details... STATUS で確認されているメッセージです

生成された HAR ファイルのステータス コードを判別することも重要です。以下に一般的な例を示します。

  • 200 - 成功
  • 404 - ページが見つかりません / 要求が正しくありません
  • 401 - 認証されていません
  • 403 - 禁止されています 
  • 304 - 変更されていません (コンテンツはキャッシュされています)
  • 500 - 内部サーバー エラー

エラーの定義については、「HTTP/1.1 ステータス コードの定義」ページをご参照ください。

問題を発生させる動作で HAR ファイルを作成したら、その情報と再現手順をサポート チームに提供してください。確認された問題の背後にある根本原因をサポート チームが調査いたします。

説明

HAR HTTP ARchive (アーカイブ) 形式の短縮形であり、Web ブラウザとサイトの間のすべてのやり取りのログを追跡します。


HAR files can be a requirement for troubleshooting issues specifically for problems such as performance and page rendering

製品 Jira, Confluence, Bamboo, Bitbucket, Fisheye
プラットフォーム Server, Cloud,
最終更新日 2018 年 9 月 28 日

この内容はお役に立ちましたか?

はい
いいえ
この記事についてのフィードバックを送信する
Powered by Confluence and Scroll Viewport.