297

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

4

13 回答 13

312

由于Chrome（和大多数其他浏览器）支持Fetch API，现在从 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())

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

使用插件（旧答案）

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

于 2013-05-28T07:59:05.697 回答
179

如果您想编辑并重新发出您在 Chrome 开发人员工具的网络选项卡中捕获的请求：

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

在此处输入图像描述

于 2015-04-23T19:49:49.080 回答
44

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

现代浏览器现在支持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.

于 2017-01-12T00:54:27.403 回答
23

扩展@dhfsk答案

这是我的工作流程

  1. 在 Chrome DevTools 中，右键单击要操作的请求 >Copy as cURL Chrome DevTools 复制为 cURL

  2. 打开邮递员

  3. 然后点击Import左上角Paste Raw Text 邮递员从 Chrome 粘贴原始文本 cURL
于 2018-09-18T13:16:42.910 回答
15

如果您的网页在您的页面中有 jquery，那么您可以在 chrome 开发人员控制台上编写它：

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

它的jquery方式！

于 2013-01-09T23:36:12.027 回答
8

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

将表格插入文档

于 2017-07-05T05:54:45.097 回答
6

结合上面的两个答案，我很幸运。在 Chrome 中导航到该站点，然后在 DevTools 的 Network 选项卡上找到该请求。右键单击请求并复制，但复制为 fetch而不是 cURL。您可以将获取代码直接粘贴到 DevTools 控制台并进行编辑，而不是使用命令行。

于 2019-01-01T16:52:09.107 回答
5

要获取带有标头的请求，请使用此格式。

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)
于 2019-10-28T13:57:01.793 回答
2

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

于 2017-11-01T05:40:28.933 回答
1

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

window.location="https://www.example.com";
于 2017-06-01T13:03:10.663 回答
1 

$.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>

于 2019-10-10T00:07:51.597 回答
1

是的，有一种方法无需任何 3rd 方扩展。

我已经构建了javascript-snippet（您可以将其添加为 browser-bookmark），然后在任何站点上激活以监控和修改请求。：

在此处输入图像描述

如需进一步说明，请查看 github 页面。

于 2020-06-17T23:52:22.950 回答
0

您可以在 Firefox 的 Inspector 中编辑/重新发送请求，而无需使用任何第三方，如下所示：

  1. 按下F12以在 Firefox 中打开检查器 ▶ 转到“网络”选项卡
  2. 找到您的 API 请求并单击它，“标题”部分将出现在右侧（您可以在顶部的栏中进行过滤）
  3. “标题”选项卡带有一个Resend按钮，您可以在此处重新发送或编辑并重新发送

截屏

于 2021-09-06T14:25:53.457 回答