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

Jecelyn Yeen

উত্স প্যানেলে লেখক/নিয়োজিত দ্বারা ফাইলগুলিকে গোষ্ঠীভুক্ত করুন৷

অথরড/ডিপ্লোয়েডের গ্রুপ ফাইলগুলি এখন 3-ডট মেনুতে দেখানো হয়েছে। পূর্বে, এটি নেভিগেশন ফলকে সরাসরি দেখাত।

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

ক্রোমিয়াম বাগ: 1352488

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

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

যখন কিছু অপারেশন অ্যাসিঙ্ক্রোনাসভাবে হওয়ার জন্য নির্ধারিত হয়, তখন 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 ব্যবহার করা ফ্রেমওয়ার্কের উপর নির্ভর করে, আপনাকে এটি নিয়ে চিন্তা করার দরকার নেই। (যেমন কৌণিক এই পরিবর্তনগুলি বাস্তবায়ন করেছে)

ক্রোমিয়াম বাগ: 1334585

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

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

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

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

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

ঐচ্ছিকভাবে, আপনি যদি সর্বদা সম্পূর্ণ স্ট্যাক ট্রেস দেখতে পছন্দ করেন, তাহলে আপনি সেটিংস > উপেক্ষা তালিকা > স্বয়ংক্রিয়ভাবে পরিচিত তৃতীয় পক্ষের স্ক্রিপ্টগুলিকে উপেক্ষা করার জন্য সেটিংটি অক্ষম করতে পারেন।

ক্রোমিয়াম বাগ: 1323199

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

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

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

সমস্ত ফ্রেম দেখতে, উপেক্ষা-তালিকাভুক্ত ফ্রেমগুলি দেখান সক্ষম করুন৷ পূর্বে, DevTools ডিফল্টরূপে সমস্ত ফ্রেম প্রদর্শন করত।

ক্রোমিয়াম বাগ: 1352488

উত্স প্যানেলে উপেক্ষা-তালিকাবদ্ধ উত্সগুলি লুকানো৷

নেভিগেশন ফলকে অপ্রাসঙ্গিক ফাইলগুলি লুকানোর জন্য উপেক্ষা-তালিকাভুক্ত উত্সগুলি লুকান সক্ষম করুন৷ এই ভাবে, আপনি শুধুমাত্র আপনার কোড ফোকাস করতে পারেন.

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

ক্রোমিয়াম বাগ: 1352488

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

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

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

ক্রোমিয়াম বাগ: 1336604

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

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

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

ক্রোমিয়াম বাগ: 1347390

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

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

ক্রোমিয়াম বাগ: 1351735

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

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

ক্রোমিয়াম বাগ: 1351383

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

• পূর্বে, রেকর্ডার এক্সটেনশনগুলি সময়ে সময়ে রেকর্ডার প্যানেলে প্রদর্শিত হয় না। ( 1351416 )
• শৈলী ফলক এখন 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 টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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