Membuat Permintaan HTTP menggunakan alat Pengembang Chrome

Apakah ada cara untuk membuat permintaan HTTP menggunakan alat Pengembang Chrome tanpa menggunakan plugin seperti POSTER?

Sejak API Ambil didukung oleh Chrome (dan sebagian besar browser lainnya), sekarang cukup mudah untuk membuat permintaan HTTP dari konsol devtools.

Untuk MENDAPATKAN file JSON misalnya:

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

Atau untuk POST sumber daya baru:

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 sebenarnya juga mendukung sintaks async / await baru (walaupun menunggu biasanya hanya dapat digunakan dalam fungsi async):

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

Perhatikan bahwa permintaan Anda akan tunduk pada kebijakan asal-sama , sama seperti permintaan HTTP lainnya di browser, jadi hindari permintaan lintas-asal, atau pastikan server menetapkan header-CORS yang memungkinkan permintaan Anda.

Menggunakan plugin (jawaban lama)

Sebagai tambahan untuk saran yang diposting sebelumnya saya telah menemukan plugin Postman untuk Chrome berfungsi dengan sangat baik. Ini memungkinkan Anda untuk mengatur parameter header dan URL, menggunakan otentikasi HTTP, menyimpan permintaan yang sering Anda lakukan, dan sebagainya.

Jika Anda ingin mengedit dan menerbitkan kembali permintaan yang telah Anda tangkap di tab Jaringan Alat Pengembang Chrome:

• Klik kanan menu Name permintaan
• Pilih Copy > Copy as cURL
• Rekatkan ke baris perintah (perintah termasuk cookie dan tajuk)
• Edit permintaan sesuai kebutuhan dan jalankan

Saya tahu, posting lama ... tetapi mungkin bermanfaat untuk meninggalkan ini di sini.

Browser modern sekarang mendukung API Ambil .

Anda bisa menggunakannya seperti ini:

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: Ini akan melakukan semua pemeriksaan CORS, karena ini merupakan peningkatan XmlHttpRequest.

Jika halaman web Anda memiliki jquery di halaman Anda, maka Anda dapat melakukannya dengan menulis di konsol pengembang chrome:

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

Cara jquery melakukannya!

Memperluas jawaban @dhfsk

Inilah alur kerja saya

1. Dari Chrome DevTools, klik kanan permintaan yang ingin Anda manipulasi> Copy as cURL

2. Open Postman

3. Klik Importdi sudut kiri atas ituPaste Raw Text

Jika Anda ingin melakukan POST dari domain yang sama, Anda selalu bisa memasukkan formulir ke DOM menggunakan alat Pengembang dan mengirimkannya:

Saya beruntung menggabungkan dua jawaban di atas. Arahkan ke situs di Chrome, lalu temukan permintaan di tab Jaringan DevTools. Klik kanan permintaan dan Salin, tetapi Salin sebagai ambil alih-alih CURL. Anda dapat menempelkan kode ambil langsung ke konsol DevTools dan mengeditnya, alih-alih menggunakan baris perintah.

Untuk MENDAPATKAN permintaan dengan header, gunakan format ini.

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

jika Anda menggunakan jquery di situs web Anda, Anda dapat menggunakan sesuatu seperti ini di konsol Anda

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

Sederhananya, jika Anda ingin permintaan untuk menggunakan konteks penelusuran yang sama dengan halaman yang sudah Anda lihat maka di konsol Chrome lakukan saja:

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