使用Chrome开发者工具进行HTTP请求

Question

是否有一种方法可以在不使用POSTER等插件的情况下，使用Chrome开发者工具进行HTTP请求？

- leojh

---

你是希望在跨域请求中进行操作，还是在打开开发者工具的同一域中进行操作？ - Lukas

所有希望有这个功能的人，请给这个Chromium问题点个星：https://code.google.com/p/chromium/issues/detail?id=106443&q=label%3AFeature-DevTools%20time&sort=-stars&colspec=ID%20Pri%20Mstone%20ReleaseBlock%20OS%20Area%20Feature%20Status%20Owner%20Summary%20Stars - Ivan Zuzak

所有答案都很有用，只是想添加一个我发现非常有用的工具——Advanced Rest Client。如果要进行多个API请求，使用这个工具可以帮助节省很多时间。 - Sagar Ranglani

火狐浏览器是更好的选择。只需右键点击请求，然后重新发送或编辑并重新发送即可。 - imbr

@eusoubrasileiro：谢谢。在Firefox的网络选项卡中，重新发送请求的“编辑和重新发送”按钮是一个非常好的功能。希望有人提出请求将其添加到Chrome中。 - firstpostcommenter

Answer 1

自从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通常只能在async函数内部使用）：

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

请注意，您的请求将受到与浏览器中任何其他HTTP请求相同的同源政策限制，因此要么避免跨域请求，要么确保服务器设置CORS标头以允许您的请求。

使用插件（旧答案）

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

- Christofer Eliasson

---

由于该操作员使用 Postman 接受了一个答案：如果您在开发工具中右键单击请求并选择“复制为 cURL”，然后可以将 cURL 命令导入到 Postman 中以重新发送/更改请求。请参阅：https://www.getpostman.com/docs/postman/collections/data_formats -> “将 cURL 导入” - dhfsk

如何进行POST请求？ - Nuhman

@Nuhman Fetch 方法有第二个参数，你可以在那里配置请求。例如: fetch("/echo/json/", { method: "POST", body: data }) - Christofer Eliasson

请注意，Chrome Dev Tools网络历史记录中还可以复制为fetch的请求。 - Vadzim

@mathtick 你可以使用 mode 请求选项：fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }。请注意，mode: "no-cors" 只允许请求中的有限一组标头。有关使用 fetch 和 no-cors 的更多信息。 - Christofer Eliasson

Answer 2

如果您想编辑并重新发出在Chrome开发者工具的网络标签中捕获的请求：

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

- apricot

---

Firefox允许您在重放之前编辑呼叫，但Chrome中没有这样的选项，因此上述答案是可行的方式。 - Tofeeq

在 Chrome 63 或更高版本中，将 CURL 命令粘贴到控制台中已经不起作用了。 - Ravi Parekh

@RaviParekh我认为他指的不是Chrome控制台，而是操作系统命令行。 - Korayem

“Copy as fetch” 允许直接从 Chrome Dev Tools 控制台重新发出修改后的请求，对于那些没有 cURL 或不想麻烦使用它的人来说，这是一个可行的替代方案。 - Vadzim

但是使用curl时，有时结果并不相同。我来这里想知道是否可以从浏览器中请求。使用浏览器的JavaScript。它允许我重现CORS问题，而终端中的curl则无法告诉我。 - Garry Dias

Answer 3

我知道，这是一篇旧文章...但在这里留下这篇文章可能会有所帮助。

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

提示：由于它是改进版的XmlHttpRequest，因此它将执行所有CORS检查。

- tomblue

Answer 4

在 @dhfsk的答案上进行拓展（链接）

以下是我的工作流程：

1. 从Chrome开发者工具中，右键单击要操作的请求 > 复制为cURL

2. 打开Postman

3. 点击左上角的导入然后选择粘贴原始文本

- Korayem

---

Chrome浏览器不太好用，所以我转而使用Firefox，并成功地使用了编辑和重新发送功能！！！继续保持出色的工作，Firefox/Mozilla团队！！！ - Tien

POSTMAN现已弃用 :( - Martin Zvarík

@MartinZvarík 你是什么意思？私信功能正常运作。 - Korayem

Answer 5

如果您的网页中有jQuery，请在Chrome开发者控制台中编写以下内容：

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

这是使用jQuery的方式来完成它！

- sadaf2605

---

假定网页将使用 jQuery。 - mikemaccana

请记住，这仅适用于“GET”请求，如果您想进行其他类型的请求，您可能需要使用$.ajax。 - aksu

@mikemaccana 你可以通过控制台将jQuery加载到任何页面。 - nehem

var script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script); - nehem

@itsneo的答案非常准确！如果访问的页面没有加载jquery，可以使用这种方式来加载。然后，您可以使用$.ajax或等效方法，而无需插件。 - Renato Chencinski

Answer 6

我发现将上面两个答案结合起来效果最好。在Chrome中导航到网站，然后在DevTools的Network选项卡中找到请求。右键点击该请求并选择Copy as fetch而不是cURL。您可以直接将fetch代码粘贴到DevTools控制台中并进行编辑，而无需使用命令行。

- Aaron Parke

---

请勿称呼它们为“上面的两个答案”，因为在进行点赞/踩操作时，这些位置可能会发生变化。 - Urosh T.

Answer 7

如果您想在同一域名下进行POST请求，可以使用开发者工具将表单插入到DOM中并提交：

- Craig Curtis

Answer 8

要使用头信息进行 GET 请求，请使用以下格式。

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

- Nirojan Selvanathan

Answer 9

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

- Nazor

Answer 10

简单来说，如果你希望请求使用与你当前正在查看的页面相同的浏览上下文，则只需在Chrome控制台中执行以下操作：

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

- Dave Potts