開発者ツールのログExport

記事概要

画面開発をしている際に、開発者ツールを使って相手方に確認をして貰いたいときがよく出てくる。相手方に開発者ツールを起動して貰い、「コンソール」・「ネットワーク」タブの操作ログをExportして送付頂くためのブラウザの操作手順。

環境

対象ブラウザ=>「Microsoft Edge」

コンソールのExport手順

1. 操作対象画面の表示
2. 開発者ツールの起動
   ➀ F12を押して、開発者ツールを起動する。
3. コンソールタブの選択
   ➀ 表示された開発者ツールから、コンソールを選択する。
   （選択肢にない場合「＋」からコンソールを選択する。）
   ➁ ログの保持に✓を入れる。
4. 画面操作
   ➀ コンソールログに残したい画面操作をする。
   （ここで不具合調査している対象の操作等を行う。）
5. 操作ログのExport
   ➀ 画面操作終了後、開発者ツールのコンソールログが出力されている箇所で右クリックをして、「名前を付けて保存」を選択し、操作ログをExportする。

ネットワークのExport手順

1. 操作対象画面の表示
2. 開発者ツールの起動
   ➀ F12を押して、開発者ツールを起動する。
3. ネットワークタブの選択
   ➀ 表示された開発者ツールから、ネットワークを選択する。
   （選択肢にない場合「＋」からネットワークを選択する。）
   ➁ ログの保持に✓を入れる
4. 画面操作
   ➀ ネットワークログに残したい画面操作をする。（ここで不具合調査している対象の操作等を行う。）
5. 操作ログのExport
   ➀ 画面操作終了後、開発者ツールのネットワークログが出力されている箇所で右クリックをして、「コンテンツを含むすべてをHARとして保存する」を選択し、操作ログをExportする。