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

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

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

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

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

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

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

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

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

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

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

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

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

XHR এর কন্টেন্ট ওভাররাইড করুন এবং অনুরোধগুলি আনুন

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

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

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

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

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

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

অনুরোধের টেবিল থেকে লুকানো এক্সটেনশন URL গুলি।

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

মানুষের পঠনযোগ্য HTTP স্ট্যাটাস কোড

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

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

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

ক্রোমিয়াম সমস্যা: ১১৫৩৯৫৬ ।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

এই সেটিংটি ট্যাব পরিবর্তন করার সময় Sources > Page- এর ফাইল ট্রিকে Editor- এ খোলা বর্তমান ফাইলটি নির্বাচন করতে সাহায্য করে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

নতুন রঙ

আপনি হয়তো ইতিমধ্যেই লক্ষ্য করেছেন যে DevTools এখন একটি নতুন চেহারা পেয়েছে যা Chrome এর সাথে আরও ভালোভাবে মানানসই। এর একটি গুরুত্বপূর্ণ কারণ হল নতুন রঙের স্কিম।

নতুন রঙ প্রয়োগের আগে এবং পরে।

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

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

বাতিঘর ১০.৪.০

লাইটহাউস প্যানেলটি এখন লাইটহাউস ১০.৪.০ চালায়। সবচেয়ে উল্লেখযোগ্য বিষয় হল, এই সংস্করণটি নিম্নলিখিতগুলির জন্য নতুন অ্যাক্সেসিবিলিটি অডিট যুক্ত করে:

উদাহরণস্বরূপ:

লিঙ্কগুলির রঙ পরীক্ষা করতে ব্যর্থ হয়েছি যার কারণে তাদের আলাদা করা যায় না।

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

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

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

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

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

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

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

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

  • CSS নেস্টিং : এলিমেন্টস প্যানেল এখন নেস্টেড শিশুদের জন্য সম্পূর্ণ নির্বাচক শৃঙ্খল দেখায় ( 1172985 )।
  • অ্যাপ্লিকেশন > ম্যানিফেস্টে এখন একটি উইন্ডো কন্ট্রোলস ওভারলে বিভাগ রয়েছে যা ম্যানিফেস্টে একটি display_override মান উপস্থিত আছে কিনা তা পরীক্ষা করে এবং প্রাসঙ্গিক ডকুমেন্টেশনের লিঙ্ক সরবরাহ করে।
  • Sources > Page tree এখন নিম্নলিখিত কাজ করে, যার মধ্যে রয়েছে কিন্তু সীমাবদ্ধ নয় ( 1442863 ):
    • যদি ফোল্ডারগুলির সমস্ত বিষয়বস্তু উপেক্ষা-তালিকাভুক্ত থাকে তবে তা ধূসর করে দেয়।
    • যদি ফোল্ডারগুলির সমস্ত বিষয়বস্তু একটি সোর্স ম্যাপ থেকে থাকে তবে ফোল্ডারগুলিকে কমলা রঙে রঙ করুন।
  • পারফরম্যান্স : রেকর্ডিং শুরু করার সময় ক্যাপচার সেটিংস এখন স্বয়ংক্রিয়ভাবে লুকিয়ে যায় ( 1455498 )।
  • সূত্র > সম্পাদক Ctrl + Arrow আচরণ (Win) এবং Opt + Arrow (MacOs) ( 1468208 ) পুনরুদ্ধার করেছেন।
  • অ্যানিমেশন > পজ অল টগল এখন পৃষ্ঠা লোড জুড়ে তার অবস্থা বজায় রাখে ( 1446046 )।
  • অ্যাপ্লিকেশন > স্টোরেজ > ক্যাশে স্টোরেজ অ্যাপ্লিকেশন > স্টোরেজ > ক্যাশে বিভাগে ( 1462622 ) সরানো হয়েছে।
  • কিছু UI টেক্সট এবং টুলটিপ উন্নত করা হয়েছে: হার্ডওয়্যার কনকারেন্সি টুলটিপ , নেটওয়ার্ক ফিল্টার টেক্সট এবং একটি প্রধান মেনু বিকল্প , অ্যাপ্লিকেশন ট্রি ভিউতে ক্যাপিটালাইজেশন, নেটওয়ার্ক > হেডার টেক্সট , সোর্স > ওভাররাইড এবং ফাইল সিস্টেম টেক্সট ।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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