DevTools এ নতুন কি আছে (Chrome 117)

সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova
GitHub

নেটওয়ার্ক প্যানেলের উন্নতি

স্থানীয়ভাবে আরও দ্রুত ওয়েব কন্টেন্ট ওভাররাইড করুন

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

ওয়েব সামগ্রী ওভাররাইড করতে, নেটওয়ার্ক প্যানেল খুলুন, একটি অনুরোধে ডান-ক্লিক করুন এবং ওভাররাইড সামগ্রী নির্বাচন করুন।

একটি অনুরোধের ড্রপ-ডাউন মেনুতে ওভাররাইড বিকল্পগুলি।

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

একটি ফোল্ডার নির্বাচন করুন এবং শীর্ষে অ্যাকশন বারে এটিতে অ্যাক্সেসের অনুমতি দিন।

ওভাররাইডগুলি সেট আপ হয়ে গেলে, DevTools তারপরে আপনাকে সোর্স > ওভাররাইড > এডিটরে নিয়ে যায় যাতে আপনি ওয়েব কন্টেন্ট ওভাররাইড করতে পারেন।

নোট করুন যে ওভাররাইড করা সংস্থানগুলি এর সাথে নির্দেশিত হয় সংরক্ষিত নেটওয়ার্ক প্যানেলে। কী ওভাররাইড করা হয়েছে তা দেখতে আইকনের উপর হোভার করুন।

নেটওয়ার্ক প্যানেলে একটি অনুরোধের পাশে একটি ওভাররাইড আইকন৷

ক্রোমিয়াম সমস্যা: 1465785 , 1470532 , 1469359 ।

XHR এর বিষয়বস্তু ওভাররাইড করুন এবং অনুরোধ আনুন

আপনি এখন XHR-এর বিষয়বস্তু ওভাররাইড করতে পারেন এবং তাদের প্রতিক্রিয়া শিরোনাম ছাড়াও অনুরোধ আনতে পারেন। এই ধরনের ওভাররাইডের সাথে, আপনি আপনার ওয়েব পৃষ্ঠা ডিবাগ করার জন্য API প্রতিক্রিয়াগুলিকে উপহাস করতে পারেন এমনকি যদি আপনার ব্যাকএন্ড এবং API এখনও প্রস্তুত না হয়।

DevTools বর্তমানে নিম্নলিখিত ধরনের অনুরোধের জন্য কন্টেন্ট ওভাররাইড সমর্থন করে: ছবি (উদাহরণস্বরূপ, avif, png), ফন্ট, ফেচ এবং XHR, স্ক্রিপ্ট (css এবং js), এবং নথি (html)। DevTools এখন অসমর্থিত প্রকারের জন্য ওভাররাইড সামগ্রী বিকল্পটিকে ধূসর করে দিয়েছে।

ক্রোমিয়াম সমস্যা: 792101 , 1469776 ।

Chrome এক্সটেনশন অনুরোধ লুকান

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

chrome-extension:// URL-এ পাঠানো সমস্ত অনুরোধ ফিল্টার করতে, চেক করুন চেকবক্স। এক্সটেনশন URL লুকান ।

অনুরোধ টেবিল থেকে লুকানো এক্সটেনশন URLs.

ক্রোমিয়াম সমস্যা: 1257885 , 1458803 ।

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড

অনুরোধের হেডারে স্ট্যাটাস কোডটি এখন HTTP স্ট্যাটাস কোডের পাশে মানব-পঠনযোগ্য পাঠ্য দেখায়, যাতে আপনি দ্রুত অনুরোধটির কী ঘটেছে তা বুঝতে পারেন।

মানব-পাঠযোগ্য HTTP স্ট্যাটাস কোড প্রদর্শনের আগে এবং পরে।

একই টেক্সট দেখতে আপনি অনুরোধ টেবিলের স্ট্যাটাস কোডের উপরেও ঘুরতে পারেন।

ক্রোমিয়াম সমস্যা: 1153956 ।

JSON সাবটাইপের জন্য প্রিটি-প্রিন্ট প্রতিক্রিয়া

একটি application/[subtype]+json MIME সাবটাইপ (উদাহরণস্বরূপ, ld+json , hal+json , এবং অন্যান্য) সহ একটি অনুরোধের প্রতিক্রিয়া ট্যাবটি এখন প্রতিক্রিয়াটিকে সঠিকভাবে পার্স করে এবং আপনাকে এটিকে সুন্দর করতে দেয়।

