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

Jecelyn Yeen

রেকর্ডারে ধাপে ধাপে রিপ্লে

আপনি এখন একটি ব্রেকপয়েন্ট সেট করতে পারেন এবং রেকর্ডার প্যানেলে ধাপে ধাপে ব্যবহারকারীর প্রবাহ পুনরায় চালাতে পারেন।

একটি ব্রেকপয়েন্ট সেট করতে, একটি ধাপের পাশে নীল বিন্দুতে ক্লিক করুন। আপনার ব্যবহারকারীর প্রবাহ পুনরায় চালান, পদক্ষেপটি কার্যকর করার আগে রিপ্লে বিরতি দেবে। এখান থেকে, আপনি রিপ্লে চালিয়ে যেতে পারেন, একটি ধাপ চালাতে পারেন বা রিপ্লে বাতিল করতে পারেন।

এই বৈশিষ্ট্যটির সাহায্যে, আপনি সহজেই আপনার ব্যবহারকারীর প্রবাহকে সম্পূর্ণরূপে কল্পনা এবং ডিবাগ করতে পারেন।

আরও তথ্যের জন্য রেকর্ডার বৈশিষ্ট্যের রেফারেন্স দেখুন।

ক্রোমিয়াম সমস্যা: 1257499

রেকর্ডার প্যানেলে ইভেন্টের উপর মাউস সমর্থন করুন

রেকর্ডার এখন একটি রেকর্ডিংয়ে ম্যানুয়ালি একটি মাউস ওভার (হোভার) পদক্ষেপ যোগ করা সমর্থন করে।

এই ডেমো হোভারে একটি পপ আপ মেনু দেখায়। একটি ব্যবহারকারী প্রবাহ রেকর্ড করার চেষ্টা করুন এবং একটি মেনু আইটেম ক্লিক করুন.

আপনি যদি এখন ব্যবহারকারীর প্রবাহ পুনরায় চালান, তবে এটি ব্যর্থ হবে কারণ রেকর্ডার রেকর্ডিংয়ের সময় স্বয়ংক্রিয়ভাবে ইভেন্টের উপর মাউস ক্যাপচার করে না। এটি সমাধান করতে, মেনু আইটেমটি ক্লিক করার আগে নির্বাচকের উপর হভার করার জন্য ম্যানুয়ালি একটি ধাপ যোগ করুন ।

ক্রোমিয়াম সমস্যা: 1257499

পারফরম্যান্স ইনসাইট প্যানেলে সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)

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

একটি পারফরম্যান্স রেকর্ডিংয়ে , টাইমলাইনে এলসিপি ব্যাজে ক্লিক করুন। বিশদ প্যানেলে, আপনি LCP স্কোর দেখতে পারেন, LCP-কে ধীর করে এমন সংস্থানগুলি কীভাবে ঠিক করতে হয় তা শিখতে পারেন এবং LCP সংস্থানের জন্য গুরুত্বপূর্ণ পথ দেখতে পারেন।

কিভাবে কর্মযোগ্য অন্তর্দৃষ্টি পেতে এবং প্যানেলের সাথে আপনার ওয়েবসাইটের কর্মক্ষমতা উন্নত করতে পারফরম্যান্স ইনসাইট দেখুন।

ক্রোমিয়াম সমস্যা: 1326481

লেআউট পরিবর্তনের সম্ভাব্য মূল কারণ হিসাবে পাঠ্যের ফ্ল্যাশগুলি (FOIT, FOUT) সনাক্ত করুন

পারফরম্যান্স ইনসাইট প্যানেল এখন লেআউট পরিবর্তনের সম্ভাব্য মূল কারণ হিসাবে অদৃশ্য পাঠ্যের ফ্ল্যাশ (FOIT) এবং আনস্টাইল না করা পাঠ্যের (FOUT) ফ্ল্যাশ সনাক্ত করে।

লেআউট শিফটের সম্ভাব্য মূল কারণগুলি দেখতে, লেআউট শিফট ট্র্যাকের একটি স্ক্রিনশটে ক্লিক করুন।

লেআউট পরিবর্তন প্রতিরোধ করার কৌশল শিখতে ওয়েবফন্ট লোডিং এবং রেন্ডারিং অপ্টিমাইজ দেখুন।

ক্রোমিয়াম সমস্যা: 1334628 , 1328873

ম্যানিফেস্ট ফলকে প্রোটোকল হ্যান্ডলার

আপনি এখন প্রগ্রেসিভ ওয়েব অ্যাপস (PWA) এর জন্য URL প্রোটোকল হ্যান্ডলার নিবন্ধন পরীক্ষা করতে DevTools ব্যবহার করতে পারেন৷

