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 এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি DevTools সমস্যা রিপোর্ট করুন > সাহায্য > DevTools-এ একটি DevTools সমস্যা রিপোর্ট করুন ।
• @ChromeDevTools- এ টুইট করুন।
• আমাদের DevTools YouTube ভিডিও বা DevTools টিপস YouTube ভিডিওগুলিতে নতুন কী আছে সে সম্পর্কে মন্তব্য করুন৷

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

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

Jecelyn Yeen

উত্স প্যানেলে লেখক / মোতায়েন দ্বারা গ্রুপ ফাইল

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

এই ডেমো খুলুন। আপনার মূল উত্স কোড (রচিত) প্রথমে দেখতে এবং তাদের কাছে দ্রুত নেভিগেট করতে লেখক / মোতায়েন সেটিং দ্বারা গ্রুপ ফাইলগুলি সক্ষম করুন।

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

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

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

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

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

// application.component.ts

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

পূর্বে, স্ট্যাক ট্রেস কেবল সময়সীমা অপারেশন দেখিয়েছিল। এটি অপারেশনের "মূল কারণ" দেখায় নি।

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

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

এটা কি জটিল শোনাচ্ছে? মোটেই না। বেশিরভাগ সময়, আপনি যে কাঠামোটি ব্যবহার করছেন তা সময়সূচী এবং অ্যাসিঙ্ক এক্সিকিউশনকে পরিচালনা করে। সেক্ষেত্রে এপিআই ব্যবহার করার জন্য এটি কাঠামোর উপর নির্ভর করে, আপনার এটি নিয়ে চিন্তা করার দরকার নেই। (যেমন কৌণিক এই পরিবর্তনগুলি প্রয়োগ করে)

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

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

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

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

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

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

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

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

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

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

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

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

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

উত্স প্যানেলে উপেক্ষা-তালিকাভুক্ত উত্সগুলি লুকানো

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

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

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

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

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

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

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

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

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

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

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

পারফরম্যান্স অন্তর্দৃষ্টি প্যানেলে এলসিপি সময় ভাঙ্গন

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

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

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

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

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

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

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

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

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

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

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

• Crbug.com এর মাধ্যমে আমাদের কাছে একটি পরামর্শ বা প্রতিক্রিয়া জমা দিন।
• আরও বিকল্প ব্যবহার করে একটি ডিভটুল ইস্যু রিপোর্ট করুন > সহায়তা > ডিভটুলগুলিতে একটি ডিভটুলস ইস্যুগুলির প্রতিবেদন করুন ।
• @ক্রোমডেভটুলস এ টুইট করুন।
• ডিভটুলস ইউটিউব ভিডিও বা ডিভটুলস টিপস ইউটিউব ভিডিওগুলিতে আমাদের নতুন কী সম্পর্কে মন্তব্যগুলি ছেড়ে দিন।

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

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

Jecelyn Yeen

Group files by Authored / Deployed in the Sources panel

The Group files by Authored / Deployed is now shown under the 3-dot menu. Previously, it showed directly on the navigation pane.

Open this demo . Enable the Group files by Authored / Deployed setting to view your original source code (Authored) first and navigate to them quicker.

Chromium bug: 1352488

Improved stack traces

Linked stack traces for asynchronous operations

When some operations are scheduled to happen asynchronously, the stack traces in DevTools now tell the “full story” of the operation. Previously, it tells only part of the story.

For example, open this demo and click on the increment button. Expand the error message in Console . In our source code, the operation includes an async timeout operation.

// application.component.ts

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

Previously, the stack trace only showed the timeout operation. It did not show the “root cause” of the operation.

With the latest changes, DevTools now shows the operation originates from the onClick event in the button component, then the increment function, followed by the timeout operation.

Behind the scenes, DevTools introduced a new “Async Stack Tagging” feature. You can tell the whole story of the operation by linking both parts of the async code together with the new console.createTask() method. See Modern debugging in DevTools to learn more.

এটা কি জটিল শোনাচ্ছে? মোটেই না। Most of the time, the framework you are using handles the scheduling and async execution. In that case, it is up to the framework to use the API, you don't need to worry about it. (eg Angular implemented these changes )

Chromium bug: 1334585

Automatically ignore known third-party scripts

Identify issues in your code quicker during debugging because DevTools now automatically adds known third-party scripts to the ignore list.

Open this demo and click on the increment button. Expand the error message in Console . The stack trace shows only your code (eg app.component.ts button.component.ts ). Click Show more frames to view the full stack trace.

Previously, the stack trace included third-party scripts like zone.js and core.mjs . These are not your source code, they are generated by bundlers (eg webpack) or frameworks (eg Angular). It took a longer time to identify the root cause of an error.

Behind the scenes, DevTools ignores third-party scripts based on the new x_google_ignoreList property in source maps. Frameworks and bundlers need to supply this information. See Case Study: Better Angular Debugging with DevTools .

Optionally, if you prefer to always view full stack traces, you can disable the setting via Settings > Ignore list > Automatically add known third-party scripts to ignore list .

Chromium bug: 1323199

Improved call stack during debugging

With the Automatically add known third-party scripts to ignore list setting, the call stack now shows only frames that are relevant to your code.

Open this demo and set a breakpoint at the increment() function in app.component.ts . Click the increment button on the page to trigger the breakpoint. The call stack shows only frames from your code (eg app.component.ts and button.component.ts ).

To view all frames, enable Show ignore-listed frames . Previously, DevTools displayed all frames by default.

Chromium bug: 1352488

Hiding ignore-listed sources in the Sources panel

Enable hide ignore-listed sources to hide irrelevant files in the Navigation pane. This way, you can focus only on your code.

Open this demo . In the Sources panel. The node_modules and webpack are the third-party scripts. Click on the 3-dot menu and select hide ignore-listed sources to hide them from the pane.

Chromium bug: 1352488

Hiding ignore-listed files in the Command Menu

With the hide ignore-listed sources setting, you can find your file quicker with the Command Menu . Previously, searching files in the Command Menu returns third-party files that might not be relevant to you.

For example, enable the hide ignore-listed sources setting and click on the 3-dot menu. ফাইল খুলুন নির্বাচন করুন। Type “ton” to search for button components. Previously, the results include files from node_modules , one of the node_modules files even shown up as the first result.

Chromium bug: 1336604

New Interactions track in the Performance panel

Use the new Interactions track in the Performance panel to visualize interactions and track down potential responsiveness issues.

For example, start a performance recording on this demo page . Click on a coffee and stop recording. Two interactions show in the Interactions track. Both interactions have the same IDs, indicating the interactions are triggered from the same user interaction.

Chromium bug: 1347390

LCP timings breakdown in the Performance Insights panel

The Performance Insights panel now shows the timings breakdown of the Largest Contentful Paint (LCP) . Use these timings information to understand and identify an opportunity to improve LCP performance.

Chromium bug: 1351735

Auto-generate default name for recordings in the Recorder panel

The Recorder panel now automatically generates a name for new recordings.

Chromium bug: 1351383

Miscellaneous highlights

• Previously, Recorder extensions don't show up in the Recorder panel from time to time. ( 1351416 )
• The Styles pane now displays a color picker for the SVG <stop> element's stop-color property. ( 1351096 )
• Identify scripts causing layout thrashing as the potential root causes for layout shifts in the Performance Insights panel. ( 1343019 )
• Display critical path for LCP web fonts in the Performance Insights panel. ( 1350390 )

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

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

A list of everything that has been covered in the What's new in DevTools series.