নেটওয়ার্ক প্রতিক্রিয়া পূর্বরূপ একটি অ্যাপ্লিকেশন/json সাবটাইপ পার্স করার আগে এবং পরে।

ক্রোমিয়াম সমস্যা: 406900

কর্মক্ষমতা: নেটওয়ার্ক ইভেন্টের জন্য অগ্রাধিকার আনার পরিবর্তনগুলি দেখুন৷

পারফরম্যান্স প্যানেল এখন নেটওয়ার্ক ট্র্যাকের একটি ইভেন্টের সারাংশে দুটি অগ্রাধিকার ক্ষেত্র দেখায়: প্রাথমিক অগ্রাধিকার এবং (চূড়ান্ত) অগ্রাধিকার , শুধুমাত্র singe Priority এর পরিবর্তে। এই অতিরিক্ত ক্ষেত্রের সাহায্যে আপনি এখন দেখতে পারেন যে ইভেন্টের আনার অগ্রাধিকার পরিবর্তন হয় এবং ডাউনলোডের ক্রম পরিবর্তন হয়। আরও তথ্যের জন্য, ফেচ অগ্রাধিকার API এর সাথে সম্পদ লোডিং অপ্টিমাইজ করা দেখুন।

আনার অগ্রাধিকারে পরিবর্তনগুলি প্রদর্শনের আগে এবং পরে।

উপরন্তু, আপনি নেটওয়ার্ক প্যানেলের অগ্রাধিকার কলামে, এর সাথে একই তথ্য পেতে পারেন চেকবক্স। বড় অনুরোধ সারি সেটিং সক্রিয়.

নেটওয়ার্ক প্যানেলে অগ্রাধিকার কলাম।

ক্রোমিয়াম সমস্যা: 1463901 , 1380964 ।

উৎস সেটিংস ডিফল্টরূপে সক্রিয়: কোড ভাঁজ এবং স্বয়ংক্রিয় ফাইল প্রকাশ

দ সেটিংস। সেটিংস > পছন্দ > চেকবক্স। কোড ভাঁজ করার বিকল্পটি এখন ডিফল্টরূপে সক্রিয় করা আছে। এই বিকল্পটি আপনাকে কোড ব্লকগুলি ভাঁজ করতে দেয়।

একটি কোড ব্লক ভাঁজ করতে, ব্লকের শুরুর পাশের লাইন নম্বরের উপর হোভার করুন এবং ক্লিক করুন সঙ্কুচিত। সঙ্কুচিত আইকন। ব্লকটি আবার প্রসারিত করতে {...} এ ক্লিক করুন।

তাছাড়া, দ সেটিংস। সেটিংস > পছন্দ > চেকবক্স। সাইডবারে ফাইলগুলি স্বয়ংক্রিয়ভাবে প্রকাশ করাও এখন ডিফল্টরূপে সক্ষম।

এই সেটিংটি উত্স > পৃষ্ঠাতে ফাইল ট্রি করে তোলে যখন আপনি ট্যাবগুলি পরিবর্তন করেন তখন সম্পাদকে খোলা বর্তমান ফাইলটি নির্বাচন করুন৷

ক্রোমিয়াম সমস্যা: 1459193 , 1336599 ।

তৃতীয় পক্ষের কুকি সমস্যার উন্নত ডিবাগিং

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

তৃতীয় পক্ষের কুকি ফেজআউটের পরে Chrome কীভাবে আচরণ করে তা আপনি ইতিমধ্যেই পরীক্ষা করতে পারেন৷ এটি করার জন্য, কমান্ড লাইন থেকে ক্রোম চালান --test-third-party-cookies-phaseout পতাকা। এই পতাকাটি কী করে তা জানতে, ডিবাগিং কুকিজ দেখুন।

আপনি ক্রোম (পতাকা সহ বা ছাড়া) যেভাবেই চালান না কেন, সমস্যা ট্যাবে এখন রয়েছে চেকবক্স। সমস্ত নতুন Chrome ব্যবহারকারীদের জন্য ডিফল্টরূপে সক্রিয় তৃতীয় পক্ষের কুকি সমস্যা চেকবক্স অন্তর্ভুক্ত করুন এবং ফলস্বরূপ, প্রতিবেদনগুলি:

  • আসন্ন ফেজআউট সম্পর্কে একটি ব্রেকিং পরিবর্তন সতর্কতা।
  • তৃতীয় পক্ষের কুকিজ সম্পর্কিত সমস্যা।

