এক্সটেনশন অনুরোধ লুকান এবং আরও নেটওয়ার্ক প্যানেলের উন্নতি

সিলভিয়া ইরেমিয়া
আইওনা ফরফোটা

Chrome DevTools- এ, নেটওয়ার্ক প্যানেল যা আপনাকে একটি ওয়েব পৃষ্ঠার নেটওয়ার্ক কার্যকলাপ সম্পর্কে মূল্যবান অন্তর্দৃষ্টি প্রদান করে তা হল সবচেয়ে বেশি ব্যবহৃত টুলগুলির মধ্যে একটি৷

এই নিবন্ধটি নেটওয়ার্ক প্যানেলে অত্যন্ত কাঙ্খিত উন্নতির একটি সেট শেয়ার করে যা Ioana Forfota এবং Silvia Eremia তাদের STEP ইন্টার্নশিপ চলাকালীন করেছিলেন। এই উন্নতিগুলি অধীর আগ্রহে প্রতীক্ষা করা হয়েছে এবং Chromium-এর ইস্যু ট্র্যাকারের বিস্তৃত ব্যাকলগ থেকে সাবধানে নির্বাচন করা হয়েছে এবং প্যানেলটিকে আরও অ্যাক্সেসযোগ্য, স্বজ্ঞাত এবং তথ্যপূর্ণ করে তুলছে৷

এই নতুন বৈশিষ্ট্যগুলির সাথে, নেটওয়ার্ক প্যানেল ওয়েব ডেভেলপারদের করার ক্ষমতা দেয়:

  • শুধুমাত্র প্রাসঙ্গিক নেটওয়ার্ক অনুরোধের উপর ফোকাস করুন।
  • বাহ্যিক রেফারেন্সের প্রয়োজন ছাড়াই HTTP স্থিতি কোডগুলি বুঝুন।
  • দ্রুত শনাক্ত করুন এবং অনুরোধ ত্রুটির ঠিকানা.
  • JSON সাব-টাইপ প্রতিক্রিয়াগুলি বুঝুন।

বিস্তারিত জানার জন্য পড়ুন!

ক্রোম এক্সটেনশন অনুরোধগুলি ফিল্টার করুন

ক্রোম এক্সটেনশনগুলি তাদের নিজস্ব নেটওয়ার্ক অনুরোধ করতে পারে, যা নেটওয়ার্ক প্যানেলে পৃষ্ঠার অনুরোধের পাশাপাশি উপস্থিত হয়৷ আপনি যদি সক্রিয়ভাবে একটি এক্সটেনশন বিকাশ না করে থাকেন, তাহলে এই অনুরোধগুলি সম্ভবত আপনার জন্য প্রাসঙ্গিক হবে না৷ পূর্বে, তাদের লুকানোর একমাত্র উপায় ছিল -scheme:chrome-extension ফিল্টার ব্যবহার করা বা ছদ্মবেশী মোডে ডিবাগ করা।

Chrome 117 থেকে এটি আরও সহজ হয়ে উঠেছে। নেটওয়ার্ক প্যানেল ডিক্লাটার করতে, DevTools এখন Chrome এক্সটেনশন অনুরোধগুলি বাদ দিতে একটি চেকবক্স অফার করে৷

এই বৈশিষ্ট্যের ডিফল্ট অবস্থা নিয়ে আলোচনা চলছে। প্রাথমিকভাবে, আমরা এটিকে ডিফল্টরূপে সক্রিয় করার কথা বিবেচনা করেছি, এই ধারণার সাথে যে এটি বেশিরভাগ ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে পারে। যাইহোক, এই পদ্ধতিটি কিছু ব্যবহারকারীকে অজ্ঞাত রাখতে পারে যে Chrome এক্সটেনশন URLগুলি অনুরোধগুলিকে ট্রিগার করতে পারে৷ এটি এক্সটেনশন ডেভেলপারদের জন্য চ্যালেঞ্জও তৈরি করতে পারে। তাই, ডিফল্ট অবস্থা 'অক্ষম'-এ সেট করা আছে।

সাইটের অনুরোধের সাথে নেটওয়ার্ক অনুরোধগুলি প্যানেলে দেখানো হয়।
আগে: Chrome এক্সটেনশন থেকে নেটওয়ার্ক অনুরোধগুলি দেখা যেতে পারে।
নেটওয়ার্ক অনুরোধ লুকানো হয়.
এর পরে: Chrome এক্সটেনশনগুলি থেকে নেটওয়ার্ক অনুরোধগুলি লুকানো হয়েছে৷

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

HTTP প্রতিক্রিয়া স্থিতি পাঠ্য

