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

Sofia Emelianova

এলিমেন্টস প্যানেলে CSS অ্যাঙ্কর পজিশনিং পরিদর্শন করুন

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

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

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

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

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

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

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

কর্মে কর্মপ্রবাহ দেখুন:

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

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

সূত্র > ইভেন্ট লিসেনার ব্রেকপয়েন্ট > কন্ট্রোল লিস্ট দুটি স্ক্রোল-স্ন্যাপ -সম্পর্কিত শ্রোতা পায়: 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 ইভেন্টের মতো, পারফরম্যান্স প্যানেল এখন WebSocket মেসেজ পাঠান এবং WebSocket মেসেজ ইভেন্ট গ্রহণ করে এবং পারফরম্যান্স ট্রেসে সেগুলি দেখায়। যেমন:

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

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

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

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

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

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

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

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

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

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

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