ভূমিকা
আজ, লেখকরা তাদের ওয়েব অ্যাপ্লিকেশন তৈরি করতে অনেক বিমূর্ততা ব্যবহার করতে পারেন। ওয়েব প্ল্যাটফর্ম প্রদান করে নিম্ন-স্তরের APIগুলির সাথে সরাসরি ইন্টারফেস করার পরিবর্তে, অনেক লেখক উচ্চ-স্তরের দৃষ্টিকোণ থেকে তাদের অ্যাপ্লিকেশনগুলি লেখার জন্য কাঠামো তৈরি করে, সরঞ্জাম এবং কম্পাইলার তৈরি করে।
উদাহরণস্বরূপ, কৌণিক কাঠামোর উপরে নির্মিত উপাদানগুলি এইচটিএমএল টেমপ্লেট সহ টাইপস্ক্রিপ্টে লেখা হয়। হুডের নীচে, কৌণিক CLI এবং ওয়েবপ্যাক সবকিছুকে জাভাস্ক্রিপ্টে এবং একটি তথাকথিত বান্ডিলে কম্পাইল করে, যা তারপর ব্রাউজারে পাঠানো হয়।
DevTools-এ ওয়েব অ্যাপ্লিকেশানগুলি ডিবাগিং বা প্রোফাইলিং করার সময়, আপনি বর্তমানে যে কোডটি লিখেছেন তার পরিবর্তে আপনার কোডের এই সংকলিত সংস্করণটি দেখতে এবং ডিবাগ করতে পারবেন৷ একজন লেখক হিসাবে, এটি আপনি চান না, যদিও:
- আপনি মিনিফাইড জাভাস্ক্রিপ্ট কোড ডিবাগ করতে চান না, আপনি আপনার আসল জাভাস্ক্রিপ্ট কোড ডিবাগ করতে চান।
- টাইপস্ক্রিপ্ট ব্যবহার করার সময়, আপনি জাভাস্ক্রিপ্ট ডিবাগ করতে চান না, আপনি আপনার আসল টাইপস্ক্রিপ্ট কোড ডিবাগ করতে চান।
- আপনি যখন Angular, Lit, বা JSX-এর মতো টেমপ্লেটিং ব্যবহার করেন, আপনি সর্বদা ফলস্বরূপ DOM ডিবাগ করতে চান না। আপনি নিজেরাই উপাদানগুলি ডিবাগ করতে চাইতে পারেন।
সামগ্রিকভাবে, আপনি সম্ভবত আপনার নিজের কোডটি যেমন লিখেছেন তা ডিবাগ করতে চান।
সোর্স ম্যাপ ইতিমধ্যেই এই ব্যবধান কিছুটা বন্ধ করে দিলেও, Chrome DevTools এবং ইকোসিস্টেম এই এলাকায় আরও অনেক কিছু করতে পারে।
একবার দেখা যাক!
রচিত বনাম নিয়োজিত কোড
বর্তমানে, সোর্স প্যানেলে ফাইল ট্রি নেভিগেট করার সময়, আপনি কম্পাইল করা-এবং প্রায়শই ছোট করা— বান্ডেলের বিষয়বস্তু দেখতে পাবেন। এইগুলি প্রকৃত ফাইল যা ব্রাউজার ডাউনলোড করে এবং চালায়। DevTools এটিকে ডিপ্লোয়েড কোড বলে।
এটি খুব সহজ নয় এবং প্রায়শই বোঝা কঠিন। একজন লেখক হিসাবে, আপনি যে কোডটি লিখেছেন সেটি দেখতে এবং ডিবাগ করতে চান, ডিপ্লোয়েড কোড নয়।
এটির জন্য মেকআপ করার জন্য, আপনি এখন গাছের পরিবর্তে অথরেড কোড দেখাতে পারেন। এটি ট্রিটিকে আপনার IDE তে দেখতে পাওয়া সোর্স ফাইলগুলির সাথে আরও ঘনিষ্ঠভাবে সাদৃশ্যপূর্ণ করে তোলে এবং এই ফাইলগুলি এখন ডিপ্লোয়েড কোড থেকে আলাদা করা হয়েছে৷
Chrome DevTools-এ এই বিকল্পটি সক্ষম করতে, সেটিংস > পরীক্ষা-নিরীক্ষা- এ যান এবং অথরেড এবং ডিপ্লোয়েড ট্রি-তে গ্রুপ সোর্স চেক করুন।
"শুধু আমার কোড"
নির্ভরতা ব্যবহার করার সময় বা ফ্রেমওয়ার্কের উপরে বিল্ডিং করার সময়, তৃতীয় পক্ষের ফাইলগুলি আপনার পথে আসতে পারে। বেশিরভাগ সময় আপনি কেবলমাত্র আপনার কোড দেখতে চান, node_modules ফোল্ডারে থাকা কিছু তৃতীয় পক্ষের লাইব্রেরির নয়।
এটি তৈরি করতে, DevTools-এ ডিফল্টরূপে সক্রিয় একটি অতিরিক্ত সেটিং রয়েছে: তালিকা উপেক্ষা করতে স্বয়ংক্রিয়ভাবে পরিচিত তৃতীয় পক্ষের স্ক্রিপ্ট যোগ করুন । আপনি এটি DevTools > সেটিংস > Ignore List- এ খুঁজে পেতে পারেন।
এই সেটিং সক্ষম করে, DevTools যেকোন ফাইল বা ফোল্ডার লুকিয়ে রাখে যা একটি ফ্রেমওয়ার্ক বা বিল্ড টুল উপেক্ষা করার জন্য চিহ্নিত করেছে৷
কৌণিক v14.1.0 হিসাবে, এর node_modules এবং webpack ফোল্ডারগুলির বিষয়বস্তু যেমন চিহ্নিত করা হয়েছে। অতএব, এই ফোল্ডারগুলি, তাদের মধ্যে থাকা ফাইলগুলি এবং এই জাতীয় অন্যান্য তৃতীয় পক্ষের শিল্পকর্ম DevTools-এর বিভিন্ন জায়গায় দেখা যায় না৷
একজন লেখক হিসাবে, এই নতুন আচরণটি সক্ষম করার জন্য আপনাকে কিছু করতে হবে না। এই পরিবর্তন বাস্তবায়ন করা কাঠামোর উপর নির্ভর করে।
স্ট্যাক ট্রেসে তালিকাভুক্ত কোড উপেক্ষা করুন
একটি জায়গা যেখানে এই উপেক্ষা-তালিকাভুক্ত ফাইলগুলি আর দেখা যায় না স্ট্যাক ট্রেসে। একজন লেখক হিসাবে, আপনি এখন আরও প্রাসঙ্গিক স্ট্যাক ট্রেস দেখতে পাবেন।
আপনি যদি স্ট্যাক ট্রেসের সমস্ত কল ফ্রেম দেখতে চান, আপনি সর্বদা আরও ফ্রেম দেখান লিঙ্কে ক্লিক করতে পারেন।
আপনার কোড ডিবাগ করার সময় এবং ধাপে ধাপে যাওয়ার সময় আপনি যে কল স্ট্যাকগুলি দেখেন তার জন্যও এটি প্রযোজ্য। যখন ফ্রেমওয়ার্ক বা বান্ডলাররা DevTools-কে থার্ড-পার্টি স্ক্রিপ্ট সম্পর্কে অবহিত করে, তখন DevTools স্বয়ংক্রিয়ভাবে সমস্ত অপ্রাসঙ্গিক কল ফ্রেম লুকিয়ে রাখে এবং স্টেপ-ডিবাগিং করার সময় যেকোন উপেক্ষা-তালিকাভুক্ত কোডের উপরে উঠে যায়।
ফাইল ট্রিতে তালিকাভুক্ত কোড উপেক্ষা করুন
উৎস প্যানেলে অথরেড কোড ফাইল ট্রি থেকে উপেক্ষা-তালিকাভুক্ত ফাইল এবং ফোল্ডার লুকানোর জন্য, সেটিংস > DevTools-এ পরীক্ষা -নিরীক্ষায় সোর্স ট্রি ভিউ-এ উপেক্ষা-তালিকাভুক্ত কোড লুকান চেক করুন।
নমুনা কৌণিক প্রকল্পে, node_modules এবং webpack ফোল্ডারগুলি এখন লুকানো আছে।
"দ্রুত ওপেন" মেনুতে তালিকাভুক্ত কোড উপেক্ষা করুন
উপেক্ষা করা-তালিকাভুক্ত কোড শুধুমাত্র ফাইল ট্রি থেকে লুকানো নয়, কিন্তু "দ্রুত ওপেন" মেনু ( কন্ট্রোল + পি (লিনাক্স/উইন্ডোজ) বা কমান্ড + পি (ম্যাক) ) থেকেও লুকানো আছে।
স্ট্যাক ট্রেস আরো উন্নতি
ইতিমধ্যে প্রাসঙ্গিক স্ট্যাক ট্রেস কভার করার পরে, Chrome DevTools স্ট্যাক ট্রেসগুলিতে আরও উন্নতির প্রবর্তন করে৷
লিঙ্কড স্ট্যাক ট্রেস
যখন কিছু ক্রিয়াকলাপ অ্যাসিঙ্ক্রোনাসভাবে হওয়ার জন্য নির্ধারিত হয়, তখন DevTools-এ স্ট্যাক ট্রেসগুলি শুধুমাত্র গল্পের অংশ বলে।
উদাহরণস্বরূপ, এখানে একটি অনুমানমূলক framework.js ফাইলে একটি খুব সাধারণ সময়সূচী রয়েছে:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
tasks.push({ f });
},
work() {
while (tasks.length) {
const { f } = tasks.shift();
f();
}
},
};
}
const scheduler = makeScheduler();
function loop() {
scheduler.work();
requestAnimationFrame(loop);
};
loop();
… এবং কিভাবে একজন ডেভেলপার একটি example.js ফাইলে তাদের নিজস্ব কোডে এটি ব্যবহার করতে পারে:
function someTask() {
console.trace("done!");
}
function businessLogic() {
scheduler.schedule(someTask);
}
businessLogic();
someTask পদ্ধতির ভিতরে একটি ব্রেকপয়েন্ট যোগ করার সময় বা কনসোলে প্রিন্ট করা ট্রেস পরিদর্শন করার সময়, আপনি businessLogic() কলের কোনো উল্লেখ দেখতে পান না যা এই অপারেশনটির "মূল কারণ" ছিল।
পরিবর্তে, আপনি শুধুমাত্র ফ্রেমওয়ার্ক শিডিউলিং লজিক দেখতে পাচ্ছেন যা টাস্ক এক্সিকিকিউশনের দিকে পরিচালিত করে এবং স্ট্যাক ট্রেসে কোন ব্রেডক্রাম্বস নেই যা আপনাকে এই টাস্কের দিকে পরিচালিত ইভেন্টগুলির মধ্যে কার্যকারণ লিঙ্কগুলি খুঁজে বের করতে সহায়তা করে।
"অ্যাসিঙ্ক স্ট্যাক ট্যাগিং" নামে একটি নতুন বৈশিষ্ট্যের জন্য ধন্যবাদ, অ্যাসিঙ্ক কোডের উভয় অংশকে একসাথে লিঙ্ক করার মাধ্যমে পুরো গল্পটি বলা সম্ভব।
Async স্ট্যাক ট্যাগিং API console.createTask() নামে একটি নতুন console পদ্ধতি প্রবর্তন করে। API স্বাক্ষরটি নিম্নরূপ:
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
console.createTask() কলটি একটি Task ইনস্ট্যান্স প্রদান করে যা আপনি পরে টাস্কের বিষয়বস্তু চালাতে ব্যবহার করতে পারেন f ।
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
টাস্কটি যে প্রেক্ষাপটে এটি তৈরি করা হয়েছিল এবং যে অ্যাসিঙ্ক ফাংশনটি কার্যকর করা হচ্ছে তার প্রেক্ষাপটের মধ্যে লিঙ্ক তৈরি করে।
উপরে থেকে makeScheduler ফাংশনে প্রয়োগ করা হলে, কোডটি নিম্নলিখিত হয়ে যায়:
function makeScheduler() {
const tasks = [];
return {
schedule(f) {
const task = console.createTask(f.name);
tasks.push({ task, f });
},
work() {
while (tasks.length) {
const { task, f } = tasks.shift();
task.run(f); // instead of f();
}
},
};
}
এর জন্য ধন্যবাদ, Chrome DevTools এখন আরও ভাল স্ট্যাক ট্রেস দেখাতে সক্ষম।
লক্ষ্য করুন কিভাবে businessLogic() এখন স্ট্যাক ট্রেসে অন্তর্ভুক্ত করা হয়েছে! শুধু তাই নয়, আগের মতই জেনেরিক requestAnimationFrame পরিবর্তে টাস্কটির একটি পরিচিত নাম someTask রয়েছে।
বন্ধুত্বপূর্ণ কল ফ্রেম
একটি প্রকল্প তৈরি করার সময় ফ্রেমওয়ার্কগুলি প্রায়শই সমস্ত ধরণের টেমপ্লেটিং ভাষা থেকে কোড তৈরি করে, যেমন কৌণিক বা জেএসএক্স টেমপ্লেট যা এইচটিএমএল-দেখানো কোডকে প্লেইন জাভাস্ক্রিপ্টে পরিণত করে যা অবশেষে ব্রাউজারে চলে। কখনও কখনও, এই ধরণের জেনারেট করা ফাংশনগুলিকে এমন নাম দেওয়া হয় যা খুব বন্ধুত্বপূর্ণ নয় — হয় একক অক্ষরের নামগুলি ছোট করার পরে বা কিছু অস্পষ্ট বা অপরিচিত নাম এমনকি যখন সেগুলি না থাকে।
নমুনা প্রকল্পে, এর একটি উদাহরণ হল AppComponent_Template_app_button_handleClick_1_listener যা আপনি স্ট্যাক ট্রেসে দেখতে পাচ্ছেন।
এটি মোকাবেলা করার জন্য, Chrome DevTools এখন সোর্স ম্যাপের মাধ্যমে এই ফাংশনগুলির পুনঃনামকরণ সমর্থন করে৷ যদি একটি উত্স মানচিত্রে একটি ফাংশন সুযোগ শুরুর জন্য একটি নাম এন্ট্রি থাকে, তাহলে কল ফ্রেমে সেই নামটি স্ট্যাক ট্রেসে প্রদর্শন করা উচিত।
একজন লেখক হিসাবে, এই নতুন আচরণটি সক্ষম করার জন্য আপনাকে কিছু করতে হবে না। এই পরিবর্তন বাস্তবায়ন করা কাঠামোর উপর নির্ভর করে।
সামনে দেখ
এই পোস্টে বর্ণিত সংযোজনগুলির জন্য ধন্যবাদ, Chrome DevTools আপনাকে আরও ভাল ডিবাগিং অভিজ্ঞতা দিতে পারে। দলটি অন্বেষণ করতে চায় এমন আরও ক্ষেত্র রয়েছে। বিশেষ করে, DevTools-এ প্রোফাইলিংয়ের অভিজ্ঞতা কীভাবে উন্নত করা যায়।
Chrome DevTools টিম ফ্রেমওয়ার্ক লেখকদের এই নতুন ক্ষমতাগুলি গ্রহণ করতে উত্সাহিত করে৷ কেস স্টাডি: DevTools-এর সাথে আরও ভাল কৌণিক ডিবাগিং কীভাবে এটি বাস্তবায়ন করতে হয় তার নির্দেশিকা প্রদান করে।