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

Jecelyn Yeen

সোর্স প্যানেলে লেখক/প্রয়োগকৃত অনুসারে ফাইলগুলিকে গ্রুপ করুন

Authored / Deployed এর Group files এখন ৩-ডট মেনুর নিচে দেখানো হচ্ছে। আগে এটি সরাসরি নেভিগেশন প্যানে দেখা যেত।

এই ডেমোটি খুলুন। প্রথমে আপনার মূল সোর্স কোড (Authored) দেখতে এবং দ্রুত সেগুলিতে নেভিগেট করতে Authored / Deployed দ্বারা Group files সেটিং সক্ষম করুন।

ক্রোমিয়াম বাগ: ১৩৫২৪৮৮

উন্নত স্ট্যাক ট্রেস

অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য লিঙ্ক করা স্ট্যাক ট্রেস

যখন কিছু অপারেশন অ্যাসিঙ্ক্রোনাসভাবে হওয়ার জন্য নির্ধারিত হয়, তখন DevTools-এর স্ট্যাক ট্রেসগুলি এখন অপারেশনের "সম্পূর্ণ গল্প" বলে। পূর্বে, এটি গল্পের কেবল কিছু অংশ বলে।

উদাহরণস্বরূপ, এই ডেমোটি খুলুন এবং ইনক্রিমেন্ট বোতামে ক্লিক করুন। কনসোলে ত্রুটি বার্তাটি প্রসারিত করুন। আমাদের সোর্স কোডে, অপারেশনটিতে একটি অ্যাসিঙ্ক timeout অপারেশন অন্তর্ভুক্ত রয়েছে।

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

পূর্বে, স্ট্যাক ট্রেস শুধুমাত্র টাইমআউট অপারেশন দেখাত। এটি অপারেশনের "মূল কারণ" দেখায়নি।

সর্বশেষ পরিবর্তনের মাধ্যমে, DevTools এখন দেখায় যে অপারেশনটি বোতাম কম্পোনেন্টের onClick ইভেন্ট থেকে উদ্ভূত হয়, তারপর increment ফাংশন, এবং তারপরে টাইমআউট অপারেশন।

পর্দার আড়ালে, DevTools একটি নতুন "Async Stack Tagging" বৈশিষ্ট্য চালু করেছে। নতুন console.createTask() পদ্ধতির সাথে async কোডের উভয় অংশকে একসাথে সংযুক্ত করে আপনি পুরো অপারেশনের গল্পটি বলতে পারেন। আরও জানতে DevTools-এ আধুনিক ডিবাগিং দেখুন।

এটা কি জটিল শোনাচ্ছে? মোটেও না। বেশিরভাগ সময়, আপনি যে ফ্রেমওয়ার্কটি ব্যবহার করছেন তা শিডিউলিং এবং অ্যাসিঙ্ক এক্সিকিউশন পরিচালনা করে। সেক্ষেত্রে, API ব্যবহার করা ফ্রেমওয়ার্কের উপর নির্ভর করে, আপনার এটি নিয়ে চিন্তা করার দরকার নেই। (যেমন Angular এই পরিবর্তনগুলি বাস্তবায়ন করেছে)

ক্রোমিয়াম বাগ: ১৩৩৪৫৮৫

পরিচিত তৃতীয় পক্ষের স্ক্রিপ্টগুলি স্বয়ংক্রিয়ভাবে উপেক্ষা করুন

ডিবাগিংয়ের সময় আপনার কোডের সমস্যাগুলি দ্রুত শনাক্ত করুন কারণ DevTools এখন স্বয়ংক্রিয়ভাবে পরিচিত তৃতীয়-পক্ষের স্ক্রিপ্টগুলিকে উপেক্ষার তালিকায় যুক্ত করে।

এই ডেমোটি খুলুন এবং ইনক্রিমেন্ট বোতামে ক্লিক করুন। কনসোলে ত্রুটি বার্তাটি প্রসারিত করুন। স্ট্যাক ট্রেসটি কেবল আপনার কোড দেখায় (যেমন app.component.ts button.component.ts )। সম্পূর্ণ স্ট্যাক ট্রেস দেখতে Show more frames এ ক্লিক করুন।

পূর্বে, স্ট্যাক ট্রেসে zone.js এবং core.mjs এর মতো তৃতীয় পক্ষের স্ক্রিপ্ট অন্তর্ভুক্ত ছিল। এগুলি আপনার সোর্স কোড নয়, এগুলি বান্ডলার (যেমন ওয়েবপ্যাক) বা ফ্রেমওয়ার্ক (যেমন অ্যাঙ্গুলার) দ্বারা তৈরি করা হয়। ত্রুটির মূল কারণ সনাক্ত করতে আরও বেশি সময় লেগেছিল।

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

ঐচ্ছিকভাবে, যদি আপনি সর্বদা পূর্ণ স্ট্যাক ট্রেস দেখতে চান, তাহলে আপনি সেটিংস > Ignore list > Automatically add known third-party script to ignore list এর মাধ্যমে সেটিংটি অক্ষম করতে পারেন।

ক্রোমিয়াম বাগ: ১৩২৩১৯৯

ডিবাগিংয়ের সময় উন্নত কল স্ট্যাক

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

