Chromeデベロッパーツールを使用したHTTPリクエストの作成

POSTERなどのプラグインを使用せずにChromeデベロッパーツールを使用してHTTPリクエストを行う方法はありますか？

以来取得APIは、クロム（および他のほとんどのブラウザ）によってサポートされている、それはデベロッパーツールのコンソールからのHTTPリクエストを行うために非常に簡単になりました。

するために、GETインスタンスのJSONファイルを：

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

または、新しいリソースをPOSTするには：

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())

リクエストには、ブラウザーの他のHTTPリクエストと同様に、同じオリジンポリシーが適用されることに注意してください。クロスオリジンリクエストを回避するか、サーバーがリクエストを許可するCORSヘッダーを設定していることを確認してください。

プラグインの使用（以前の回答）

以前に投稿された提案への追加として、Chrome のPostmanプラグインが非常にうまく機能することがわかりました。ヘッダーとURLパラメータの設定、HTTP認証の使用、頻繁に実行するリクエストの保存などを行うことができます。

Chromeデベロッパーツールの[ネットワーク]タブでキャプチャしたリクエストを編集して再発行する場合：

• Nameリクエストのを右クリックします
• 選択する Copy > Copy as cURL
• コマンドラインに貼り付けます（コマンドにはCookieとヘッダーが含まれます）
• 必要に応じてリクエストを編集して実行

私は知っています、古い投稿...しかし、これをここに残すことは役に立つかもしれません。

現在のブラウザはFetch APIをサポートしています。

次のように使用できます。

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

ps：改良されたため、すべてのCORSチェックが行われXmlHttpRequestます。

Webページのjqueryがページにある場合、Chrome開発者コンソールで次のように記述できます。

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

それを行うjqueryの方法！

@dhfskの回答を拡張する

これが私のワークフローです

1. Chrome DevToolsから、操作するリクエストを右クリックします> Copy as cURL

2. 郵便配達員を開く

3. Import左上隅をクリックしてからPaste Raw Text

同じドメインからPOSTを実行する場合は、開発者ツールを使用してDOMにフォームを挿入し、それを送信できます。

私は上記の答えのうち2つを組み合わせて運が良かった。Chromeでサイトに移動し、DevToolsの[ネットワーク]タブでリクエストを見つけます。リクエストを右クリックして[コピー]をクリックしますが、cURLではなくフェッチとしてコピーします。コマンドラインを使用する代わりに、フェッチコードをDevToolsコンソールに直接貼り付けて編集できます。

ヘッダー付きのリクエストを取得するには、この形式を使用します。

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

あなたがあなたのウェブサイトでjqueryを使用しているなら、あなたはこのようなものをあなたのコンソールで使うことができます

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

シンプルさを保ち、リクエストがすでに見ているページと同じブラウジングコンテキストを使用するようにしたい場合は、Chromeコンソールで次のようにします。

window.location="https://www.example.com";