印刷

トラブルシューティング用にネットワークキャプチャを生成する方法

Box Product Supportを利用する際、ネットワークキャプチャを収集するよう要請される場合があります。ネットワークキャプチャは、問題が発生しているアプリケーションのHTTPデータトラフィックを記録するために使用できます。利用可能なネットワークキャプチャは数種類あります。ブラウザに組み込まれ、ウェブベースのアプリをデバッグできるものもあれば、ウェブ、デスクトップ、モバイルなど、さまざまなプラットフォーム上のトラフィックをキャプチャできるサードパーティ製デバッガもあります。

 

Box Product Supportでは、この情報を使用して問題や予期しない動作を切り分けます。HARキャプチャ、Fiddlerキャプチャ、Charlesキャプチャの収集を要請する場合があります。

 

一般的なプロセスは次のとおりです。

  1. キャプチャを開始する
  2. 動作を再現する
  3. キャプチャを終了して保存する
  4. 調査のためにファイルをBox Product Supportに送信する

HAR

HARキャプチャ (HTTPアーカイブ) は、ブラウザがBoxウェブアプリに対して行う要求と応答を記録します。

 

Chrome/Edge

  1. Chromeで、問題が発生しているBox内のページに移動します。
  2. ブラウザウィンドウの右上にあるChromeメニュー (⋮) をクリックします。
  3. [その他のツール] > [デベロッパーツール] を選択します。デベロッパーツールが、Chromeの横または下部にドッキングされたパネルとして開きます。
  4. [ネットワーク] タブをクリックします。
  5. [ログを保持] を選択します。
  6. [ネットワーク] タブの左上に赤丸が表示されます。これは、キャプチャが開始されたことを意味しています。丸が黒い場合は、黒丸をクリックして、ブラウザでの処理の記録を開始します。
  7. ページを更新して、キャプチャの実行中に問題を再現します。
  8. 問題の再現に成功したら、アクティビティペインの任意の行を右クリックし、[コンテンツと一緒にHARとしてすべて保存] を選択します。
  9. [コンソール] タブを選択します。
  10. コンソール内の任意の場所を右クリックして、[名前をつけて保存] を選択します。
  11. ログファイルにChrome-console.logという名前を付けます。
  12. サポートケースに返信する形で両方のファイルを共有リンクとして送信します。

 

Firefox

  1. Firefoxで、問題が発生しているBox内のページに移動します。
  2. ブラウザウィンドウの右上にあるFirefoxメニュー (3本の横線) をクリックします。
  3. [ウェブ開発] > [ネットワーク] を選択します。
  4. 開発ツールウィンドウが、Firefoxの横または下部にドッキングされたパネルとして開きます。
  5. [ネットワーク] タブをクリックします。
  6. [永続ログ] を選択します。
  7. ページを更新して、キャプチャの実行中に問題を再現します。
  8. 問題の再現に成功したら、アクティビティペインの任意の行を右クリックし、[HAR形式ですべて保存] を選択します。
  9. [コンソール] タブを選択します。
  10. 任意の行を右クリックし、[すべて選択] を選択します。
  11. その内容をテキストファイルに貼り付け、console-log.txtという名前を付けます。
  12. サポートケースに返信する形で両方のファイルを共有リンクとして送信します。

Safari

  1. Safariでは、最初に、メニューバーに移動して [環境設定] > [詳細] で [メニューバーに"開発"メニューを表示] を選択することで、[開発] メニューが表示されるようにします。
  2. 問題が発生しているBox内のページに移動します。
  3. 上部のメニューバーで [開発] をクリックし、[Webインスペクタを表示] を選択します。
  4. [Console] タブをクリックし、[Preserve Log] を選択します。
  5. [Network] タブに戻ります。
  6. ページを更新して、キャプチャの実行中に問題を再現します。
  7. 問題の再現に成功したら、アクティビティペインの任意の行を右クリックして [Export HAR] を選択するか、ネットワークパネルの右上にある [Export] を選択します。mceclip1.png
  8. [Console] タブをクリックします。
  9. 任意の行を右クリックし、[Select all] を選択します。
    1. [Select all] オプションを利用できない場合は、コンソールの行をクリックして全体をドラッグすることで選択してください。
    2. 次に、Command + Cキーを押すか右クリックし、[Copy Selected] または [Save Selected] を選択して行をコピーします。
  10. その内容をテキストファイルに貼り付け、console.txtという名前を付けます。
  11. サポートケースに返信する形で両方のファイルを共有リンクとして送信します。

 

Edge (レガシー版)

  1. Edgeで、問題が発生しているBox内のページに移動します。
  2. ブラウザウィンドウの右上にあるEdgeメニュー (...) をクリックします。
  3. [開発者ツール] を選択します。
  4. [ネットワーク] タブをクリックします。
  5. デフォルトで選択されている [ナビゲーション時にエントリをクリア] オプションをオフにします。このアイコンは、青色の矢印に赤色のXが付いたような外見をしています。
  6. 緑色の開始ボタン ([プロファイリングセッションの開始]) はデフォルトで選択されています。これは、キャプチャ機能が実行中であることを意味しています。
  7. ページを更新して、キャプチャの実行中に問題を再現します。
  8. 問題を再現できたら、[HARとしてエクスポート] アイコンをクリックします。このアイコンは、フロッピーディスクのような外見をしています。
  9. [コンソール] タブをクリックします。
  10. 任意の行を右クリックして、[すべてコピー] を選択します。
  11. その内容をテキストファイルに貼り付け、console-log.txtという名前を付けます。
  12. サポートケースに返信する形で両方のファイルを共有リンクとして送信します。