এই ডেমোটি খুলুন এবং app.component.ts এর increment() ফাংশনে একটি ব্রেকপয়েন্ট সেট করুন। ব্রেকপয়েন্টটি ট্রিগার করতে পৃষ্ঠার increment বোতামে ক্লিক করুন। কল স্ট্যাকটি শুধুমাত্র আপনার কোড থেকে ফ্রেম দেখায় (যেমন app.component.ts এবং button.component.ts )।

সকল ফ্রেম দেখতে, Show ignore-listed frames সক্ষম করুন। পূর্বে, DevTools ডিফল্টরূপে সকল ফ্রেম প্রদর্শন করত।

ক্রোমিয়াম বাগ: ১৩৫২৪৮৮

সোর্স প্যানেলে উপেক্ষা-তালিকাভুক্ত সোর্স লুকানো হচ্ছে

নেভিগেশন প্যানে অপ্রাসঙ্গিক ফাইল লুকানোর জন্য "অপছন্দ উপেক্ষা-তালিকাভুক্ত উৎস" সক্রিয় করুন। এইভাবে, আপনি কেবল আপনার কোডের উপর ফোকাস করতে পারবেন।

এই ডেমোটি খুলুন। সোর্স প্যানেলে। node_modules এবং webpack হল তৃতীয় পক্ষের স্ক্রিপ্ট। 3-ডট মেনুতে ক্লিক করুন এবং প্যান থেকে লুকানোর জন্য "অপছন্দ-তালিকাভুক্ত উৎসগুলি লুকান" নির্বাচন করুন।

ক্রোমিয়াম বাগ: ১৩৫২৪৮৮

কমান্ড মেনুতে উপেক্ষা-তালিকাভুক্ত ফাইলগুলি লুকানো

"অপছন্দ উপেক্ষা-তালিকাভুক্ত উৎস" সেটিং ব্যবহার করে, আপনি কমান্ড মেনু ব্যবহার করে আপনার ফাইলটি দ্রুত খুঁজে পেতে পারেন। পূর্বে, কমান্ড মেনুতে ফাইল অনুসন্ধান করলে তৃতীয় পক্ষের ফাইলগুলি ফিরে আসে যা আপনার জন্য প্রাসঙ্গিক নাও হতে পারে।

উদাহরণস্বরূপ, hide ignore-listed sources সেটিং সক্রিয় করুন এবং 3-ডট মেনুতে ক্লিক করুন। Open file নির্বাচন করুন। বোতাম উপাদানগুলি অনুসন্ধান করতে "ton" টাইপ করুন। পূর্বে, ফলাফলগুলিতে node_modules থেকে ফাইল অন্তর্ভুক্ত ছিল, node_modules ফাইলগুলির মধ্যে একটি এমনকি প্রথম ফলাফল হিসাবে দেখানো হয়েছিল।

ক্রোমিয়াম বাগ: ১৩৩৬৬০৪

পারফর্মেন্স প্যানেলে নতুন ইন্টারঅ্যাকশন ট্র্যাক

পারফরম্যান্স প্যানেলে নতুন ইন্টারঅ্যাকশন ট্র্যাক ব্যবহার করে ইন্টারঅ্যাকশনগুলি কল্পনা করুন এবং সম্ভাব্য প্রতিক্রিয়াশীলতার সমস্যাগুলি ট্র্যাক করুন।

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

ক্রোমিয়াম বাগ: ১৩৪৭৩৯০

পারফর্ম্যান্স ইনসাইট প্যানেলে LCP টাইমিং ব্রেকডাউন

পারফরম্যান্স ইনসাইটস প্যানেল এখন লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) এর টাইমিং ব্রেকডাউন দেখায়। LCP পারফরম্যান্স উন্নত করার সুযোগ বুঝতে এবং সনাক্ত করতে এই টাইমিং তথ্য ব্যবহার করুন।

ক্রোমিয়াম বাগ: ১৩৫১৭৩৫

রেকর্ডার প্যানেলে রেকর্ডিংয়ের জন্য ডিফল্ট নাম স্বয়ংক্রিয়ভাবে তৈরি করুন

রেকর্ডার প্যানেল এখন স্বয়ংক্রিয়ভাবে নতুন রেকর্ডিংয়ের জন্য একটি নাম তৈরি করে।

ক্রোমিয়াম বাগ: ১৩৫১৩৮৩

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

• পূর্বে, রেকর্ডার এক্সটেনশনগুলি সময়ে সময়ে রেকর্ডার প্যানেলে প্রদর্শিত হত না। ( 1351416 )
• Styles প্যানে এখন SVG <stop> এলিমেন্টের stop-color প্রোপার্টির জন্য একটি কালার পিকার প্রদর্শিত হয়। ( 1351096 )
• পারফরম্যান্স ইনসাইটস প্যানেলে লেআউট পরিবর্তনের সম্ভাব্য মূল কারণ হিসেবে লেআউট থ্র্যাশিংয়ের কারণ স্ক্রিপ্টগুলি চিহ্নিত করুন। ( 1343019 )
• পারফরম্যান্স ইনসাইটস প্যানেলে LCP ওয়েব ফন্টের জন্য গুরুত্বপূর্ণ পথ প্রদর্শন করুন। ( 1350390 )

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

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

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

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

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

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

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