web-dev-qa-db-ja.com

Chromeデベロッパーツールを使用してHTTPリクエストを送信する

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

google-chromegoogle-chrome-devtools
127
leojh

Fetch API はChrome（そして他のほとんどのブラウザ）でサポートされているので、devtoolsコンソールからHTTPリクエストをするのはとても簡単です。

たとえばJSONファイルをGETするには、次のようにします。

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は非同期関数内でのみ使用できますが）。

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

ブラウザの他のHTTPリクエストと同じように、リクエストは same-Originポリシー の対象になることに注意してください。サーバはあなたの要求を許可するCORSヘッダを設定します

プラグインを使う（古い答え）

以前に投稿された提案に加えて、私はChrome用の Postman プラグインがとてもうまくいくことを見つけました。ヘッダやURLパラメータの設定、HTTP認証の使用、頻繁に実行するリクエストの保存などができます。

87
Christofer Eliasson

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

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

enter image description here

126
apricot

私は知っています、古い記事...しかし、これをここに残しておくと便利かもしれません。

現代のブラウザ は 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

obs：それは改良されたXmlHttpRequestなので、すべてのCORSチェックを行います。

26
tomblue

あなたのWebページがあなたのページにjqueryを持っているなら、あなたはそれをchrome開発者コンソールで書くことができます：

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

それをするのはそのjquery方法！

11
sadaf2605

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

Inserted form into document

6
Craig Curtis

@dhfskで展開 答え

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

  1. Chrome DevToolsから、操作したいリクエストを右クリックし、> Copy as cURLChrome DevTools Copy as cURL

  2. オープンポストマン

  3. 左上隅のImportをクリックしてからPaste Raw TextPostman Paste Raw Text cURL from Chrome
5
Korayem

単純にしておくと、Chromeコンソールで、既に見ているページと同じブラウジングコンテキストをリクエストに使用する場合は、次のようにします。

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

あなたがあなたのウェブサイトで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>
2
Nazor

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

0
Aaron Parke

すべてが役に立つ答えでした、私がかなり役に立つと思うツールを加えたいだけでした Advanced Rest Client 。

これを使用すると、複数のAPIリクエストを作成する予定がある場合に、長期的に多くの時間を節約できます。

0
Sagar Ranglani