ইউআরএল প্রোটোকল হ্যান্ডলার রেজিস্ট্রেশন ইনস্টল করা পিডব্লিউএ-গুলিকে আরও একীভূত অভিজ্ঞতার জন্য একটি নির্দিষ্ট প্রোটোকল (যেমন magnet , web+example ) ব্যবহার করে এমন লিঙ্কগুলি পরিচালনা করতে দেয়।

অ্যাপ্লিকেশন > ম্যানিফেস্ট ফলকের মাধ্যমে প্রোটোকল হ্যান্ডলার বিভাগে নেভিগেট করুন। আপনি এখানে সমস্ত উপলব্ধ প্রোটোকল দেখতে এবং পরীক্ষা করতে পারেন।

উদাহরণস্বরূপ, এই ডেমো PWA ইনস্টল করুন। প্রোটোকল হ্যান্ডলার বিভাগে, "আমেরিকানো" টাইপ করুন এবং PWA-তে কফি পৃষ্ঠা খুলতে টেস্ট প্রোটোকল ক্লিক করুন।

ক্রোমিয়াম সমস্যা: 1300613

উপাদান প্যানেলে শীর্ষ স্তর ব্যাজ

শীর্ষ স্তরের ধারণা বুঝতে এবং উপরের স্তরের বিষয়বস্তু কীভাবে পরিবর্তিত হয় তা কল্পনা করতে শীর্ষ স্তর ব্যাজটি ব্যবহার করুন৷

<dialog> উপাদানটি সম্প্রতি ব্রাউজার জুড়ে স্থিতিশীল হয়েছে। আপনি একটি ডায়ালগ খুললে, এটি একটি শীর্ষ স্তরে রাখা হয়। শীর্ষ স্তরের সামগ্রী অন্যান্য সমস্ত সামগ্রীর উপরে রেন্ডার করে।

এই ডেমোতে , ওপেন ডায়ালগে ক্লিক করুন।

