注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。

Chrome™ DevTools でデバッグ

このガイドでは、Chrome™ ブラウザ内の開発ツール（DevTools）を使用して、予期しない動作を特定する方法や、Foundry サポートに提供する必要があるブラウザログを収集する方法を学びます。

曖昧なエラーをデバッグする上で最も重要なツールの1つは、Chrome™ DevTools（外部リンク）です。これにより、問題のデバッグに役立つ情報が得られ、閲覧しているWebページの背後で何が起こっているかについての内部情報を調べることができます。車のフードを開けて中を見るようなものです。

Chrome™ DevTools の使用
コンソールタブ
ネットワークタブ
ネットワークタブでのトレース ID の検索
要素タブ

Chrome™ DevTools の使用

以下の手順でコンソールログにアクセスできます。

開いている Web ページ上の要素を右クリックします。
検証を選択します。これにより、Web ページの横に画面が開きます。
上部にある コンソール タブに移動します。ここには、ほとんどのエラーが表示されます。
失敗したリクエストは赤色で表示されます。ページ上で失敗していると思われる赤いリクエストや、サポートチームが提供するよう指示された特定のリクエストを見つけます。エラーメッセージが表示されるために、ネットワークウィンドウを開いたままで関連する操作を行う必要がある場合があります。
左側のシェブロンを選択してリクエストを展開します。これにより、エラーメッセージや errorInstanceID など、追加の有用な情報が表示されることがよくあります。

タブ選択で赤く強調表示された DevTools のスクリーンショット

現時点で重要なのは、上部のツールバーです。ほとんどのトラブルシューティングでは、コンソール タブと ネットワーク タブに関連するエラーメッセージが含まれ、サポートチームにとって最も役立ちます。ただし、要素タブも問題の特定に役立つことがあるため、それについても説明します。

コンソールタブ

下の画像に示すように、Chrome™ コンソールは コンソール タブのツールバーでアクセスでき、2つの主要な目的があります。1つ目は Web アプリケーション自体による使用です。Web アプリケーションは、コンソールにデバッグ情報、エラーログ、情報メッセージなどを自由に出力することができます。

2つ目の目的は、ユーザーがコードのスニペットを実行して結果を調べることです。ただし、この使用法はこのガイドの範囲外です。

エラーが発生した場合、コンソールを開いて履歴を遡り、特にエラー（通常は赤で強調表示される）を探すことが役立ちます。これらのエラーは報告する際に役立ち、何がおかしかったかについての詳細情報が含まれることがよくあります。

例えば、DevTools を使ったデバッグページを読み込むと、コンソールログに次のスニペットが表示されるはずです。

DevTools コンソールエラーを示すスクリーンショット

情報行がたくさん表示されることがありますが、これらは上記のような単純な白い行です。また、赤で表示されるエラーもあります。注目すべきエラーは、URL の GET リクエストに続く 404 の数字です。これは、HTTP エラーコードで「ファイルが見つかりません」という意味です。もし、エラーに関する詳細情報を取得するためにコンソールを見ていた場合、このエラーはファイル名と一緒に報告するのに非常に役立ちます。この例では、ファイルが見つからない you-found-me.png への参照があります。

多くの場合、エラーを展開して追加情報を取得することも役立ちます。これは、エラーの開始時に小さな三角形を選択することで実行できます。

DevTools コンソール詳細のスクリーンショット

特定のページのコンソールログにアクセスするには：

開いているページ上の要素を右クリックし、検証を選択します。これにより、Web ページの横に画面が開きます。
ページの上部近くにある コンソール タブに移動します。
失敗したリクエストは赤色で表示されます。ページ上で失敗していると思われる赤いリクエストを見つけます。
左側のシェブロンを選択してリクエストを展開します。これにより、エラーメッセージや errorInstanceID などの追加情報が表示されることがよくあります。
関連するエラーが表示されていない場合は、コンソールログを開いたまま、失敗を引き起こした動作を再実行してみてください。

この操作により、サポートチームにトラブルシューティングに役立つ情報を提供できます。エラー情報を右クリックして 名前を付けて保存 を選択することで、ログを取得できます。プラットフォームにアップロードするために、保存したファイルを .log ファイルから TXT ファイルにリネームする必要がある場合があります。

詳細については、Chrome™ DevTools コンソール概要ドキュメント(外部)を参照してください。

ネットワークタブ

Foundry 製品でボタンを選択すると、ブラウザはサーバーにリクエストを送信し、サーバーは処理を行った後に応答を送信します。単一の Web ページでは、ページのリロードを引き起こさずに、表示されているデータを更新したり、新しいデータをサーバーに送信したりするために多くのリクエストが行われることがあります。ネットワーク タブでは、ブラウザが行っているすべてのリクエストを調べたり、受信した応答を確認したりすることができます。

