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

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?

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.

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

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.

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 đó!

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

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

3. Bấm Importvào góc trên bên trái rồiPaste Raw Text

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:

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.

Để 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)

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>

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";