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

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

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

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

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

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

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

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

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

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

  • বিল্ট-ইন ফাংশন থেকে ব্যতিক্রম বা প্রতিশ্রুতি প্রত্যাখ্যান।
  • 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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

,

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

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

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

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

পপোভার্টারেটকে তার পপওভার উপাদানটির সাথে সংযুক্ত করার আগে এবং পরে।

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

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

বর্ধিত 'এখানে কখনও বিরতি নেই'

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

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

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

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

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

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

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

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

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

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

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

নেটওয়ার্ক প্যানেলটি আপডেট হওয়া থ্রোটলিং প্রিসেটগুলি পেয়েছে: নতুন ফাস্ট 4 জি , দ্রুত 3 জি ধীরে ধীরে 4 জি থেকে নামকরণ করা হয়েছে এবং 3 জি এর নামকরণ করা হয়েছে 3 জি । এটি আরও ভাল বাতিঘরগুলির প্রিসেটগুলির সাথে একত্রিত হয়।

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

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

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

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

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

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

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

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

পারফরম্যান্স ট্রেসে ক্যাপচার করা 'ওয়েবসকেট বার্তা' ইভেন্টটি।

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

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

এগুলি এই রিলিজের কিছু লক্ষণীয় সমাধান এবং উন্নতি:

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

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

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করুন

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

ডিভটুলসে নতুন কি

ডিভটুলস সিরিজে নতুন কী রয়েছে তাতে আচ্ছাদিত সমস্ত কিছুর একটি তালিকা।