web-dev-qa-db-ja.com

Chromeデバッガーでenctype = "multipart / form-data"を使用してフォームデータを表示する方法

Chrome Debuggerでフォームデータを視覚化しようとしています。データは、ファイルをロードしてテキストを送信するを介して送信されます。次のようなもの：

<form action="url" enctype="multipart/form-data" method="post">
     <input type="file" name="file"> <br>
     <input type="text" name="some_text">
</form>

開発ツールでPOSTリクエストのヘッダーを調べた場合、フォームデータセクションは表示されませんが、次のことがわかります。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryXGBFWL5ab6g5XoFN

この投稿 によると、データを分離するために使用される一種のセパレータです。しかし、私は提出されたデータについて他に何も見ていません。

提出済みの実際のデータを確認するにはどうすればよいですかsome_text in Chromeデバッガ。

google-chromehttp-postgoogle-chrome-devtools
15
floatingpurr

私のプラットフォームでテストしました：Chrome 79.0.3945.130（公式ビルド）（64ビット）、Windows10。この問題が最新バージョンのChrome（2020年1月22日現在）。

正確には、Chrome 79.0.3945.130（およびChromium Edge 79.0.309.68も同様））で見つけた問題は次のとおりです。

  1. Multipart/form-data POSTリクエストの場合、アップロードするファイルを指定せずにフォーム送信ボタンを押すと、ネットワークツールのヘッダータブの下にある「フォームデータ」セクションが表示されます「フォームデータ」セクションには、すべての通常のフォームフィールドが一覧表示されます。たとえば、フォームフィールド<input type = "text" name = "title" value = "hello Chrome" />は次の図に示され、ファイルフィールドにはファイルをアップロードしなかったからです。

enter image description here

  1. Multipart/form-data POSTリクエストの場合、実際にファイルをアップロードすると、サイズ（0Bなど）に関係なく）、通常のフォームフィールドを含む[フォームデータ]セクション全体が消えます！ポイントを示すためにヘッダーの下のすべてのセクションを折りたたんだ次の写真を参照してください。

enter image description here

この question とthis discussion で説明されているように、パフォーマンス上の理由からファイルの内容を非表示にすることは理にかなっていますが、すべての通常のフォームフィールドを非表示にすることも意味がありません。これはChromeバグだと思います。

FireFoxでは、F12開発ツール>ネットワーク>パラメータの下にすべてのフォームデータとアップロードされたファイルのコンテンツが表示されます。次の例では、file.txtというコンテンツを含むfile.txtをアップロードしました。

enter image description here

したがって、FirefoxはChrome=がこの問題に対処する前に一時的な解決策を提供します。

4
Peng

chromeバージョン77および78でも問題は存在します。Fiddlerなどのツールで動作しています。

この質問への回答を参照してください。 「multipart/form-data」POSTリクエストには、アップロードされた画像のデータを含む文字列が実際に含まれている必要がありますか？

彼らはフィドラーを使用することをお勧めします。 Chrome開発者ツールはデータを表示しません。これは、開発者がパフォーマンス上の理由から選択せず、これが現在の設計の制限であることを認めているためです。

こちらもご覧くださいChromeバグ レポート 。

1
Étienne