Chrome Geliştirici araçlarını kullanarak HTTP İstekleri yapma


208

POSTER gibi bir eklenti kullanmadan Chrome Geliştirici araçlarını kullanarak HTTP isteği yapmanın bir yolu var mı?


1
Alanlar arası veya geliştirici araçlarını açtığınız aynı alanda istekte bulunmayı mı umuyorsunuz?
— Lukas

6
Bu özelliği isteyen herkes için - şu Chromium sorununa yıldız
— ekleyin

1
Hepsi yararlı cevaplardı, sadece oldukça kullanışlı Advanced Rest Client bulduğum bir araç eklemek istedim . Bunu kullanmak, birden fazla API isteği yapacaksa uzun vadede çok zaman kazanmanıza yardımcı olabilir.
— Sagar Ranglani

6
Firefox bunun için daha iyi bir seçenektir. sadece isteği sağ tıklayın ve yeniden gönderin veya düzenleyin ve tekrar gönderin.
— eusoubrasileiro

@eusoubrasileiro: Teşekkürler. Bir isteği yeniden göndermek için Firefox'taki ağ sekmesindeki Düzenle ve Tekrar Gönder düğmesi gerçekten güzel bir özelliktir. Birisi de krom eklemek için bir istek umut
— firstpostcommenter

Yanıtlar:


188

Yana getir API Chrome (ve çoğu diğer tarayıcılar) tarafından desteklenen, oldukça kolay HTTP devtools konsoldan istekleri yapmak şimdi.

To GET örneğin bir JSON dosyası:

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

Veya yeni bir kaynak GÖNDERMEK için:

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 aslında yeni eşzamansız / bekliyor sözdizimini de destekliyor (normalde yalnızca normalde bir eşzamansız işlev içinde kullanılabilse de):

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

İsteklerinizin tarayıcıdaki diğer HTTP isteklerinde olduğu gibi aynı köken politikasına tabi olacağına dikkat edin , bu nedenle ya çapraz kaynak isteklerinden kaçının ya da sunucunun isteğinize izin veren CORS başlıklarını ayarladığından emin olun.

Bir eklenti kullanma (eski yanıt)

Daha önce yayınlanan önerilere ek olarak , Chrome için Postman eklentisinin çok iyi çalıştığını gördüm . Üstbilgileri ve URL parametrelerini ayarlamanıza, HTTP kimlik doğrulamasını kullanmanıza, sık sık yürüttüğünüz isteği kaydetmenize vb.


3
Op, Postacı'yı kullanarak bir yanıtı kabul ettiğinden: dev-tools ve "cURL olarak kopyala" daki isteği sağ tıklarsanız, isteği yeniden göndermek / değiştirmek için cURL komutunu Postacı'ya aktarabilirsiniz. Bakınız: getpostman.com/docs/postman/collections/data_formats -> "cURL olarak içe aktarma"
— dhfsk

1
Bir gönderi talebi nasıl yapılır?
— Nuhman

7
@Nuhman Fetch, isteği yapılandırabileceğiniz ikinci bir argüman alıyorfetch("/echo/json/", { method: "POST", body: data })
— Christofer Eliasson

1
Chrome Geliştirme Araçları ağ geçmişinden herhangi bir isteği almak için Kopyala seçeneğinin de mümkün olduğunu unutmayın .
— Vadzim

1
@mathtick bir yoktur modekullanabileceğiniz istek seçeneği: fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }. Şu modun olduğuna dikkat edin: "no-cors" istekte yalnızca sınırlı bir başlık kümesi sağlar. Getirme ve no-cors kullanma hakkında daha fazla bilgi
— Christofer Eliasson

154

Chrome Geliştirici Araçları'nın Ağ sekmesinde yakaladığınız bir isteği düzenlemek ve yeniden göndermek istiyorsanız:

  • Nameİsteğin üzerine sağ tıklayın
  • seçmek Copy > Copy as cURL
  • Komut satırına yapıştırma (komut çerezleri ve başlıkları içerir)
  • İsteği gerektiği gibi düzenleyin ve çalıştırın

