Chrome डेवलपर टूल का उपयोग करके HTTP अनुरोध करना

Question

क्या POSTER जैसे प्लगइन का उपयोग किए बिना Chrome डेवलपर टूल का उपयोग करके HTTP अनुरोध करने का कोई तरीका है?

Comments

क्या आप अनुरोधों को क्रॉस-डोमेन या उसी डोमेन पर बनाने की उम्मीद कर रहे हैं जिसमें आपने डेवलपर टूल खोले हैं?

— लुकास

इस सुविधा को चाहने वाले सभी लोगों के लिए - इस क्रोमियम मुद्दे को स्टार करें: code.google.com/p/chromium/issues/…

— इवान ज़ुजाक

सभी उपयोगी उत्तर थे, बस मैं एक उपकरण जोड़ना चाहता था जिसमें मुझे बहुत उपयोगी उन्नत रेस्ट क्लाइंट मिले । इसका उपयोग करने से व्यक्ति को लंबे समय में बहुत से समय बचाने में मदद मिल सकती है यदि कोई एक से अधिक एपीआई अनुरोध करने जा रहा है।

— सागर रंगलानी

इसके लिए फ़ायरफ़ॉक्स एक बेहतर विकल्प है। बस अनुरोध पर राइट-क्लिक करें और फिर से भेजें या संपादित करें और फिर से भेजें।

— eusoubrasileiro

@eusoubrasileiro: धन्यवाद। किसी अनुरोध को फिर से भेजने के लिए फ़ायरफ़ॉक्स में नेटवर्क टैब में संपादित करें और फिर से भेजें बटन वास्तव में अच्छी सुविधा है। आशा किसी रूप में अच्छी तरह क्रोम में यह शामिल करने का अनुरोध को जन्म देती है

— firstpostcommenter

Answer 1

चूंकि Fetch API Chrome (और अधिकांश अन्य ब्राउज़र) द्वारा समर्थित है, इसलिए अब devtools कंसोल से HTTP अनुरोध करना काफी आसान है।

करने के लिए मिलता है उदाहरण के लिए एक JSON फ़ाइल:

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

या एक नए संसाधन को पोस्ट करने के लिए :

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)

क्रोम देवटूल वास्तव में नए async / प्रतीक्षा सिंटैक्स का भी समर्थन करते हैं (भले ही आमतौर पर केवल async फ़ंक्शन का उपयोग किया जा सकता है):

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

ध्यान दें कि आपके अनुरोध उसी-मूल नीति के अधीन होंगे , जैसे ब्राउज़र में कोई अन्य HTTP-रिक्वेस्ट, इसलिए या तो क्रॉस-ऑरिजिनल रिक्वेस्ट से बचें, या सुनिश्चित करें कि सर्वर आपके अनुरोध की अनुमति देने वाले कोर्स-हेडर को सेट करे।

प्लगइन का उपयोग करना (पुराना उत्तर)

पहले से पोस्ट किए गए सुझावों के अतिरिक्त, मैंने क्रोम के लिए पोस्टमैन प्लगइन को बहुत अच्छी तरह से काम करने के लिए पाया है । यह आपको हेडर और URL पैरामीटर सेट करने, HTTP प्रमाणीकरण का उपयोग करने, आपके द्वारा बार-बार अमल करने के अनुरोध को बचाने की अनुमति देता है।

Comments

चूंकि ऑप ने पोस्टमैन का उपयोग करते हुए एक उत्तर स्वीकार किया है: यदि आप देव-टूल्स में अनुरोध को राइट-क्लिक करते हैं और "CURL के रूप में कॉपी करें" तो आप अनुरोध को बदलने / बदलने के लिए पोस्टमैन में cURL कमांड को आयात कर सकते हैं। देखें: getpostman.com/docs/postman/collections/data_formats -> " CURL के रूप में आयात करना"

— dhfsk

पोस्ट अनुरोध कैसे करें?

— नुहमान

@ न्हुमन फेच एक दूसरा तर्क लेता है जहां आप अनुरोध को कॉन्फ़िगर कर सकते हैंfetch("/echo/json/", { method: "POST", body: data })

— क्रिस्टोफर एलियासन

ध्यान दें कि Chrome देव टूल्स नेटवर्क के इतिहास के किसी भी अनुरोध को कॉपी करना भी संभव है ।

— वडज़िम

@ मैथिक एक modeअनुरोध विकल्प है जिसका आप उपयोग कर सकते हैं fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }:। उस मोड पर ध्यान दें: "नो-कॉर्स" केवल अनुरोध में सीमित हेडर की अनुमति देता है। भ्रूण और नो-कॉर्स के उपयोग के बारे में अधिक जानकारी

