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

Question

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

Answer 1

您可以在 Firefox 的 Inspector 中编辑/重新发送请求，而无需像这样使用任何 3rd 方：

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

Screenshot

Answer 2

是的，有一种方法不需要任何第三方扩展。

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

有关更多说明，请查看 github 页面。

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

ps：它将进行所有 CORS 检查，因为它是改进的 XmlHttpRequest。

Answer 4

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

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

Answer 5

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

由于 Chrome（以及大多数其他浏览器）支持 Fetch API，因此现在可以很容易地从 devtools 控制台发出 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())

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

使用插件（旧答案）

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

Answer 7

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

Answer 8

扩展@dhfsk answer

这是我的工作流程

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

2. 打开邮递员

3. 点击左上角的Import，然后点击Paste Raw Text

Answer 9

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

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

Answer 10

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

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

Answer 11

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

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

Answer 13

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

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

它的 jquery 方式！