কার্যকর ডিবাগিংয়ের জন্য HTTP স্থিতি কোড বোঝা অপরিহার্য। যাইহোক, ক্রমাগত তাদের অর্থ অনুসন্ধান করা অসুবিধাজনক হতে পারে। DevTools একটি সহায়ক বর্ধিতকরণ চালু করেছে: যখন আপনি অনুরোধ তালিকার একটি স্ট্যাটাস কোডের উপরে পয়েন্টার ধরে রাখেন, তখন একটি টুলটিপ তাৎক্ষণিকভাবে তার স্ট্যাটাস টেক্সট প্রদান করবে–একটি বর্ণনামূলক শিরোনাম যা এর অর্থ স্পষ্ট করে।

স্ট্যাটাস কোডের উপরে পয়েন্টার রাখা হলে টুলটিপ প্রদর্শিত হয়।

স্ট্যাটাস টেক্সট কোডের ঠিক পাশে হেডার ভিউতেও দৃশ্যমান। পূর্বে শুধুমাত্র HTTP/1.1-এর জন্য উপলব্ধ থাকলেও, এই বৈশিষ্ট্যগুলি এখন HTTP/2 এবং HTTP/3-তে প্রসারিত করা হয়েছে। এই আপাতদৃষ্টিতে ছোট সামঞ্জস্যগুলির একটি উল্লেখযোগ্য প্রভাব রয়েছে, আপনার সময় বাঁচায় এবং আপনাকে কোডের অর্থ অনুসন্ধান করার পরিবর্তে ডিবাগিংয়ের উপর ফোকাস করার অনুমতি দেয়।

হেডার সহ দেখানো স্ট্যাটাস টেক্সট।

বর্ধিত ত্রুটি দৃশ্যমানতা

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

ত্রুটিটি একটি আইকনের পাশাপাশি রঙ দিয়ে হাইলাইট করা হয়েছে।

JSON সাব-টাইপগুলি সুন্দর-মুদ্রণ করা

ওয়েব ডেভেলপমেন্টে প্রায়শই JSON প্রতিক্রিয়াগুলি পরিদর্শন করা জড়িত, কিন্তু অপরিশোধিত JSONগুলি পড়া খুব অসুবিধাজনক। এই ধরনের প্রতিক্রিয়াগুলির সাথে মোকাবিলা করা, বিশেষ করে ld+json , hal+json , বা sparql-results+json এর মতো সাবটাইপগুলি হতাশাজনক হতে পারে, উদাহরণস্বরূপ যখন এগুলি একক লাইনে প্রদর্শিত হয়৷ জিনিসগুলিকে সহজ করার জন্য, DevTools JSON সাবটাইপের জন্য আরও ব্যবহারকারী-বান্ধব, সংকোচনযোগ্য উপস্থাপনা চালু করেছে। এখন, এই প্রতিক্রিয়াগুলি ফর্ম্যাট করা হয়েছে, বিকাশকারীদের বাহ্যিক সরঞ্জামগুলির উপর নির্ভর করার প্রয়োজনীয়তা দূর করে৷ এই পুনঃডিজাইন একটি সহজ এবং অত্যন্ত পঠনযোগ্য উপস্থাপনা প্রদান করে।

JSON একটি দীর্ঘ স্ট্রিং হিসাবে প্রদর্শিত, দেখার জন্য স্ক্রলিং প্রয়োজন।
আগে: LD+JSON প্রতিক্রিয়া সুন্দরভাবে মুদ্রিত ছিল না।
পড়া সহজ করতে JSON ফরম্যাট করা হয়েছে।
পরে: LD+JSON প্রতিক্রিয়া বেশ মুদ্রিত।

সম্প্রদায় থেকে ইতিবাচক প্রতিক্রিয়া

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

"ওহ, এটা পরিষ্কার! ChromeDevTools এইমাত্র মানুষের-পাঠযোগ্য HTTP স্ট্যাটাস কোডগুলি দেখিয়ে তার গেমের গতি বাড়িয়েছে, যা একটি নেটওয়ার্ক অনুরোধের সাথে কী ভুল হয়েছে তা দেখা সহজ করে তুলেছে।"- TribalIdeas on X

"এটি ইদানীং খুব সহায়ক হয়েছে। বিশেষ করে অ্যাড ব্লকার এবং ব্যাকরণ এক্সটেনশনগুলির সাথে ফর্মগুলি নিয়ে কাজ করা।"- MrAhmadAwais on X

এই নতুন বৈশিষ্ট্যগুলি অন্বেষণ করতে প্রস্তুত? Chrome DevTools-এ যান এবং নিজের জন্য উন্নত নেটওয়ার্ক প্যানেলের অভিজ্ঞতা নিন। শুভ ডিবাগিং!

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

পোস্টের নতুন বৈশিষ্ট্য এবং পরিবর্তনগুলি বা DevTools সম্পর্কিত অন্য কিছু নিয়ে আলোচনা করতে নিম্নলিখিত বিকল্পগুলি ব্যবহার করুন৷

  • crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
  • আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুনআরও > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
  • @ChromeDevTools- এ টুইট করুন।
  • আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