目的

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

情報

本方法は昨日先輩に確認方法を教えてもらったものである。忘れないようにメモする。
今回は筆者作成の超簡易的なCRUD処理が含まれるlaravelのとあるデータPOST処理を例に出して見てみることとする。

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>

方法

POSTするデータを入力する画面をChromeで開き、検証モードを起動する。
「Network」をクリックする。
適当な内容を入力してデータをPOSTする。
「Name」の欄にあるsaveをクリックする。（saveの部分はPOST側の実装によってsaveではない事がある。）
出現した窓の「Headers」を下までスクロールしたところに「Form Data」という部分にPOSTされたデータの情報が記載されている。