উপরের স্তরের উপাদানগুলিকে কল্পনা করতে সাহায্য করার জন্য, DevTools DOM ট্রিতে একটি শীর্ষ স্তরের ধারক ( #top-layer ) যুক্ত করে৷ এটি ক্লোজিং </html> ট্যাগের পরে থাকে।

টপ লেয়ার কন্টেইনার এলিমেন্ট থেকে টপ লেয়ার ট্রি এলিমেন্টে লাফ দিতে, উপরের লেয়ার কন্টেইনারে এলিমেন্ট বা এর ব্যাকড্রপের পাশের রিভিল বোতামে ক্লিক করুন।

টপ লেয়ার ট্রি এলিমেন্টের পাশে (উদাহরণস্বরূপ, ডায়ালগ এলিমেন্ট), টপ লেয়ার কন্টেইনারে যেতে টপ-লেয়ার ব্যাজে ক্লিক করুন।

ক্রোমিয়াম সমস্যা: 1313690

রানটাইমে Wasm ডিবাগিং তথ্য সংযুক্ত করুন

আপনি এখন রানটাইম চলাকালীন wasm-এর জন্য DWARF ডিবাগিং তথ্য সংযুক্ত করতে পারেন। পূর্বে, সোর্স প্যানেল শুধুমাত্র জাভাস্ক্রিপ্ট এবং ওয়াসম ফাইলে সোর্স ম্যাপ সংযুক্ত করা সমর্থন করত।

উৎস প্যানেলে একটি Wasm ফাইল খুলুন। এডিটরে রাইট-ক্লিক করুন এবং চাহিদা অনুযায়ী ডিবাগিং তথ্য সংযুক্ত করতে DWARF ডিবাগিং তথ্য যোগ করুন… নির্বাচন করুন।

ক্রোমিয়াম সমস্যা: 1341255

ডিবাগিংয়ের সময় লাইভ সম্পাদনা সমর্থন করে

আপনি এখন ডিবাগার রিস্টার্ট না করেই স্ট্যাকের সর্বোচ্চ ফাংশন সম্পাদনা করতে পারেন।

Chrome 104-এ, DevTools রিস্টার্ট ফ্রেম বৈশিষ্ট্য ফিরিয়ে আনে। যাইহোক, আপনি বর্তমানে যে ফাংশনটিতে বিরতি দিয়েছেন তা সম্পাদনা করতে সক্ষম হননি৷ বিকাশকারীদের জন্য একটি ফাংশন বিরতি করা এবং তারপর বিরতির সময় সেই ফাংশনটি সম্পাদনা করা সাধারণ৷

এই আপডেটের সাথে, ডিবাগার স্বয়ংক্রিয়ভাবে নিম্নলিখিত সীমাবদ্ধতার সাথে ফাংশনটি পুনরায় চালু করে:

• বিরতির সময় শুধুমাত্র শীর্ষ-সবচেয়ে ফাংশন সম্পাদনা করা যেতে পারে
• স্ট্যাকের নিচে একই ফাংশনে কোনো রিকার্সিভ কল নেই

ক্রোমিয়াম সমস্যা: 1334484

স্টাইল প্যানে নিয়মে @scope দেখুন এবং সম্পাদনা করুন

আপনি এখন শৈলী ফলকে CSS @scope at-rules দেখতে এবং সম্পাদনা করতে পারেন।

নিয়মের @scope স্কোপ হল CSS ক্যাসকেডিং এবং ইনহেরিটেন্স লেভেল 6 স্পেসিফিকেশনের অংশ। এই নিয়মগুলি বিকাশকারীদের CSS-এ শৈলীর নিয়মগুলিকে সুযোগ দিতে দেয়।

এই ডেমো পৃষ্ঠাটি খুলুন এবং <div class=”dark-theme”> উপাদানের মধ্যে হাইপারলিঙ্কটি পরীক্ষা করুন৷ শৈলী ফলকে, @scope অ্যাট-রুলগুলি দেখুন। এটি সম্পাদনা করতে নিয়ম ঘোষণা ক্লিক করুন.

ক্রোমিয়াম সমস্যা: 1337777

উৎস মানচিত্রের উন্নতি

সামগ্রিক ডিবাগিং অভিজ্ঞতা উন্নত করতে উত্স মানচিত্রে এখানে কয়েকটি সংশোধন করা হয়েছে:

• DevTools এখন সঠিকভাবে বিরাম চিহ্ন সহ উৎস মানচিত্র শনাক্তকারীর সমাধান করে। কিছু আধুনিক মিনিফায়ার (উদাহরণস্বরূপ, esbuild ) উৎস মানচিত্র তৈরি করে যা পরবর্তী বিরাম চিহ্নের (কমা, বন্ধনী, সেমিকোলন) সাথে শনাক্তকারীকে একত্রিত করে।
• DevTools এখন super কলের মাধ্যমে কনস্ট্রাক্টরদের জন্য সোর্স ম্যাপের নাম সমাধান করে।
• ডুপ্লিকেট ক্যানোনিকাল ইউআরএল-এর জন্য ফিক্সড সোর্স ম্যাপ ইউআরএল ইন্ডেক্সিং। পূর্বে, ডুপ্লিকেট ক্যানোনিকাল URL-এর কারণে কিছু ফাইলে ব্রেকপয়েন্ট সক্রিয় করা হয়নি।

ক্রোমিয়াম সমস্যা: 1335338 , 1333411

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

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

• অ্যাপ্লিকেশন > স্থানীয় সঞ্চয়স্থান ফলকে টেবিল থেকে স্থানীয় স্টোরেজ কী মান জোড়াকে সঠিকভাবে মুছে ফেলুন যখন এটি মুছে ফেলা হয়। ( 1339280 )
• সোর্স প্যানেলে CSS ফাইল দেখার সময় রঙের পূর্বরূপ এখন সঠিকভাবে প্রদর্শিত হয়। পূর্বে, তাদের অবস্থান ভুল স্থানান্তর করা হয়েছিল। ( 1340062 )
• ধারাবাহিকভাবে লেআউট প্যানেলে CSS ফ্লেক্স এবং গ্রিড আইটেমগুলি প্রদর্শন করুন, সেইসাথে এলিমেন্টস প্যানেলে ব্যাজ হিসাবে প্রদর্শন করুন। পূর্বে, উভয় জায়গায় ফ্লেক্স এবং গ্রিড আইটেম এলোমেলোভাবে অনুপস্থিত ছিল। ( 1340441 , 1273992 )
• একটি নতুন ক্রিয়েটর বিজ্ঞাপন স্ক্রিপ্ট লিঙ্ক বিজ্ঞাপন ফ্রেমের জন্য উপলব্ধ আছে যদি DevTools এমন স্ক্রিপ্ট খুঁজে পায় যার কারণে ফ্রেমটিকে একটি বিজ্ঞাপন হিসাবে লেবেল করা হয়েছে৷ আপনি অ্যাপ্লিকেশন > ফ্রেমগুলির মাধ্যমে একটি ফ্রেম খুলতে পারেন। ( 1217041 )

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

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

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

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

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

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

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