resim açıklamasını buraya girin


11
Firefox, tekrar çalmadan önce aramayı düzenlemenize izin verir, ancak
— kromda

3
Chrome 63+ ile, CURL'yi konsola yapıştırmak çalışmaz.
— Ravi Parekh

2
@RaviParekh Chrome konsolu anlamına geldiğini sanmıyorum, OS komut satırı anlamına geliyordu
— Korayem

4
Getirme olarak kopyala, değiştirilen istekleri doğrudan Chrome Dev Tools konsolundan yeniden yayınlamaya olanak tanır ve cURL veya rahatsız etme isteği olmayanlar için uygun bir alternatiftir.
— Vadzim

1
Ancak kıvrılma kullanmak bazen sonuç aynı değildir. Buraya tarayıcıdan istekte bulunup bulunamayacağımı öğrenmek için geldim. Tarayıcının javascript'ini kullanma. CORS sorunlarını yeniden üretmeme izin veriyor, terminalimden bir kıvrım beni aydınlatmamalı.
— Garry Dias

32

Biliyorum, eski yazı ... ama bunu burada bırakmak yardımcı olabilir.

Modern tarayıcılar artık Getirme API'sını destekliyor .

Bu şekilde kullanabilirsiniz:

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: Geliştirilmiş olduğu için tüm CORS kontrollerini yapacak XmlHttpRequest.


13

Web sayfanızda sayfanızda jquery varsa, bunu krom geliştiricileri konsolunda yazabilirsiniz:

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

Bunu yapmanın jquery yolu!


14
Bu, web sayfasının jQuery kullanacağını varsayar
— mikemaccana

2
Bunun yalnızca GETistekler için olduğunu, diğer istek türlerini yapmak istiyorsanız,$.ajax
— aksu'dan

@mikemaccana jQuery'yi konsol aracılığıyla herhangi bir sayfaya yükleyebilirsiniz.
— nehem

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

1
@itsneo yanıtı hemen yerinde! Erişilen sayfaya zaten sahip değilse jquery yüklemenin yolu. O zaman bir eklentiye ihtiyaç duymadan $ .ajax veya eşdeğerini kullanabilirsiniz
— Renato Chencinski

12

@Dhfsk cevabını genişletiyor

İşte iş akışım

  1. Chrome DevTools'tan, değiştirmek istediğiniz isteği sağ tıklayın> Copy as cURL Chrome DevTools cURL olarak kopyala

  2. Postacıyı Aç

  3. ImportSol üst köşeyi tıklayın ve ardındanPaste Raw Text Postacı Chrome'dan Ham Metin cURL Yapıştır

7

Aynı alan adından bir POST yapmak istiyorsanız, Geliştirici araçlarını kullanarak her zaman DOM'a bir form ekleyebilir ve şunları gönderebilirsiniz:

Belgeye form eklendi


4

Yukarıdaki cevapların ikisini bir araya getirmede en iyi şansım oldu. Chrome'daki siteye gidin, ardından DevTools'un Ağ sekmesinde isteği bulun. İsteği ve Kopyala'yı sağ tıklatın, ancak cURL yerine getirme olarak kopyala . Getirme kodunu komut satırını kullanmak yerine doğrudan DevTools konsoluna yapıştırabilir ve düzenleyebilirsiniz.


3
Onları 'yukarıda iki cevap' olarak belirtmeyin, çünkü yukarı / aşağı oylama sırasında bu durum değişebilir
— T.

4

Başlıkları olan istekleri almak için bu biçimi kullanın.

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

2

web sitenizde jquery kullanıyorsanız, konsolunuzda böyle bir şey kullanabilirsiniz

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

Basit tutmak, isteğin zaten bakmakta olduğunuz sayfayla aynı tarama bağlamını kullanmasını istiyorsanız, Chrome konsolunda şunları yapın:

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
Cevabınızı açıklamanız gerekir, sadece rastgele bir kod göndermeyin.
— Jakub Muda
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.