使用Chrome开发者工具发出HTTP请求

Question

有没有办法在不使用像POSTER这样的插件的情况下使用Chrome开发者工具发出HTTP请求？

Answer 1

由于Fetch API受Chrome（以及大多数其他浏览器）支持，因此现在很容易从devtools控制台发出HTTP请求。

要获取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实际上也支持新的异步/等待语法（即使等待通常只能在异步函数中使用）：

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

请注意，您的请求将受same-origin policy的约束，就像浏览器中的任何其他HTTP请求一样，因此要么避免跨源请求，要么确保服务器设置允许您请求的CORS标头。

使用插件（旧答案）

作为以前发布的建议的补充，我发现Chrome的Postman插件工作得非常好。它允许您设置标头和URL参数，使用HTTP身份验证，保存您经常执行的请求等。

Answer 2

如果您要编辑并重新发出已在Chrome开发者工具的“网络”标签中捕获的请求，请执行以下操作：

• 右键单击请求的Name
• 选择Copy > Copy as cURL
• 粘贴到命令行（命令包括cookie和标题）
• 根据需要编辑请求并运行

Answer 3

我知道，老帖子......但是留在这里可能会有所帮助。

Modern browsers现在支持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：它将进行所有CORS检查，因为它是一个改进的XmlHttpRequest。

Answer 4

如果您的网页在您的网页中有jquery，那么您可以在chrome开发者控制台上进行编写：

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

它的jquery方式做到了！

Answer 5

如果您想从同一个域执行POST，您始终可以使用Developer工具将表单插入DOM并提交：

Answer 6

扩展@dhfsk answer

这是我的工作流程

1. 在Chrome DevTools中，右键单击要操作的请求> Copy as cURL
2. 打开邮递员
3. 点击左上角的Import，然后点击Paste Raw Text

Answer 7

如果你在你的网站上使用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>

Answer 8

保持简单，如果您希望请求使用与您正在查看的页面相同的浏览上下文，那么在Chrome控制台中只需执行以下操作：

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

Answer 9

结合上面的两个答案，我运气最好。导航到Chrome中的网站，然后在DevTools的“网络”标签上找到该请求。右键单击请求并复制，但复制为提取而不是cURL。您可以将获取代码直接粘贴到DevTools控制台并进行编辑，而不是使用命令行。