ক্রোম বিকাশকারী সরঞ্জামগুলি ব্যবহার করে HTTP অনুরোধ করা


205

পোষ্টারের মতো প্লাগইন ব্যবহার না করে Chrome বিকাশকারী সরঞ্জামগুলি ব্যবহার করে কোনও HTTP অনুরোধ করার কোনও উপায় আছে?


1
আপনি কি অনুরোধ ক্রস-ডোমেন, বা একই ডোমেনে যেখানে আপনি বিকাশকারী সরঞ্জাম খোলার বিষয়ে আশা করছেন?
Lukas

6
এই বৈশিষ্ট্যটি চাওয়ার জন্য সমস্ত লোকের জন্য - এই ক্রোমিয়াম ইস্যুটিকে তারকাচিহ্নিত
ইভান জুজাক

1
সবগুলি দরকারী উত্তর ছিল, কেবলমাত্র একটি সরঞ্জাম যুক্ত করতে চেয়েছিলাম যা আমি বেশ দরকারী অ্যাডভান্সড রেস্ট ক্লায়েন্টকে পেয়েছি । এটির সাহায্যে যদি কেউ একাধিক এপিআই অনুরোধ করতে চলেছে তবে দীর্ঘমেয়াদে অনেক সময় সাশ্রয় করতে পারে।
সাগর রাঙলাণী

6
ফায়ারফক্স এটির জন্য আরও ভাল বিকল্প। অনুরোধটিতে ডান ক্লিক করুন এবং পুনরায় পাঠান বা সম্পাদনা করুন এবং পুনরায় পাঠান।
ইউসুব্র্যাসিলিও

@ ইউসৌব্র্যাসিলিও: ধন্যবাদ একটি অনুরোধ প্রেরণের জন্য ফায়ারফক্সের নেটওয়ার্ক ট্যাবে সম্পাদনা ও পুনরায় পাঠান বোতামটি সত্যিই দুর্দান্ত বৈশিষ্ট্য। আশা করি কেউ এটিকে ক্রোমে যুক্ত করার জন্য একটি অনুরোধ উত্থাপন করেছে
ফার্স্টপোস্টকমেন্টার

উত্তর:


185

যেহেতু ফ্যাচ এপিআই ক্রোম (এবং বেশিরভাগ অন্যান্য ব্রাউজারগুলি) দ্বারা সমর্থিত তাই এখন ডিভটোলস কনসোল থেকে HTTP অনুরোধ করা বেশ সহজ quite

করতে পান উদাহরণস্বরূপ একটি 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)

ক্রোম ডিভলটুলগুলি আসলে নতুন অ্যাসিঙ্ক / অপেক্ষার বাক্য গঠনটিকে সমর্থন করে (যদিও সাধারণত অপেক্ষা করা কেবলমাত্র একটি অ্যাসিঙ্ক ফাংশনের মধ্যেই ব্যবহৃত হতে পারে):

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

লক্ষ্য করুন যে আপনার অনুরোধগুলি ব্রাউজারের অন্য কোনও এইচটিটিপি-অনুরোধের মতো একই-উত্স নীতি সাপেক্ষে , সুতরাং হয় ক্রস-অরিজিন অনুরোধগুলি এড়িয়ে চলুন, বা নিশ্চিত করুন যে সার্ভারটি আপনার অনুরোধের অনুমতি দেয় এমন CORS- শিরোনাম সেট করে।

একটি প্লাগইন ব্যবহার (পুরানো উত্তর)

পূর্বে পোস্ট করা পরামর্শগুলির সংযোজন হিসাবে আমি Chrome এর জন্য পোস্টম্যান প্লাগইনটি খুব ভালভাবে কাজ করতে পেয়েছি । এটি আপনাকে শিরোনাম এবং ইউআরএল প্যারামিটার সেট করতে, এইচটিটিপি প্রমাণীকরণ ব্যবহার করতে, অনুরোধটি সংরক্ষণ করে যা আপনি প্রায়শই সম্পাদন করেন এবং এই জাতীয় অনুমতি দেয়।


