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

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

অথরড/ডিপ্লোয়েডের গ্রুপ ফাইলগুলি এখন 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.tsincrement() ফাংশনে একটি ব্রেকপয়েন্ট সেট করুন। ব্রেকপয়েন্ট ট্রিগার করতে পৃষ্ঠায় ইনক্রিমেন্ট বোতামে ক্লিক করুন। কল স্ট্যাক আপনার কোড থেকে শুধুমাত্র ফ্রেম দেখায় (যেমন app.component.ts এবং button.component.ts )।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

পারফরম্যান্স ইনসাইটস প্যানেল এখন সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (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 সিরিজে নতুন কী আছে তাতে কভার করা হয়েছে এমন সবকিছুর একটি তালিকা।

ক্রোম 124

ক্রোম 123

ক্রোম 122

ক্রোম 121

ক্রোম 120

ক্রোম 119

ক্রোম 118

ক্রোম 117

ক্রোম 116

ক্রোম 115

ক্রোম 114

ক্রোম 113

ক্রোম 112

ক্রোম 111

ক্রোম 110

ক্রোম 109

ক্রোম 108

ক্রোম 107

ক্রোম 106

ক্রোম 105

ক্রোম 104

ক্রোম 103

ক্রোম 102

ক্রোম 101

ক্রোম 100

ক্রোম 99

ক্রোম 98

ক্রোম 97

ক্রোম 96

ক্রোম 95

ক্রোম 94

ক্রোম 93

ক্রোম 92

ক্রোম 91

ক্রোম 90

ক্রোম ৮৯

ক্রোম ৮৮

ক্রোম 87

ক্রোম 86

ক্রোম 85

ক্রোম 84

ক্রোম 83

ক্রোম 82

Chrome 82 বাতিল করা হয়েছে

ক্রোম 81

ক্রোম 80

ক্রোম 79

ক্রোম 78

ক্রোম 77

ক্রোম 76

ক্রোম 75

ক্রোম 74

ক্রোম 73

ক্রোম 72

ক্রোম 71

ক্রোম 70

ক্রোম 68

ক্রোম 67

ক্রোম 66

ক্রোম 65

ক্রোম 64

ক্রোম 63

ক্রোম 62

ক্রোম 61

ক্রোম 60

ক্রোম 59