একটি বিদ্যমান Chrome ব্যবহারকারী হিসাবে আসন্ন ফেজআউট সম্পর্কে কুকি সতর্কতা দেখতে চাইলে, এই চেকবক্সটি চেক করতে ভুলবেন না।

এটি পরীক্ষা করতে, এই ডেমো পৃষ্ঠায় কুকি পরীক্ষা করুন।

থার্ড-পার্টি কুকি সংক্রান্ত সমস্যা সমস্যা ট্যাবে রিপোর্ট করা হয়েছে।

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

চেকবক্স সক্রিয় করা হয়েছে এবং শুধুমাত্র অবরুদ্ধ প্রতিক্রিয়া কুকি সহ অনুরোধগুলি দেখায়৷

ক্রোমিয়াম সমস্যা: 1458839 , 1462693 , 1466310 ।

অ্যাপ্লিকেশন প্যানেলে ডিবাগ প্রিলোডিং

Chrome টিম ভবিষ্যতের পৃষ্ঠাগুলির সম্পূর্ণ প্রিরেন্ডারিং ফিরিয়ে আনছে যা একজন ব্যবহারকারী নেভিগেট করতে পারে৷ আপনাকে এটি ডিবাগ করতে দেওয়ার জন্য, DevTools অ্যাপ্লিকেশন প্যানেলে প্রিলোডিং বিভাগ যোগ করে। নতুন প্রিফেচিং এবং প্রিরেন্ডারিং (একত্রে "নেভিগেশনাল প্রিলোডিং" নামে পরিচিত) লিঙ্ক-ভিত্তিক রিসোর্স ইঙ্গিতগুলির পরিবর্তে স্পেকুলেশন রুলস API ব্যবহার করে।

এই ডেমো পৃষ্ঠায় , অ্যাপ্লিকেশন > প্রিলোডিং বিভাগে, আপনি পরিদর্শন করতে পারেন:

  • স্পেকুলেশন নিয়ম যা বর্তমান পৃষ্ঠায় পাওয়া সমস্ত নিয়ম সেট তালিকাভুক্ত করে।
  • প্রিলোড যা নিয়ম সেট থেকে সমস্ত প্রিফেচ করা এবং প্রি-রেন্ডার করা ইউআরএল তালিকাভুক্ত করে।
  • এই পৃষ্ঠাটি যা বর্তমান পৃষ্ঠার পূর্ব-প্রস্তুত অবস্থা তালিকাভুক্ত করে।

আরও তথ্যের জন্য, ডিবাগিং স্পেকুলেশন নিয়মের উপর নিবেদিত পোস্ট পড়ুন।

ক্রোমিয়াম সমস্যা: 1410709 ।

নতুন রং

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে DevTools-এর এখন একটি রিফ্রেশ চেহারা রয়েছে যা Chrome-এর সাথে আরও ভালভাবে সারিবদ্ধ। একটি অবদানকারী ফ্যাক্টর হল নতুন রঙের স্কিম।

নতুন রং লাগানোর আগে ও পরে।

এই সংস্করণটি (117) DevTools-এ আরও UX উন্নতি এনেছে, যা ইতিমধ্যেই উল্লেখ করা হয়েছে এবং আরও তালিকাভুক্ত করা হয়েছে, যার মধ্যে বেশ কয়েকটি উন্নত UI পাঠ্য রয়েছে।

ক্রোমিয়াম সমস্যা: 1456677 ।

বাতিঘর 10.4.0

Lighthouse প্যানেল এখন Lighthouse 10.4.0 চালায়। সবচেয়ে উল্লেখযোগ্যভাবে, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যোগ করে:

যেমন:

লিঙ্কের রঙে চেক করতে ব্যর্থ হয়েছে যা তাদের আলাদা করা যায় না।

পরিবর্তনের সম্পূর্ণ তালিকাও দেখুন। DevTools-এ Lighthouse প্যানেল ব্যবহার করার প্রাথমিক বিষয়গুলি জানতে, Lighthouse দেখুন: ওয়েবসাইটের গতি অপ্টিমাইজ করুন ।

