DevTools, Chrome 127-এ নতুন কী রয়েছে৷

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

অ্যাঙ্কর পজিশনিং বৈশিষ্ট্যটি সহজে ডিবাগ করতে সাহায্য করার জন্য, স্টাইলস ট্যাব এখন স্পষ্ট অ্যাঙ্কর শনাক্তকারী এবং অন্তর্নিহিত অ্যাঙ্করগুলিকে তাদের নোডের সাথে লিঙ্ক করে।

স্পষ্ট এবং অন্তর্নিহিত অ্যাঙ্করগুলিকে লিঙ্ক করার আগে এবং পরে।

অতিরিক্তভাবে, popovertarget অ্যাট্রিবিউটের মান এখন DOM-এ তার popover উপাদানের সাথে লিঙ্ক করে।

popovertarget এর পপওভার এলিমেন্টের সাথে লিঙ্ক করার আগে এবং পরে।

সোর্স প্যানেলের উন্নতি

এই সংস্করণটি সোর্স প্যানেলে বেশ কিছু উন্নতি এনেছে।

উন্নত 'এখানে কখনও বিরতি দেবেন না'

'এখানে কখনও বিরতি দেবেন না' বিকল্পটি আপনাকে ডিবাগারকে একই লাইনে বারবার বিরতি দেওয়া থেকে বিরত রাখতে সাহায্য করে। এটি বারবার ফায়ার হওয়া অপ্রাসঙ্গিক ব্রেকপয়েন্টগুলির সাথে কাজ করা সহজ করে তোলে। এই সংস্করণটি এই ক্ষমতা বৃদ্ধি করে এবং এটি এখন নিম্নলিখিতগুলির জন্য কাজ করে:

  • বিল্ট-ইন ফাংশন থেকে ব্যতিক্রম বা প্রতিশ্রুতি প্রত্যাখ্যান।
  • DOM, fetch/XHR, এবং CSP লঙ্ঘন ব্রেকপয়েন্ট "বাতিল" করা হচ্ছে।
  • ওয়াসম ডিসঅ্যাসেম্বলিতে।

কার্যপ্রণালীটি দেখুন:

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

নতুন স্ক্রোল স্ন্যাপ ইভেন্ট লিসেনার্স

Sources > Event Listener Breakpoints > Control list দুটি scroll-snap- related listener পায়: scrollsnapchange এবং scrollsnapchanging । এই ইভেন্টগুলি তখন কার্যকর হয় যখন আপনি স্ক্রোল কন্টেইনারটি এমনভাবে স্ক্রোল করেন যার ফলে এটি একটি নতুন এলিমেন্টে স্ন্যাপ করে।

স্ক্রোল-স্ন্যাপ-সম্পর্কিত ইভেন্ট লিসেনারের আগে এবং পরে যোগ করা।

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

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

এই সংস্করণটি নেটওয়ার্ক প্যানেলে বেশ কিছু উন্নতি এনেছে।

নেটওয়ার্ক থ্রটলিং প্রিসেট আপডেট করা হয়েছে

নেটওয়ার্ক প্যানেলে থ্রটলিং প্রিসেট আপডেট করা হয়েছে: নতুন ফাস্ট 4G , ফাস্ট 3G এর নাম পরিবর্তন করে স্লো 4G এবং স্লো 3G এর নাম পরিবর্তন করে 3G করা হয়েছে। এটি লাইটহাউসের প্রিসেটের সাথে আরও ভালোভাবে সামঞ্জস্যপূর্ণ।

নেটওয়ার্ক থ্রটলিং প্রিসেট আপডেট করার আগে এবং পরে।

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

HAR ফর্ম্যাটের কাস্টম ক্ষেত্রে পরিষেবা কর্মীর তথ্য