DevTools ネットワークタブ

特定のページのネットワークログにアクセスするには：

開いているページ上の要素を右クリックし、検証を選択します。これにより、Web ページの横に画面が開きます。
ページの上部近くにある ネットワーク タブに移動します。
失敗したリクエストは赤色で表示されます。ページ上で失敗していると思われる赤いリクエストを見つけます。
左側のシェブロンを選択してリクエストを展開します。これにより、エラーメッセージや errorInstanceID などの追加情報が表示されることがよくあります。
関連するエラーが表示されていない場合は、コンソールログを開いたまま、失敗を引き起こした動作を再実行してみてください。

Status カラムに注意してください。これには、前述のこのドキュメントで説明したように、応答で受信したリクエストの HTTP ステータスコードが含まれています。404 エラーがあることに注意し、リクエストが成功したことを意味する 2 で始まる多くのリクエストがあることに注意してください。

このビューを使用してエラーに関する詳細情報を取得するためのベストプラクティスをいくつか紹介します。まず、サイドバーの左上隅にある 2 つのボタンを見てください。

最初のアイコンは赤く、現在ネットワークタブが記録中であることを示しています。これは、新しいリクエストが行われると、その下のビューにログが記録されることを意味します。これが無効の場合は、記録をオンに切り替える必要があります。同様に、リクエストのログが調べるよりも速く記録されていると感じた場合は、再度記録をオフにするために選択できます。

2つ目の記号（円と線を通している）は、ログをクリアすることができます。これは、最小限の手順で再現する直前に行うと便利です。この操作により、現在記録されているすべてのリクエストのログがクリアされ、新しいリクエストだけが表示されるようになります。

このログを使用する最良の方法は、次のとおりです。

エラーを引き起こす最小限の手順を実行しますが、エラーが発生する直前まで行います。
ログをクリアします。
エラーを引き起こす最後の手順を実行します。
新しいリクエストを調べます。特に、HTTP エラーコードがあるかどうかを確認します。報告にリクエストのスクリーンショットを添付することができます。

特定のリクエストが関心を持たれると思われる場合は、たとえば関連する HTTP エラーコードがある場合、エラー報告に含めると役立つ情報が次のとおりです。これは、フロントページに移動したときに生成されるエラーがあるリクエストの例です。

赤で強調表示されたフロントページエラーのスクリーンショット

赤で表示されており、エラーコードが 500 であることから、内部サーバーエラーが発生していることがわかります。すでに、これは報告に役立つ情報です。エラーのスクリーンショットを含め、「500 - 内部サーバー」に問題があることを伝えることができます。

まず、リクエストが行われた URL に注意してください。この場合、redirect?code=... が連絡先の URL です。これは、エラーの原因となるサービスを特定するのに役立ちます。たとえば、URL に 'foundry-metadata' が含まれている場合、foundry-metadata サービスが問題を引き起こしています。これは、エラー報告に含めるのに確かに役立ちます。

リクエストに相当する cURL も報告に役立ちます。リクエスト自体を右クリックして、メニューから コピー > cURL をコピー を選択することでコピーできます。

「cURL をコピー」と選択された右クリックメニューを表示するスクリーンショット

cURL は、コマンドラインからリクエストが行えるコマンドラインツールです。このボタンは、行われた正確なリクエストをクリップボードにコピーし、デバッガが cURL リクエストをどこでも、どのように実行するかを選択できるようになります。これにより、リクエストを調べて何がおかしいかを特定できます。これは、特に 4xx エラーで非常に役立ちます。エラー ID がある場合は、それらもメモしておいてください。Palantir サポートに送信するために、このコピーを TEXT ファイルとして保存することができますが、注意してください。

セキュリティ上の理由から、ログから既存のトークンを削除するか、それらは Palantir チームによって取り消されます。ファイルにトークンが含まれているかどうかを確認するには、「トークン」と「ベアラー」を検索し、続く文字列を削除します。
共有する前に機密情報を削除してください。

報告に含めると役立つ最後の要素は、同じコピーメニューからアクセスできるレスポンス自体です。

ネットワーク タブに特定のページでアクセスするには：

開いているページ上の要素を右クリックし、検証を選択します。これにより、Web ページの横に画面が開きます。
ページの上部近くにある ネットワーク タブに移動します。
ネットワークタブが開いているときに表示されていないことがあります。ページを更新するか、失敗した動作を再度トリガーすることで、タブに表示されるようになります。
ネットワークタブの 2 番目の列は「ステータス」です。「ステータス」を選択すると、降順に並べ替えられます。これにより、失敗したリクエストが上に表示されるようになります。失敗したリクエストは赤色で表示されます。
ページで失敗している可能性があるリクエストを見つけます。リクエストを選択すると、エラーメッセージや errorInstanceID など、さらに詳しい情報が表示されます。