Tạo yêu cầu HTTP bằng công cụ Chrome Developer


206

Có cách nào để thực hiện yêu cầu HTTP bằng công cụ Chrome Developer mà không cần sử dụng plugin như POSTER không?


1
Bạn có hy vọng thực hiện các yêu cầu tên miền chéo hoặc trên cùng một tên miền mà bạn đã mở các công cụ dành cho nhà phát triển không?
Lukas

6
Đối với tất cả những người muốn tính năng này - đánh dấu sao vấn đề Chromium này: code.google.com/p/chromium/issues/iêu
Ivan Zuzak

1
Tất cả đều là câu trả lời hữu ích, chỉ muốn thêm một công cụ tôi thấy Advanced Rest Client khá hữu ích . Sử dụng điều này có thể giúp một người tiết kiệm rất nhiều thời gian trong thời gian dài nếu một người sẽ thực hiện nhiều yêu cầu API.
Sagar Ranglani

6
Firefox là một lựa chọn tốt hơn cho việc này. chỉ cần nhấp chuột phải vào yêu cầu và gửi lại hoặc chỉnh sửa và gửi lại.
eusoubrasileiro

@eusoubrasileiro: Cảm ơn. Nút Chỉnh sửa & Gửi lại trong tab mạng trong Firefox để gửi lại yêu cầu là một tính năng thực sự tốt. Hy vọng ai đó cũng đưa ra yêu cầu thêm nó vào chrome
Firstpostcommenter

Câu trả lời:


187

Do API tìm nạp được Chrome hỗ trợ (và hầu hết các trình duyệt khác), nên giờ đây việc thực hiện các yêu cầu HTTP từ bảng điều khiển devtools khá dễ dàng.

Để NHẬN một tệp JSON chẳng hạn:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

Hoặc để POST một tài nguyên mới:

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 thực sự cũng hỗ trợ cú pháp async / await mới (mặc dù việc chờ đợi thông thường chỉ có thể được sử dụng trong chức năng async):

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

Lưu ý rằng các yêu cầu của bạn sẽ tuân theo chính sách cùng nguồn gốc , giống như mọi yêu cầu HTTP khác trong trình duyệt, do đó, tránh các yêu cầu xuất xứ chéo hoặc đảm bảo máy chủ đặt các tiêu đề CORS cho phép yêu cầu của bạn.

Sử dụng một plugin (câu trả lời cũ)

Ngoài các đề xuất được đăng trước đây, tôi đã tìm thấy plugin Postman cho Chrome hoạt động rất tốt. Nó cho phép bạn đặt các tiêu đề và tham số URL, sử dụng xác thực HTTP, lưu yêu cầu bạn thực hiện thường xuyên, v.v.


3
Vì op đã chấp nhận câu trả lời bằng Postman: Nếu bạn nhấp chuột phải vào yêu cầu trong dev-tools và "Copy as cURL", thì bạn có thể nhập lệnh cURL vào Postman để gửi lại / thay đổi yêu cầu. Xem: getpostman.com/docs/postman/collections/data_formats -> "Nhập dưới dạng cURL"
dhfsk

1
Làm thế nào để thực hiện một yêu cầu bài?
Nuhman

7
@Nuhman Fetch đưa ra một đối số thứ hai nơi bạn có thể định cấu hình yêu cầufetch("/echo/json/", { method: "POST", body: data })
Christofer Eliasson

1
Lưu ý rằng cũng có thể Sao chép dưới dạng tìm nạp bất kỳ yêu cầu nào từ lịch sử mạng của Công cụ Chrome Dev.
Vadzim

1
@mathtick Có một modetùy chọn yêu cầu bạn có thể sử dụng : fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }. Lưu ý rằng chế độ: "không có cors" chỉ cho phép một bộ tiêu đề giới hạn trong yêu cầu. Thông tin thêm về cách sử dụng tìm nạp và không có cors
Christofer Eliasson

154

Nếu bạn muốn chỉnh sửa và phát hành lại một yêu cầu mà bạn đã nắm bắt được trong tab Mạng của Công cụ dành cho nhà phát triển Chrome:

  • Nhấp chuột phải vào Nameyêu cầu
  • Lựa chọn Copy > Copy as cURL
  • Dán vào dòng lệnh (lệnh bao gồm cookie và tiêu đề)
  • Chỉnh sửa yêu cầu khi cần và chạy

nhập mô tả hình ảnh ở đây


