DevTools, Chrome 127-এ নতুন কী আছে

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

এছাড়াও, popovertarget অ্যাট্রিবিউট ভ্যালু এখন DOM-এ তার popover এলিমেন্টের সাথে লিঙ্ক করে।

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

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

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

উন্নত 'এখানে কখনও পজ করবেন না'

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

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

ওয়ার্কফ্লো কীভাবে কাজ করে তা দেখুন:

Chromium সংক্রান্ত সমস্যা: 40924349।

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

সোর্স > ইভেন্ট লিসেনার ব্রেকপয়েন্ট > কন্ট্রোল তালিকায় দুটি স্ক্রল-স্ন্যাপ-সম্পর্কিত লিসেনার যোগ করা হয়েছে: scrollsnapchange এবং scrollsnapchanging। আপনি যখন স্ক্রল কন্টেনারটি এমনভাবে স্ক্রল করেন যাতে এটি একটি নতুন এলিমেন্টে স্ন্যাপ করে, তখন এই ইভেন্টগুলি ট্রিগার হয়।

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

Chromium সংক্রান্ত সমস্যা: 40286359।

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

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

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

নেটওয়ার্ক প্যানেল আপডেট করা থ্রটলিং প্রিসেট পায়: নতুন দ্রুত 4G, দ্রুত 3G-এর নাম পরিবর্তন করে স্লো 4G এবং স্লো 3G-এর নাম পরিবর্তন করে 3G করা হয়েছে। এটি Lighthouse-এর প্রিসেট-এর সাথে আরও ভালোভাবে মানানসই।

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

Chromium সংক্রান্ত সমস্যা: 342406608।

HAR ফর্ম্যাটের কাস্টম ফিল্ডে সার্ভিস ওয়ার্কার সংক্রান্ত তথ্য

HAR ফর্ম্যাটে নেটওয়ার্ক লগ এক্সপোর্ট করার সময়, আপনি এখন কাস্টম ফিল্ড (আন্ডারস্কোর দিয়ে শুরু) হিসেবে সময় সহ সার্ভিস ওয়ার্কার সম্পর্কিত তথ্য দেখতে পাবেন। যেমন, আপনি লগে নিম্নলিখিত নতুন ফিল্ড দেখতে পেতে পারেন:

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

Chromium সংক্রান্ত সমস্যা: 342406608।

পারফর্ম্যান্স প্যানেলে WebSocket ইভেন্ট পাঠান ও রিসিভ করুন

অন্যান্য WebSocket ইভেন্টের মতো, পারফর্ম্যান্স প্যানেল এখন WebSocket মেসেজ পাঠান এবং WebSocket মেসেজ পান ইভেন্ট ক্যাপচার করে এবং পারফর্ম্যান্স ট্রেসে সেগুলি দেখায়। যেমন:

পারফর্ম্যান্স ট্রেসে 'WebSocket মেসেজ রিসিভ করুন' ইভেন্ট ক্যাপচার করা হয়েছে।

Chromium সংক্রান্ত সমস্যা: 40286129।

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

এই রিলিজে কিছু উল্লেখযোগ্য সমস্যার সমাধান ও উন্নতি করা হয়েছে:

  • অ্যাক্সেসিবিলিটি: স্ক্রিন রিডার এখন Console-এ মেসেজের কন্টেন্ট ঘোষণা করে যখন উপরের ও নিচের তীরচিহ্ন কী (৩৪৪৪৮৪৯৭৯) ব্যবহার করে লগ স্ক্রল করা হয়।
  • সোর্স:
    • পৃষ্ঠা: এই ফর্ম্যাটে সেভ করুন মেনু বিকল্প এখন Base64 টেক্সটের (৪০৭৮৪১৩০) পরিবর্তে Wasm মডিউল ফাইলকে সঠিক wasm বাইনারি হিসেবে সেভ করে।
    • কল স্ট্যাক: Async কল ফ্রেমের বিবরণ থেকে (async) সাফিক্স সরিয়ে দেওয়া হয়েছে, সেগুলির হাইলাইট ইটালিক থেকে বোল্ডে পরিবর্তন করা হয়েছে (343750870)।
  • মেমরি: হিপ স্ন্যাপশট সারসংক্ষেপ (340200025) থেকে অপ্রয়োজনীয় শূন্য-সাইজের InternalNodes সরানো হয়েছে।
  • নেটওয়ার্ক: এমন একটি সমস্যার সমাধান করা হয়েছে যার ফলে সবে শুরু হওয়া কিন্তু এখনও responseReceived ইভেন্ট পায়নি (338340752) এমন অনুরোধের জন্য স্ট্রিমিং রেসপন্স কন্টেন্টের প্রিভিউ দেখা যাচ্ছিল না।
  • পারফর্ম্যান্স:
    • সিলেক্টর পরিসংখ্যান: %-of-Slow-Path-Non-Matches কলামের জন্য একটি ব্যাখ্যামূলক টুলটিপ যোগ করা হয়েছে (৩২৪২৮২৯৫৪)।
    • ট্র্যাক কনফিগারেশন মোড: ট্র্যাক কনফিগার করা সম্পূর্ণ করুন বোতামটি নিচের ডানদিকে সরানো হয়েছে (৩৪৫২৫৬২৭৪)।
  • কনসোল: ব্যাক/ফরওয়ার্ড-ক্যাশে (40894153) ব্যবহার করে নেভিগেট করার সময় একাধিক একই ধরনের কনসোল মেসেজ দেখানোর সমস্যা সমাধান করা হয়েছে।
  • সেটিংস: সব ট্যাবের পাশে হেল্পার আইকন যোগ করা হয়েছে।

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

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

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

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

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

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