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

Question

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

Answer 1

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

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

Answer 2

由于Chrome（以及大多数其他浏览器）都支持Fetch API，因此现在很容易从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 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上扩展

这是我的工作流程

从Chrome DevTools中，右键单击要处理的请求> Copy as cURL
打开邮递员
点击左上角的Import，然后点击Paste Raw Text

Answer 7

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

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

Answer 8

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

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

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

Answer 10

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

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

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

Answer 11

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

Answer 12

$.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开发者工具发出HTTP请求

12 个答案:

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