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されたデータの情報が記載されている。