注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
Chrome™ DevTools でデバッグする
このガイドでは、Chrome™ ブラウザーの開発者ツール（DevTools）を使用して、予期しない動作を特定したり、Palantir サポートに提供するために必要なブラウザーログを収集したりする方法を説明します。
原因が不明なエラーのデバッグで特に重要なツールの1つが、Chrome™ DevTools ↗ です。問題のデバッグに役立つ豊富な情報が提供され、閲覧中の Web ページの背後で何が起きているか、その内部の様子を確認できます。車のボンネットを開けるようなものと考えてください。内部を見て、実際に何が起きているかを確認できます。
Chrome™ DevTools を使用する
次の手順でコンソールログにアクセスできます。
- 開いている Web ページの要素を右クリックします。
- 検査を選択します。Web ページの横に画面が開きます。
- 上部のコンソールタブに移動します。ほとんどのエラーはここに表示されます。
- 失敗したリクエストは赤色で表示されます。ページ上の失敗に関連していると思われる赤色のリクエスト、またはサポートチームから提供するよう指示された特定のリクエストを探します。エラーメッセージを表示するには、ネットワークウィンドウを開いた状態で該当する操作を行う必要がある場合があります。
- 左側の山形アイコンを選択して、リクエストを展開します。多くの場合、ここにはエラーメッセージや errorInstanceID など、役立つ追加情報が含まれています。
ここで重要なのは、上部のツールバーです。ほとんどのトラブルシューティングでは、コンソールタブとネットワークタブに関連するエラーメッセージが含まれており、サポートチームにとって最も役立ちます。ただし、要素タブも問題の特定に役立つため、こちらについても説明します。
コンソールタブ
下の画像に示す Chrome™ コンソールには、ツールバーのコンソールタブからアクセスでき、主要な用途が2つあります。1つ目は、Web アプリケーション自体による使用です。Web アプリケーションは、デバッグ情報、エラーログ、情報メッセージなど、任意の内容をコンソールに出力できます。
2つ目の用途は、ユーザーがコードスニペットを実行して結果を確認することです。ただし、この使用方法はこのガイドの対象外です。
エラーが発生したときは、コンソールを開いて履歴を上にスクロールし、特にエラー（通常は赤色で強調表示されます）を探すと役立つことがよくあります。これらのエラーは報告に役立ち、多くの場合、何が問題だったかについての詳しい情報が含まれています。
たとえば、DevTools を使用したデバッグのページを読み込むと、コンソールログに次のスニペットが表示されるはずです。
上の画像にある通常の白い行のような情報行が多数表示されるほか、赤色でエラーが表示される場合があります。注目すべきエラーには、URL に対する GET リクエストの後に、404という番号が表示されています。これは「ファイルが見つかりません」を意味する HTTP エラーコードです。エラーの詳細を確認するためにコンソールを調べている場合、このエラーをファイル名とともに報告すると非常に役立ちます。この例では、見つからなかったファイル you-found-me.png への参照が表示されています。
多くの場合、エラーを展開して追加情報を確認することも役立ちます。エラーの先頭にある小さな三角形を選択すると、展開できます。
特定のページのコンソールログにアクセスするには、次の手順を実行します。
- 開いているページの要素を右クリックし、検査を選択します。Web ページの横に画面が開きます。
- ページ上部付近のコンソールタブに移動します。
- 失敗したリクエストは赤色で表示されます。ページ上の失敗に関連していると思われる赤色のリクエストを探します。
- 左側の山形アイコンを選択して、リクエストを展開します。多くの場合、ここにはエラーメッセージや errorInstanceID などの詳しい情報が含まれています。
- 関連するエラーが表示されない場合は、コンソールログを開いた状態で、失敗の原因となった動作をもう一度実行してみます。
この操作により、トラブルシューティングに役立つ追加情報をサポートチームに提供できます。エラー情報を右クリックして名前を付けて保存を選択すると、これらのログを取得できます。プラットフォームにアップロードするには、保存したファイルを .log ファイルから TXT ファイルに変更する必要がある場合があります。
詳細については、Chrome™ DevTools コンソールの概要ドキュメント ↗ を参照してください。
ネットワークタブ
Palantir のアプリケーションでボタンを選択すると、ブラウザーがサーバーにリクエストを送信し、サーバーはそのリクエストを処理してからレスポンスを返します。1つの Web ページで多数のリクエストが行われることがあります。これらのリクエストではページは再読み込みされませんが、たとえば表示中のデータが更新されたり、新しいデータがサーバーに送信されたりする場合があります。ネットワークタブでは、ブラウザーが行うすべてのリクエストを調べ、受信したレスポンスを確認できます。
特定のページでネットワークログにアクセスするには、次の手順を実行します。
- 開いているページ上の要素を右クリックし、検査を選択します。Web ページの横に画面が開きます。
- ページ上部付近のネットワークタブに移動します。
- 失敗したリクエストは赤色で表示されます。ページで発生している失敗に関係しそうな赤色のリクエストを探します。
- 左側の山形アイコンを選択してリクエストを展開します。多くの場合、ここにはエラーメッセージや errorInstanceID などの詳細情報が含まれています。
- 関連するエラーが見つからない場合は、コンソールログを開いた状態で、失敗の原因となった操作をもう一度実行してみます。
ステータス列に注目します。この列には、このドキュメントで前述したとおり、レスポンスで受信したリクエストの HTTP ステータスコードが含まれています。404 エラーと、2 で始まる多数のリクエストがあることを確認できます。2 で始まるコードは、リクエストに成功したことを示します。
この表示を使ってエラーに関する詳細情報を得るためのベストプラクティスを紹介します。まず、サイドバーの左上にある2つのボタンを確認します。
赤色の最初のアイコンは、ネットワークタブが現在記録中であることを示します。これは、新しいリクエストが行われると、下の表示に記録されることを意味します。この機能が利用できない場合は、記録をオンにしてください。同様に、リクエストログが確認できないほどの速さで追加されていく場合は、このアイコンをもう一度選択して記録をオフにできます。
2つ目のアイコン（斜線の入った円）で、ログをクリアできます。再現に必要な最小限の手順を実行する直前にクリアすると便利です。この操作により、現在記録されているすべてのリクエストがログから削除されるため、その後に発生する新しいリクエストだけを確認できます。
このログを最も効果的に使うには、次の手順を実行します。
- エラーを再現するための最小限の手順を、エラーが発生する直前まで実行します。
- ログをクリアします。
- エラーを引き起こす最後の手順を実行します。
- 新しいリクエストを調べ、特に HTTP エラーコードがないか確認します。リクエストのスクリーンショットをレポートに添付することもできます。
関連する HTTP エラーコードが含まれているなどの理由で注目すべきリクエストが見つかった場合は、次の情報をエラーレポートに含めると役立ちます。以下は、トップページに移動した際に生成されたエラーを含むリクエストの例です。
リクエストはエラーを示す赤色で表示され、エラーコードは Internal Server Error を意味する 500 です。この時点ですでに、報告に役立つ情報が得られています。エラーのスクリーンショットを含めて、「500 - Internal Server」が発生していると伝えられます。
最初に確認するのは、リクエストの送信先 URL です。この場合、redirect?code=... がアクセス先の URL です。これは、エラーを引き起こしているサービスの特定に役立ちます。たとえば、URL に foundry-metadata が含まれている場合、問題を引き起こしているのは foundry-metadata サービスです。この情報は、エラーレポートに含めると非常に役立ちます。
リクエストに相当する cURL コマンドも、報告に役立ちます。リクエスト自体を右クリックし、メニューからコピー > cURL としてコピーを選択すると、レポートに含めるためにコピーできます。
cURL は、リクエストとまったく同じ操作をコマンドラインから実行できるコマンドラインツールです。このボタンは、実際に行われたリクエストをそのままクリップボードにコピーします。これにより、デバッグ担当者は任意の場所や方法で cURL リクエストを実行し、リクエストを調べて問題の原因を特定できます。これは、特に 4xx エラーの場合に役立ちます。エラーIDがある場合は、それも記録します。コピーした内容を TEXT ファイルとして保存し、Palantir サポートに送信することもできますが、次の点に注意してください。
- セキュリティ上の理由から、ログに含まれる既存のトークンを削除してください。削除しない場合は、Palantir チームによってトークンが取り消されます。ファイルにトークンが含まれているかどうかは、「token」と「bearer」を検索して確認できます。その後に続く文字列を削除してください。
- 共有する前に、機密情報をマスキングしてください。
レポートに含めると役立つ最後の要素は、レスポンス自体です。同じコピーメニューの応答をコピーから取得できます。
特定のページでネットワークタブにアクセスするには、次の手順を実行します。
- 開いているページ上の要素を右クリックし、検査を選択します。Web ページの横に画面が開きます。
- ページ上部付近のネットワークタブに移動します。
- ネットワークタブを開いても、何も表示されない場合があります。ページを再読み込みするか、失敗した操作をもう一度実行して、タブに情報を表示します。
- ネットワークタブの2列目は「ステータス」です。降順に並べ替えられるまでステータスを選択します。失敗したリクエストはステータスコードが大きいため、上部に表示されます。失敗したリクエストは赤色でも表示されます。
- ページで発生している失敗に関係しそうなリクエストを探します。リクエストを選択すると、エラーメッセージや errorInstanceID などの詳細情報が表示されます。
ネットワークタブでトレースIDを見つける
TraceID はリクエストの一意の識別子であり、ブラウザーで発生している処理とログに保存された記録を照合できます。
traceID を見つけるには、前のセクションで説明した方法でネットワークタブを開きます。状況によって調査すべきリクエストは異なりますが、一般に、ブラウザーにエラーが表示されている場合は、赤色（失敗を示します）のリクエストが役立つことがよくあります。
リクエストを選択して詳細を表示します。
レスポンスヘッダー内で、上の画像で赤色で強調表示されている x-b3-traceid を探します。
値（この場合は 255c17c75ae752a5）をコピーし、テキストとして Palantir サポートに共有します。
詳細については、Chrome™ DevTools のネットワークアクティビティの検査に関するドキュメント ↗を参照してください。
要素タブ
要素タブには、表示しているページの「DOM」（Document Object Model）が表示されます。これは、ページに表示されているすべての視覚的なコンテンツを、その基盤となる HTML 形式で表したものです。
この HTML データのツリーは、要素を検査するツールを使って探索できます。このツールには2つの使い方があります。1つ目はポインターを使う方法で、DevTools ツールバーの次のボタンから利用できます。
このボタンを選択すると、ポインターが「アクティブ」になり、Web ページ上の要素を選択して DOM 内で表示できるようになります。
2つ目の方法は、ページ上の項目を右クリックし、ドロップダウンから検査を選択することです。これは、ポインターを使う方法と同じ効果があります。
必要に応じて、この機能を使うことで、トラブルシューティングに役立つ追加情報をサポートチームに提供できます。
詳細については、Chrome™ DevTools の要素に関するドキュメント ↗を参照してください。
Chrome™ は Google Inc. の商標です。