নেটওয়ার্ক লগটি HAR ফর্ম্যাটে এক্সপোর্ট করার সময়, আপনি এখন পরিষেবা কর্মীদের সাথে সম্পর্কিত তথ্য, সময় সহ, কাস্টম ক্ষেত্র হিসাবে দেখতে পাবেন (আন্ডারস্কোর দ্বারা প্রিফিক্স করা)। উদাহরণস্বরূপ, আপনি লগে নিম্নলিখিত নতুন ক্ষেত্রগুলি খুঁজে পেতে পারেন:

...
"response": {
  ...
  "_fetchedViaServiceWorker": true,
  "_responseCacheStorageCacheName": "V1",
  "_serviceWorkerResponseSource": "cache-storage"
}
...
"timings": {
  ...
  "_workerStart": -1,
  "_workerReady": -1,
  "_workerFetchStart": -1,
  "_workerRespondWithSettled": -1
}
...

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

পারফর্মেন্স প্যানেলে WebSocket ইভেন্টগুলি পাঠান এবং গ্রহণ করুন

অন্যান্য WebSocket ইভেন্টের মতো, পারফরম্যান্স প্যানেল এখন Send WebSocket Message এবং Receive WebSocket Message ইভেন্টগুলি ক্যাপচার করে এবং সেগুলিকে পারফরম্যান্স ট্রেসে দেখায়। উদাহরণস্বরূপ:

'ওয়েবসকেট বার্তা গ্রহণ করুন' ইভেন্টটি পারফরম্যান্স ট্রেসে ধারণ করা হয়েছে।

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

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

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

  • অ্যাক্সেসিবিলিটি : স্ক্রিন রিডাররা এখন লগ স্ক্রোল করার সময় কনসোলে বার্তার বিষয়বস্তু ঘোষণা করে উপরে এবং নীচের তীর কী ( 344484979 ) ব্যবহার করে।
  • সূত্র :
    • পৃষ্ঠা : " সেভ অ্যাজ" মেনু বিকল্পটি এখন Wasm মডিউল ফাইলগুলিকে Base64 টেক্সট ( 40784130 ) এর পরিবর্তে বৈধ wasm বাইনারি হিসেবে সংরক্ষণ করে।
    • কল স্ট্যাক : অ্যাসিঙ্ক কল ফ্রেমের বর্ণনা থেকে (async) প্রত্যয়টি সরিয়ে ফেলা হয়েছে, তাদের হাইলাইটটি ইটালিক থেকে বোল্ড ( 343750870 ) এ পরিবর্তন করা হয়েছে।
  • মেমোরি : হিপ স্ন্যাপশট সারাংশ ( 340200025 ) থেকে অপ্রয়োজনীয় শূন্য-আকারের InternalNodes সরানো হয়েছে।
  • নেটওয়ার্ক : এমন একটি বাগ সংশোধন করা হয়েছে যা সবেমাত্র শুরু হওয়া কিন্তু এখনও কোনও responseReceived প্রাপ্ত হয়নি এমন অনুরোধগুলির জন্য প্রতিক্রিয়া সামগ্রীর স্ট্রিমিং প্রিভিউ প্রতিরোধ করে ( 338340752 )।
  • কর্মক্ষমতা :
    • নির্বাচক পরিসংখ্যান : %-of-Slow-Path-Non-Matches কলামের জন্য একটি ব্যাখ্যামূলক টুলটিপ যোগ করা হয়েছে ( 324282954 )।
    • ট্র্যাক কনফিগারেশন মোড : ট্র্যাক কনফিগারেশন শেষ করুন বোতামটি নীচের ডানদিকে ( 345256274 ) সরানো হয়েছে।
  • কনসোল : ব্যাক/ফরওয়ার্ড-ক্যাশে ( 40894153 ) ব্যবহার করে নেভিগেট করার সময় একাধিক অভিন্ন কনসোল বার্তা দেখানোর একটি বাগ সংশোধন করা হয়েছে।
  • সেটিংস : সকল ট্যাবের পাশে সহায়ক আইকন যোগ করা হয়েছে।

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

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

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

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

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

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