3
যেহেতু অপশন পোস্টম্যান ব্যবহার করে একটি উত্তর স্বীকার করেছে: আপনি যদি ডি-সরঞ্জামগুলিতে অনুরোধটি ডান-ক্লিক করেন এবং "অনুরোধটি পুনরায় পাঠাতে / পরিবর্তন করতে পোস্টম্যানের মধ্যে URL টি URL টি আমদানি করতে পারেন তবে আপনি অনুরোধটি পুনরায় পাঠাতে পারেন।" দেখুন: getpostman.com/docs/postman/collections/data_formats -> "সিআরএল হিসাবে আমদানি করা হচ্ছে"
dhfsk

1
কিভাবে একটি পোস্ট অনুরোধ করবেন?
নুহমান

7
@ নুহমান ফেচ দ্বিতীয় যুক্তি নিয়েছে যেখানে আপনি অনুরোধটি কনফিগার করতে পারেনfetch("/echo/json/", { method: "POST", body: data })
ক্রিস্টোফার এলিয়াসন

1
মনে রাখবেন যে Chrome ডিভাইস নেটওয়ার্ক ইতিহাস থেকে কোনও অনুরোধ আনার জন্য অনুলিপি করাও সম্ভব ।
ভাদজিম

1
@mathtick একটি নেই modeঅনুরোধ বিকল্পটি ব্যবহার করতে পারেন: fetch("/echo/json/", { method: 'POST', mode: 'no-cors' }। সেই মোডটি নোট করুন: "নো-কর্স" কেবলমাত্র অনুরোধে সীমিত হেডারের একটি সেটকে মঞ্জুরি দেয়। আনয়ন এবং নন-কর্স ব্যবহার সম্পর্কে আরও তথ্য
ক্রিস্টোফার এলিয়াসন

154

আপনি যদি ক্রোম বিকাশকারী সরঞ্জামগুলির নেটওয়ার্ক ট্যাবে ক্যাপচার করা একটি অনুরোধ সম্পাদনা করতে এবং পুনরায় প্রকাশ করতে চান:

  • Nameঅনুরোধটির ডান ক্লিক করুন
  • নির্বাচন করা Copy > Copy as cURL
  • কমান্ড লাইনে আটকান (কমান্ডটিতে কুকিজ এবং শিরোনাম অন্তর্ভুক্ত)
  • প্রয়োজন অনুসারে অনুরোধ সম্পাদনা করুন এবং চালান

এখানে চিত্র বর্ণনা লিখুন


11
ফায়ারফক্স আপনাকে রিপ্লে করার আগে কলটি সম্পাদনা করার অনুমতি দেয়, তবে ক্রোমে এ জাতীয় কোনও বিকল্প নেই, সুতরাং উপরের উত্তরটি যাওয়ার উপায়
তোফিক

3
ক্রোম 63+ সহ, কনসোলে সিআরএল আটকানো কাজ করছে না।
রবি পরেক

2
@ রবিপ্রেখ আমি মনে করি না যে তিনি ক্রোম কনসোলকে বোঝাতে চেয়েছিলেন, তিনি ওএস কমান্ড লাইনটি বুঝিয়েছিলেন
কোরায়েম

4
আনতে হিসাবে অনুলিপি ক্রোম দেব সরঞ্জামগুলি কনসোল থেকে সরাসরি পরিবর্তিত অনুরোধগুলি পুনরায় প্রকাশ করার অনুমতি দেয় এবং যাঁর সিআরএল নেই বা এটির বিরক্ত করার ইচ্ছা পোষণ করেন না তাদের পক্ষে কার্যকর বিকল্প।
ভাদজিম

1
তবে কার্ল ব্যবহার করে, কখনও কখনও ফলাফলটি এক হয় না। আমি ব্রাউজার থেকে অনুরোধ করতে পারি কিনা তা জানতে এখানে এসেছি। ব্রাউজারের জাভাস্ক্রিপ্ট ব্যবহার করা হচ্ছে। এটি আমাকে সিওআরএস বিষয়গুলি পুনরুত্পাদন করার অনুমতি দেয়, আমার টার্মিনালের কোনও কার্ল আমাকে আলোকিত করে না।
গ্যারি ডায়াস

32

আমি জানি, পুরানো পোস্ট ... তবে এটি এখানে রেখে দেওয়া সহায়ক হতে পারে।

আধুনিক ব্রাউজারগুলি এখন আনুন এপিআই সমর্থন করে ।

আপনি এটি এর মতো ব্যবহার করতে পারেন:

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: এটি সমস্ত কর্স চেক করবে, যেহেতু এটি একটি উন্নত XmlHttpRequest


13

যদি আপনার ওয়েব পৃষ্ঠায় আপনার পৃষ্ঠায় jquery থাকে, তবে আপনি এটি ক্রোম বিকাশকারীদের কনসোলে লিখে করতে পারেন:

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

এটি করার জন্য এটির jquery উপায়!


14
এটি ধরে নিয়েছে যে ওয়েব পৃষ্ঠাটি jQuery
মাইকম্যাকানা

2
মনে রাখবেন এটি কেবল GETঅনুরোধের জন্য , আপনি যদি অন্য ধরণের অনুরোধ করতে চান তবে আপনি ব্যবহার করতে পারেন$.ajax
aksu

@ মিকেম্যাকানা আপনি কনসোলের মাধ্যমে jQuery যে কোনও পৃষ্ঠায় লোড করতে পারেন।
নেহেম

1
এটি পছন্দ করুনvar script = document.createElement("script"); script.src = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"; document.body.appendChild(script);
নেহেম

1
@ আইস্নিও উত্তর ঠিক জায়গায় ছিল! পৃষ্ঠাটি অ্যাক্সেস করা হচ্ছে না থাকলে jquery লোড করার উপায় এটি ইতিমধ্যে নেই। তারপরে আপনি প্লাগিনের প্রয়োজন ছাড়াই $ .axax বা সমতুল্য ব্যবহার করতে পারেন
রেনাটো চেনসিনস্কি

12

@Dfsk উত্তরে প্রসারিত হচ্ছে

এই আমার কর্মপ্রবাহ

  1. ক্রোম ডেভটুলগুলি থেকে, আপনি যে ম্যানিপুলেট করতে চান তার অনুরোধটি ডান ক্লিক করুন Copy as cURL ক্রোম ডেভটুলস সিআরএল হিসাবে অনুলিপি করুন

  2. ওপেন পোস্টম্যান

  3. Importতারপরে উপরের-বাম কোণে ক্লিক করুনPaste Raw Text ক্রোম থেকে পোস্টম্যান পেস্ট কাঁচা পাঠ্য সিআরএল

7

আপনি যদি একই ডোমেন থেকে কোনও পোস্ট করতে চান, আপনি সর্বদা বিকাশকারী সরঞ্জাম ব্যবহার করে ডিওমে একটি ফর্ম সন্নিবেশ করতে পারেন এবং এটি জমা দিতে পারেন:

নথিতে ফর্ম .োকানো হয়েছে


4

উপরের দুটি উত্তর মিলিয়ে আমি শুভকামনা পেয়েছি। Chrome এ সাইটে নেভিগেট করুন, তারপরে ডিভটুলসের নেটওয়ার্ক ট্যাবে অনুরোধটি সন্ধান করুন। অনুরোধটিতে অনুলিপি করুন এবং অনুলিপি করুন, তবে সিআরএল এর পরিবর্তে আনয়ন হিসাবে অনুলিপি করুন । কমান্ড লাইনটি ব্যবহার না করে আপনি সরাসরি ডিটুলস কনসোলে আনতে কোডটি পেস্ট করতে পারেন এবং এটিকে সম্পাদনা করতে পারেন।


3
তাদের উপরের দুটি উত্তর হিসাবে উল্লেখ করবেন না কারণ উর্ধ্বকরণ / ডাউনভোটিং করার সময় এটি পরিবর্তন হতে পারে
উরোশ টি।

4

শিরোনামগুলির সাথে অনুরোধগুলি পেতে, এই ফর্ম্যাটটি ব্যবহার করুন।

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

2

আপনি যদি নিজের ওয়েবসাইটে 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>


1

এটিকে সহজ করে রাখলে আপনি যদি ইতিমধ্যে Chrome কনসোলে অনুসন্ধান করছেন এমন পৃষ্ঠার মতো একই ব্রাউজিং প্রসঙ্গটি ব্যবহার করার অনুরোধটি চান তবে তা করুন:

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
আপনার উত্তরটি ব্যাখ্যা করা উচিত, কেবল কয়েকটি এলোমেলো কোড পোস্ট করা উচিত নয়।
জাকুব মুদা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.