Chrome POSTしたデータをブラウザから確認してみよう

目的

• どんなデータがPostされたかChromeで確認する方法を記載する

情報

1. 本方法は昨日先輩に確認方法を教えてもらったものである。忘れないようにメモする。

2. 今回は筆者作成の超簡易的なCRUD処理が含まれるlaravelのとあるデータPOST処理を例に出して見てみることとする。

3. laravelのPOSTを送るBladeファイルには下記の内容が記載されているものとする。

   <form action="{{ route('task.save') }}" method="post">
       @csrf
       <div>
           <label for="">TODOタイトル</label>
           @error('name')
               {{ $message }}
           @enderror
           <input type="text" name="name" value="{{ old('name') }}">
       </div>
       <div>
           <label for="">TODO詳細</label>
           @error('detail')
               {{ $message }}
           @enderror
           <textarea name="detail" cols="30" rows="10">{{ old('detail') }}</textarea>
       </div>
       <div>
           <label for="">タイムリミット</label>
           <select name="limit_id">
               @foreach ($post_data['limits'] as $limit)                            
                   <option value="{{ $limit['id'] }}">{{ $limit['name'] }}</option>
               @endforeach
           </select>
       </div>
       <input type="hidden" name="workspace_id" value="{{ $post_data['workspace_id'] }}">
       <input type="submit" value="登録">
   </form>
   

方法

1. POSTするデータを入力する画面をChromeで開き、検証モードを起動する。

   

2. 「Network」をクリックする。

   

3. 適当な内容を入力してデータをPOSTする。

   

4. 「Name」の欄にあるsaveをクリックする。（saveの部分はPOST側の実装によってsaveではない事がある。）

   

5. 出現した窓の「Headers」を下までスクロールしたところに「Form Data」という部分にPOSTされたデータの情報が記載されている。