Fiddler

Windows

  1. 次のリンクからFiddlerをダウンロードしてインストールします: https://www.telerik.com/download/fiddler
  2. インストールが完了したらFiddler4を起動します。常に実行した状態にしておく必要はありません。[スタート] に移動して「Fiddler4」を検索します。
  3. Fiddler内で、[Tools] > [Options] > [HTTPS] タブに移動します。
  4. [HTTPS] タブで、[Capture HTTPS CONNECTs] チェックボックスをオンにします。
  5. [Decrypt HTTPS traffic] チェックボックスをオンにし、ドロップダウンオプションに「...from all processes」と表示されていることを確認します。
  6. 同じ [HTTPS] タブ内で、[Actions] ボタンをクリックして、[Reset All Certificates] を選択します。
  7. [OK] をクリックして、Fiddlerのルート証明書の削除と信頼に関するすべてのプロンプトに同意します。
  8. 証明書が信頼されたら、[OK] をクリックして [Options] を閉じます。
  9. Fiddlerのメインウィンドウに戻り、上部にあるXアイコンをクリックした後、[Remove all] を選択してセッションをクリアします。
  10. キャプチャの実行中に問題を再現します。
  11. 問題を再現したら、Fiddlerに戻り、[File] > [Save] > [All Sessions] に移動します。ファイルを.sazとしてデスクトップに保存します。
  12. サポートケースに返信する形でこの.sazファイルを共有リンクとして送信します。

Mac

注: Fiddlerは、Mac用に最適化されていません。macOSを使用している場合は、以下のMac用のCharlesセクションを参照してください。

 

Charles

Windows

  1. 次のリンクからCharlesをダウンロードしてインストールします: http://www.charlesproxy.com/download
  2. [スタート] メニューからアプリケーションを実行して、Charlesを開きます。
  3. Windowsファイアウォールから例外ルールを追加するよう求められたら、[Allow access] をクリックします。
  4. [Proxy] を選択し、[Windows Proxy] にまだチェックが付いていない場合はクリックします。
  5. [Proxy] > [SSL Proxying Settings] を選択し、[Enable SSL Proxying] チェックボックスがオンになっていることを確認します  (詳細情報: http://www.charlesproxy.com/documentation/proxying/ssl-proxying/)
  6. [Add] ボタンをクリックして下記の各ドメインを追加し、4つすべてを追加したら [OK] をクリックします。

    *.box.com

    *.box.net

    *.boxcdn.net

    *.boxcloud.com

  7. [Help] > [SSL Proxying] > [Install Charles Root Certificate] を選択します。CAルート証明書が信頼されていないことを示す警告のウィンドウが表示されます。[証明書のインストール] ボタンをクリックすると、証明書のインポートウィザードが開始されます。この証明書は「信頼されたルート証明機関」証明書ストアにインポートする必要があるため、証明書ストアが自動的に選択されないようにしてください。ウィザードを完了すると、Charlesルート証明書がインストールされます。
  8. 上部に赤色の丸「●」が表示されます。これは、キャプチャが開始されたことを意味しています。丸が黒い場合は、黒丸をクリックして、ブラウザでの処理の記録を開始します。
  9. キャプチャの実行中に問題を再現します。
  10. 問題を再現したら、Charlesに戻り、赤色の丸「●」をクリックして記録を停止し、[File] > [Save Session As...] に移動して、.chlsファイルをデスクトップに保存します。
  11. サポートケースに返信する形でこの.chlsファイルを共有リンクとして送信します。

Mac

  1. 次のリンクからCharlesをダウンロードしてインストールします: http://www.charlesproxy.com/download
  2. ダウンロードファイルをダブルクリックして圧縮解除した後、Charlesアプリケーションをアプリケーションフォルダにコピーします。
  3. アプリケーションフォルダからアプリケーションを実行して、Charlesを開きます。
  4. お使いのmacOSのプロキシ設定に関する質問が表示されます。プロキシ設定を自動構成するには、パスワードを入力してCharlesに権限を付与する必要があります。
  5. [Proxy] を選択し、[macOS Proxy] にまだチェックが付いていない場合はクリックします。
  6. [Proxy] > [SSL Proxying Settings] を選択し、[Enable SSL Proxying] チェックボックスがオンになっていることを確認します  (詳細情報: http://www.charlesproxy.com/documentation/proxying/ssl-proxying/)
    [Add] ボタンをクリックして下記の各ドメインを追加し、4つすべてを追加したら [OK] をクリックします。

    *.box.com

    *.box.net

    *.boxcdn.net

    *.boxcloud.com

  7. [Help] > [SSL Proxying] > [Install Charles Root Certificate] を選択します。Macの [キーチェーンアクセス] が開き、証明書に関するダイアログが表示されたら、[常に信頼] ボタンをクリックします。その後、システムの信頼設定を更新するための管理者パスワードを入力するよう求められます。変更内容を表示するには、ブラウザを終了して再度開くことが必要になる場合があります。
  8. 上部に赤色の丸が表示されます。これは、キャプチャが開始されたことを意味しています。丸が黒い場合は、黒丸をクリックして、ブラウザでの処理の記録を開始します。
  9. キャプチャの実行中に問題を再現します。
  10. 問題を再現したら、Charlesに戻り、赤色の丸をクリックして記録を停止し、[File] > [Save Session As...] に移動して、.chlsファイルをデスクトップに保存します。
  11. サポートケースに返信する形でこの.chlsファイルを共有リンクとして送信します。
webapp_swarm_kb

関連記事