11
Firefox cho phép bạn chỉnh sửa cuộc gọi trước khi phát lại, nhưng không có tùy chọn nào như vậy trong chrome, vì vậy câu trả lời ở trên là cách để thực hiện
Tofeeq

3
Với chrome 63+, việc dán CURL trong bảng điều khiển không hoạt động.
Ravi Parekh

2
@RaviParekh Tôi không nghĩ anh ấy có nghĩa là bảng điều khiển Chrome, anh ấy có nghĩa là dòng lệnh OS
Korayem

4
Sao chép dưới dạng tìm nạp cho phép phát hành lại các yêu cầu đã thay đổi trực tiếp từ bảng điều khiển Chrome Dev Tools và là giải pháp thay thế khả thi cho những người không có cURL hoặc muốn làm phiền với nó.
Vadzim

1
Nhưng sử dụng curl, đôi khi kết quả không giống nhau. Tôi đến đây để biết nếu tôi có thể yêu cầu từ trình duyệt. Sử dụng javascript của trình duyệt. Nó cho phép tôi tái tạo các vấn đề CORS, những gì một cuộn tròn từ thiết bị đầu cuối của tôi không nên khai sáng cho tôi.
Garry Dias

32

Tôi biết, bài cũ ... nhưng nó có thể hữu ích để lại ở đây.

Các trình duyệt hiện đại hiện đang hỗ trợ API Fetch .

Bạn có thể sử dụng nó như thế này:

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: Nó sẽ thực hiện tất cả các kiểm tra CORS, vì nó được cải thiện XmlHttpRequest.


13

Nếu trang web của bạn có jquery trong trang của bạn, thì bạn có thể viết nó trên bảng điều khiển dành cho nhà phát triển chrome:

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

Cách jquery của nó làm điều đó!


14
Điều này giả định rằng trang web sẽ sử dụng jQuery
mikemaccana

2
Hãy nhớ rằng điều này chỉ dành cho GETcác yêu cầu, nếu bạn muốn thực hiện các loại yêu cầu khác, bạn có thể muốn sử dụng$.ajax
aksu

@mikemaccana Bạn có thể tải jQuery vào bất kỳ trang nào thông qua bảng điều khiển.
nehem

1
Như thế nàyvar script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);
nehem

1
Câu trả lời @itsneo đã đúng tại chỗ! Cách tải jquery nếu trang đang truy cập chưa có. Sau đó, bạn có thể sử dụng $ .ajax hoặc tương đương mà không cần plugin
Renato Chencinski

12

Mở rộng trên câu trả lời @dhfsk

Đây là quy trình làm việc của tôi

  1. Từ DevTools của Chrome, nhấp chuột phải vào yêu cầu bạn muốn thao tác> Copy as cURL Chrome DevTools Sao chép dưới dạng cURL

  2. Người đưa thư mở

  3. Bấm Importvào góc trên bên trái rồiPaste Raw Text Người đưa thư Dán văn bản thô cURL từ Chrome

7

Nếu bạn muốn thực hiện POST từ cùng một tên miền, bạn luôn có thể chèn một biểu mẫu vào DOM bằng các công cụ dành cho nhà phát triển và gửi rằng:

Hình thức chèn vào tài liệu


4

Tôi đã có may mắn nhất kết hợp hai trong số các câu trả lời ở trên. Điều hướng đến trang web trong Chrome, sau đó tìm yêu cầu trên tab Mạng của DevTools. Nhấp chuột phải vào yêu cầu và Sao chép, nhưng Sao chép dưới dạng tìm nạp thay vì cURL. Bạn có thể dán mã tìm nạp trực tiếp vào bảng điều khiển DevTools và chỉnh sửa nó, thay vì sử dụng dòng lệnh.


3
Đừng gọi chúng là "hai câu trả lời ở trên" bởi vì điều đó có thể thay đổi khi nâng cấp / hạ cấp
Urosh T.

4

Để NHẬN yêu cầu với các tiêu đề, sử dụng định dạng này.

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

2

nếu bạn sử dụng jquery trên trang web của mình, bạn có thể sử dụng cái gì đó như bảng điều khiển này

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


1

Giữ cho nó đơn giản, nếu bạn muốn yêu cầu sử dụng bối cảnh duyệt giống như trang bạn đang xem thì trong bảng điều khiển Chrome chỉ cần làm:

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

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>


1
Bạn nên giải thích câu trả lời của bạn, không chỉ đăng một số mã ngẫu nhiên.
Jakub Muda
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.