[解決済み】ChromeデベロッパーツールでHTTPリクエストを行う。

質問

POSTERのようなプラグインを使わずに、Chrome DeveloperツールでHTTPリクエストを行う方法はありますか？

どのように解決するのですか？

以来 Fetch API が Chrome (および他のほとんどのブラウザ) でサポートされているため、devtools コンソールから HTTP リクエストを行うことが非常に簡単になりました。

への ゲット 例えばJSONファイル。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

または ポスト 新しいリソースを作成します。

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtoolsは、新しいasync/await構文もサポートしています（awaitは通常async関数内でしか使用できませんが）。

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

あなたのリクエストには 同一生成元ポリシー したがって、クロスオリジンリクエストを避けるか、サーバーがあなたのリクエストを許可するCORS-ヘッダーを設定することを確認してください。

プラグインを使用する（古い回答）

以前投稿した提案に追加して、私は ポストマン のプラグインは非常によく機能します。ヘッダーやURLパラメータの設定、HTTP認証の使用、頻繁に実行するリクエストの保存などが可能です。