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

Jecelyn Yeen

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

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

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

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

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

ক্রোমিয়াম সমস্যা: ১২৫৭৪৯৯

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

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

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

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

ক্রোমিয়াম সমস্যা: ১২৫৭৪৯৯

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

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

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

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

ক্রোমিয়াম সমস্যা: ১৩২৬৪৮১

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

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

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

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

ক্রোমিয়াম সমস্যা: ১৩৩৪৬২৮ , ১৩২৮৮৭৩

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

আপনি এখন Progressive Web Apps (PWA)- এর জন্য URL প্রোটোকল হ্যান্ডলার রেজিস্ট্রেশন পরীক্ষা করতে DevTools ব্যবহার করতে পারেন।

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

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

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

ক্রোমিয়াম সমস্যা: ১৩০০৬১৩

এলিমেন্টস প্যানেলে উপরের স্তরের ব্যাজ

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

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

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

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

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

উপরের স্তরের ট্রি উপাদানের (যেমন, ডায়ালগ উপাদান) পাশে, উপরের স্তরের ধারকটিতে যেতে উপরের স্তরের ব্যাজে ক্লিক করুন।

ক্রোমিয়াম সমস্যা: ১৩১৩৬৯০

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

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

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

ক্রোমিয়াম সমস্যা: ১৩৪১২৫৫

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

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

Chrome 104-এ, DevTools রিস্টার্ট ফ্রেম বৈশিষ্ট্যটি ফিরিয়ে আনে। তবে, আপনি যে ফাংশনটিতে বর্তমানে পজ করেছেন সেটি সম্পাদনা করতে সক্ষম হননি। ডেভেলপারদের জন্য একটি ফাংশন ভেঙে ফেলা এবং পজ থাকা অবস্থায় সেই ফাংশনটি সম্পাদনা করা সাধারণ।

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

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

ক্রোমিয়াম সমস্যা: ১৩৩৪৪৮৪

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

আপনি এখন স্টাইলস প্যানে CSS @scope at-rules দেখতে এবং সম্পাদনা করতে পারবেন।

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

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

ক্রোমিয়াম সমস্যা: ১৩৩৭৭৭৭

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

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

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

ক্রোমিয়াম সমস্যা: ১৩৩৫৩৩৮ , ১৩৩৩৪১১

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

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

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

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

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

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

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

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

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

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