— क्रिस्टोफर एलियासन

Answer 2

यदि आप Chrome डेवलपर टूल के नेटवर्क टैब में कैप्चर किए गए अनुरोध को संपादित करना और फिर से जारी करना चाहते हैं:

• Nameअनुरोध पर राइट-क्लिक करें
• चुनते हैं Copy > Copy as cURL
• कमांड लाइन पर पेस्ट करें (कमांड में कुकीज़ और हेडर शामिल हैं)
• अनुरोध को आवश्यकतानुसार संपादित करें और चलाएं

Comments

फ़ायरफ़ॉक्स आपको रीप्ले से पहले कॉल को संपादित करने की अनुमति देता है, लेकिन क्रोम में ऐसा कोई विकल्प नहीं है, इसलिए उपरोक्त उत्तर जाने का रास्ता है

— टॉफिक

63+ क्रोम के साथ, कंसोल में CURL चिपकाने से काम नहीं चल रहा है।

— रवि पारेख

@RaviParekh मुझे नहीं लगता कि उनका मतलब क्रोम कंसोल था, उनका मतलब ओएस कमांड लाइन

— कोरयेम

कॉपी के रूप में लाने के लिए क्रोम देव उपकरण कंसोल से सीधे बदल अनुरोधों को फिर से जारी करने की अनुमति देता है और उन लोगों के लिए व्यवहार्य विकल्प है जिनके पास cURL नहीं है या इसके साथ परेशान करने की इच्छा नहीं है।

— वडज़िम

लेकिन कर्ल का उपयोग करना, कभी-कभी परिणाम समान नहीं होता है। मुझे पता चला कि क्या मैं ब्राउज़र से अनुरोध कर सकता हूं। ब्राउज़र की जावास्क्रिप्ट का उपयोग करना। यह मुझे कॉर्स मुद्दों को पुन: पेश करने की अनुमति देता है, मेरे टर्मिनल से एक कर्ल मुझे क्या बताए।

— गैरी डायस

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

ps: चूंकि यह एक सुधार है, इसलिए यह सभी CORS जाँच करेगा XmlHttpRequest।

Answer 4

यदि आपके वेब पेज पर आपके पेज में jquery है, तो आप इसे क्रोम डेवलपर्स कंसोल पर लिख सकते हैं:

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

इसे करने का अपना तरीका!

Comments

यह मानता है कि वेब पेज 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 5

@Dhfsk जवाब पर विस्तार

यहाँ मेरे कार्यप्रवाह है

1. Chrome DevTools से, उस अनुरोध पर राइट-क्लिक करें, जिसमें आप हेरफेर करना चाहते हैं> Copy as cURL

2. पोस्टमैन खोलें

3. Importइसके बाद ऊपरी-बाएँ कोने में क्लिक करेंPaste Raw Text

Answer 6

यदि आप एक ही डोमेन से POST करना चाहते हैं, तो आप हमेशा डेवलपर टूल का उपयोग करके DOM में एक फॉर्म डाल सकते हैं और सबमिट कर सकते हैं:

Answer 7

ऊपर दिए गए उत्तरों में से दो का संयोजन करने का मेरा सौभाग्य था। Chrome में साइट पर नेविगेट करें, फिर DevTools के नेटवर्क टैब पर अनुरोध खोजें। अनुरोध पर क्लिक करें और कॉपी करें, लेकिन cURL के बजाय कॉपी के रूप में लाएं। आप कमांड लाइन का उपयोग करने के बजाय सीधे DevTools कंसोल में भ्रूण कोड पेस्ट कर सकते हैं और इसे संपादित कर सकते हैं।

Comments

उन्हें 'ऊपर दिए गए दो उत्तर' के रूप में संदर्भित न करें क्योंकि उत्थान / डाउनवोटिंग में परिवर्तन हो सकता है

— Urosh T.

Answer 8

हेडर के साथ अनुरोध प्राप्त करने के लिए, इस प्रारूप का उपयोग करें।

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

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>

Answer 10

इसे सरल रखते हुए, यदि आप उसी ब्राउज़िंग संदर्भ का उपयोग करने के लिए अनुरोध करना चाहते हैं जिस पृष्ठ को आप पहले से ही Chrome कंसोल में देख रहे हैं, तो बस यह करें:

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

Answer 11

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

Comments

आपको अपना उत्तर स्पष्ट करना चाहिए, न कि कुछ यादृच्छिक कोड पोस्ट करना चाहिए।

— जकुब मुदा