ブラウザでコンソールログを表示および保存する方法

Webサイトを操作するとき、表示されるUIの背後で多くのことが起こっています。クリックしたものすべてについて、Webサイトはサーバーと通信して、必要な情報を表示します。Webサイトが期待どおりに応答しない場合は、何がうまくいかなかったかを調べる必要があります。確認する内容の1つは、送受信されたメッセージ/要求です。これは、一部のブラウザの機能であるWebコンソールを介して実行できます。具体的には、Chromeや、EdgeやOperaなどの他のすべてのChromiumベースのブラウザでこれを行うことができます。プロセスは同じなので、Chromeでそれを行う方法を紹介します。

コンソールログの表示と保存

ブラウザを開き、送受信されたすべてのリクエストを表示するWebサイトに移動します。エラーが発生するか、「サインイン」をクリックしてホームページに移動するなど、本来あるべきではない方法で反応するまで、Webサイトを使用してください。

F12キーをタップするか、Ctrl + Shift + Iキーボードショートカットをタップするか、ブラウザの設定メニューに移動して開発者ツールを探します。Chromeでは、[その他のオプション]ボタンをクリックして、[その他のツール]> [デベロッパーツール]に移動する必要があります。

ツールは下部または側面で開き、現在のタブが分割されます。開発者ツールにはたくさんの小さなタブがあります。[コンソール]タブを探して選択します。

ログには、Webサイトとそれが通信するサーバーとの間で送信されたすべての要求がすでに入力されています。すべてを保存する必要があります。コンソール内を右クリックし、[名前を付けて保存]オプションを選択します。[ファイルの保存]ダイアログボックスが開きます。ファイルを保存する場所を選択すれば完了です。

ファイルの拡張子はLOGファイルになりますが、テキストファイルであるため、メモ帳やその他の任意のテキストエディタで表示できます。Webサイトで問題が発生している場合は、このファイルがトラブルシューティングに役立ちます。問題がブラウザに固有である場合、たとえば、WebサイトがFirefoxで応答しないが、Chromeで正常に機能する場合は、ログを取得するための別の方法が必要になります。多くの人がCharlesProxyと呼ばれる有料ツールを使用しています。しばらく経ち、ネットワークトラフィックを表示するための頼りになるツールになりました。無料の代替手段を探すことができます。無料のフィドラーがあります。これらのツールはセットアップが少し複雑になる傾向があるため、ブラウザコンソールの方がはるかに優れています。