ক্রোমিয়াম সমস্যা: 772558 ।

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশন এখন ওপেন সোর্স

DevTools-এর জন্য C/C++ WebAssembly ডিবাগিং এক্সটেনশনটি এখন ওপেন সোর্স এবং DevTools ফ্রন্টএন্ড রিপোজিটরিতে থাকে। এই এক্সটেনশনটি WebAssembly-এ কম্পাইল করা C++ প্রোগ্রামগুলির জন্য DevTools-এ ডিবাগিং ক্ষমতা সক্ষম করে। আরও তথ্যের জন্য, ডিবাগ C/C++ WebAssembly দেখুন।

কীভাবে এক্সটেনশন তৈরি, চালাতে এবং পরীক্ষা করতে হয় তা শিখুন এবং নির্দ্বিধায় অবদান রাখুন ৷

ক্রোমিয়াম সমস্যা: 1410709 ।

বিবিধ হাইলাইট

এই রিলিজে কিছু উল্লেখযোগ্য সংশোধন এবং উন্নতি হল:

নতুন পরীক্ষামূলক বৈশিষ্ট্য

নতুন রেন্ডারিং এমুলেশন: prefers-reduced-transparency

আপনার ওয়েবসাইট ব্যবহারকারীরা স্বচ্ছ প্রভাব কমাতে তাদের পছন্দ নির্দেশ করতে তাদের ডিভাইসে নতুন পরীক্ষামূলক prefers-reduced-transparency CSS মিডিয়া বৈশিষ্ট্য সক্রিয় করা শুরু করতে পারে। আপনি আপনার ওয়েবসাইটের অ্যাক্সেসিবিলিটি বাড়ানোর জন্য এই অগ্রাধিকারটি বিবেচনা করতে পারেন। আপনাকে সাহায্য করার জন্য, রেন্ডারিং ড্রয়ার ট্যাবটি এখন prefers-reduced-transparency: reduce , যাতে আপনি একটি সমাধান প্রোটোটাইপ করতে পারেন এবং এই ক্ষেত্রে আপনার ওয়েবসাইট কীভাবে আচরণ করে তা পরীক্ষা করতে পারেন।

Chrome-এ এই বৈশিষ্ট্যটি পরীক্ষা করতে, chrome://flags এ পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন৷

ক্রোমিয়াম সমস্যা: 1424879 ।

উন্নত প্রোটোকল মনিটর

Chrome DevTools Chrome ব্রাউজারগুলিকে ইন্সট্রুমেন্ট, পরিদর্শন, ডিবাগ এবং প্রোফাইল করার জন্য Chrome DevTools প্রোটোকল (CDP) ব্যবহার করে। আপনি যদি একজন Chromium বা DevTools ডেভেলপার হন, তাহলে প্রোটোকল মনিটর আপনাকে DevTools দ্বারা করা সমস্ত CDP অনুরোধ এবং প্রতিক্রিয়া দেখতে এবং CDP কমান্ড পাঠানোর উপায় প্রদান করে।

প্রোটোকল মনিটর একটি নতুন ইন্টারফেস পায় যা আপনাকে সহজে CDP কমান্ড তৈরি এবং পাঠাতে দেয়। এখন আপনাকে ডকুমেন্টেশনে কমান্ড এবং তাদের প্যারামিটারগুলি সন্ধান করতে হবে না, DevTools আপনাকে সেগুলি সুপারিশ করবে৷

প্রোটোকল মনিটর ড্রয়ার ট্যাবের নীচের ডানদিকে, ক্লিক করুন বাম প্যানেল খোলা। CDP কমান্ড এডিটর দেখান , একটি লক্ষ্য নির্বাচন করুন, একটি কমান্ড টাইপ করা শুরু করুন, প্রস্তাবিত একটি নির্বাচন করুন, যদি প্রয়োজন হয়, প্যারামিটার মান নির্দিষ্ট করুন এবং ক্লিক করুন পাঠান। কমান্ড পাঠান ( Ctrl/Cmd + এন্টার )।

একটি CDP কমান্ড নির্দিষ্ট করা এবং পাঠানো।

ক্রোমিয়াম সমস্যা: 1469345 ।

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

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

Chrome DevTools টিমের সাথে যোগাযোগ করুন

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

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

DevTools-এ নতুন কি আছে

DevTools সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।