একটি উন্নত ডিবাগিং অভিজ্ঞতা
গত কয়েক মাস ধরে Chrome DevTools টিম Chrome DevTools-এ ডিবাগিং অভিজ্ঞতার উন্নতি চালু করতে Angular দলের সাথে সহযোগিতা করেছে। উভয় দলের লোকেরা একসাথে কাজ করেছে এবং লেখকের দৃষ্টিকোণ থেকে ডেভেলপারদের ওয়েব অ্যাপ্লিকেশনগুলিকে ডিবাগ এবং প্রোফাইল করতে সক্ষম করার দিকে পদক্ষেপ নিয়েছে: তাদের উত্স ভাষা এবং প্রকল্প কাঠামোর পরিপ্রেক্ষিতে, তাদের সাথে পরিচিত এবং প্রাসঙ্গিক তথ্যে অ্যাক্সেস সহ।
এটি অর্জনের জন্য কৌণিক এবং Chrome DevTools-এ কোন পরিবর্তনগুলি প্রয়োজন ছিল তা দেখতে এই পোস্টটি হুডের নীচে একটি নজর দেয়৷ যদিও এই পরিবর্তনগুলির মধ্যে কিছু কৌণিক মাধ্যমে প্রদর্শিত হয়, সেগুলি অন্যান্য কাঠামোতেও প্রয়োগ করা যেতে পারে। Chrome DevTools টিম অন্যান্য ফ্রেমওয়ার্ককে নতুন কনসোল API এবং সোর্স ম্যাপ এক্সটেনশন পয়েন্টগুলি গ্রহণ করতে উত্সাহিত করে যাতে তারাও তাদের ব্যবহারকারীদের একটি ভাল ডিবাগিং অভিজ্ঞতা দিতে পারে৷
উপেক্ষা-তালিকা কোড
Chrome DevTools ব্যবহার করে অ্যাপ্লিকেশানগুলি ডিবাগ করার সময়, লেখকরা সাধারণত শুধুমাত্র তাদের কোড দেখতে চান, ফ্রেমওয়ার্কের নীচে নয় বা node_modules ফোল্ডারে কিছু নির্ভরতা দূর করা নয়৷
এটি অর্জনের জন্য, DevTools টিম উৎস মানচিত্রের একটি এক্সটেনশন চালু করেছে, যাকে বলা হয় x_google_ignoreList । এই এক্সটেনশনটি ফ্রেমওয়ার্ক কোড বা বান্ডলার-জেনারেটেড কোডের মতো তৃতীয় পক্ষের উত্স সনাক্ত করতে ব্যবহৃত হয়। যখন একটি ফ্রেমওয়ার্ক এই এক্সটেনশনটি ব্যবহার করে, লেখকরা এখন স্বয়ংক্রিয়ভাবে কোডটি এড়িয়ে যান যেটি তারা আগে থেকে ম্যানুয়ালি কনফিগার না করে দেখতে চান না বা এর মধ্য দিয়ে যেতে চান না ৷
অনুশীলনে, Chrome DevTools স্বয়ংক্রিয়ভাবে চিহ্নিত কোড লুকাতে পারে যেমন স্ট্যাক ট্রেস, সোর্স ট্রি, কুইক ওপেন ডায়ালগ, এবং ডিবাগারে স্টেপিং এবং রিসুমিং আচরণকেও উন্নত করতে পারে।
x_google_ignoreList উৎস মানচিত্র এক্সটেনশন
উত্স মানচিত্রে, নতুন x_google_ignoreList ক্ষেত্রটি sources অ্যারেকে নির্দেশ করে এবং সেই উত্স মানচিত্রে সমস্ত পরিচিত তৃতীয় পক্ষের উত্সগুলির সূচকগুলিকে তালিকাভুক্ত করে৷ উত্স মানচিত্র পার্স করার সময়, কোডের কোন বিভাগগুলি উপেক্ষা-তালিকাভুক্ত করা উচিত তা নির্ধারণ করতে Chrome DevTools এটি ব্যবহার করবে৷
নিচে একটি উৎপন্ন ফাইল out.js এর জন্য একটি উৎস মানচিত্র রয়েছে। দুটি মূল sources রয়েছে যা আউটপুট ফাইল তৈরিতে অবদান রেখেছে: foo.js এবং lib.js আগেরটি একটি ওয়েব সাইট ডেভেলপার লিখেছে এবং পরেরটি একটি কাঠামো যা তারা ব্যবহার করেছে।
{
"version" : 3,
"file": "out.js",
"sourceRoot": "",
"sources": ["foo.js", "lib.js"],
"sourcesContent": ["...", "..."],
"names": ["src", "maps", "are", "fun"],
"mappings": "A,AAAB;;ABCDE;"
}
sourcesContent এই দুটি মূল উত্সের জন্য অন্তর্ভুক্ত করা হয়েছে এবং Chrome DevTools ডিবাগার জুড়ে ডিফল্টরূপে এই ফাইলগুলি প্রদর্শন করবে:
- সোর্স ট্রিতে ফাইল হিসাবে।
- কুইক ওপেন ডায়ালগের ফলাফল হিসেবে।
- একটি ব্রেকপয়েন্টে বিরতি দেওয়ার সময় এবং পদক্ষেপ করার সময় ত্রুটি স্ট্যাক ট্রেসে ম্যাপ করা কল ফ্রেম অবস্থান হিসাবে।
তথ্যের একটি অতিরিক্ত অংশ রয়েছে যা এখন উৎস মানচিত্রে অন্তর্ভুক্ত করা যেতে পারে এই উৎসগুলির মধ্যে কোনটি প্রথম বা তৃতীয় পক্ষের কোড তা সনাক্ত করতে:
{
...
"sources": ["foo.js", "lib.js"],
"x_google_ignoreList": [1],
...
}
নতুন x_google_ignoreList ফিল্ডে sources অ্যারে উল্লেখ করে একটি একক সূচক রয়েছে: 1. এটি নির্দিষ্ট করে যে lib.js এ ম্যাপ করা অঞ্চলগুলি আসলে তৃতীয় পক্ষের কোড যা স্বয়ংক্রিয়ভাবে উপেক্ষা তালিকায় যোগ করা উচিত।
আরও জটিল উদাহরণে, নীচে দেখানো হয়েছে, সূচক 2, 4, এবং 5 উল্লেখ করে যে lib1.ts , lib2.coffee , এবং hmr.js এ ম্যাপ করা অঞ্চলগুলি হল সমস্ত তৃতীয়-পক্ষের কোড যা স্বয়ংক্রিয়ভাবে উপেক্ষা তালিকায় যোগ করা উচিত৷
{
...
"sources": ["foo.html", "bar.css", "lib1.ts", "baz.js", "lib2.coffee", "hmr.js"],
"x_google_ignoreList": [2, 4, 5],
...
}
আপনি যদি একজন ফ্রেমওয়ার্ক বা বান্ডলার ডেভেলপার হন, তাহলে নিশ্চিত করুন যে বিল্ড প্রক্রিয়া চলাকালীন উত্পন্ন সোর্স ম্যাপগুলিতে এই ক্ষেত্রটি অন্তর্ভুক্ত রয়েছে যাতে Chrome DevTools-এ এই নতুন ক্ষমতাগুলি অন্তর্ভুক্ত করা যায়৷
কৌণিক ভাষায় x_google_ignoreList
কৌণিক v14.1.0 অনুযায়ী, node_modules এবং webpack ফোল্ডারের বিষয়বস্তু "উপেক্ষা করতে" হিসেবে চিহ্নিত করা হয়েছে।
এটি একটি প্লাগইন তৈরি করে angular-cli এ পরিবর্তনের মাধ্যমে অর্জন করা হয়েছিল যা ওয়েবপ্যাকের Compiler মডিউলের সাথে সংযুক্ত থাকে
ওয়েবপ্যাক প্লাগইন যা আমাদের প্রকৌশলীরা PROCESS_ASSETS_STAGE_DEV_TOOLING পর্যায়ে হুক তৈরি করে এবং ওয়েবপ্যাক তৈরি করা এবং ব্রাউজার লোড হওয়া চূড়ান্ত সম্পদগুলির জন্য উত্স মানচিত্রে x_google_ignoreList ক্ষেত্রটি পূরণ করে৷
const map = JSON.parse(mapContent) as SourceMap;
const ignoreList = [];
for (const [index, path] of map.sources.entries()) {
if (path.includes('/node_modules/') || path.startsWith('webpack/')) {
ignoreList.push(index);
}
}
map[`x_google_ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
লিঙ্ক করা স্ট্যাক ট্রেস
স্ট্যাক ট্রেসগুলি "আমি এখানে কীভাবে এলাম" প্রশ্নের উত্তর দেয়, কিন্তু প্রায়শই এটি মেশিনের দৃষ্টিকোণ থেকে হয়, এবং অগত্যা এমন কিছু নয় যা বিকাশকারীর দৃষ্টিকোণ বা অ্যাপ্লিকেশন রানটাইমের তাদের মানসিক মডেলের সাথে মেলে। এটি বিশেষত সত্য যখন কিছু অপারেশন পরে অ্যাসিঙ্ক্রোনাসভাবে ঘটতে নির্ধারিত হয়: এটি এখনও "মূল কারণ" বা এই ধরনের ক্রিয়াকলাপের সময়সূচীর দিকটি জানা আকর্ষণীয় হতে পারে, তবে এটি ঠিক এমন কিছু যা একটি অ্যাসিঙ্ক্রোনাস স্ট্যাক ট্রেসের অংশ হবে না।
V8 অভ্যন্তরীণভাবে এই ধরনের অ্যাসিঙ্ক্রোনাস কাজগুলির ট্র্যাক রাখার জন্য একটি পদ্ধতি রয়েছে যখন স্ট্যান্ডার্ড ব্রাউজার শিডিউলিং আদিম ব্যবহার করা হয়, যেমন setTimeout । এই ক্ষেত্রে এটি ডিফল্টরূপে করা হয়, তাই বিকাশকারীরা ইতিমধ্যেই এগুলি পরিদর্শন করতে পারে! কিন্তু আরও জটিল প্রকল্পগুলিতে, এটি ততটা সহজ নয়, বিশেষ করে যখন আরও উন্নত সময়সূচী প্রক্রিয়া সহ একটি ফ্রেমওয়ার্ক ব্যবহার করা হয়-উদাহরণস্বরূপ, যেটি জোন ট্র্যাকিং, কাস্টম টাস্ক সারিবদ্ধ করা বা আপডেটগুলিকে বিভিন্ন ইউনিটে বিভক্ত করে যা চালানো হয়। সময়
এটিকে মোকাবেলা করার জন্য, DevTools console অবজেক্টে "Async Stack Tagging API" নামক একটি প্রক্রিয়া উন্মোচন করে, যা ফ্রেমওয়ার্ক ডেভেলপারদের যেখানে ক্রিয়াকলাপগুলি নির্ধারিত হয় এবং যেখানে এই ক্রিয়াকলাপগুলি সম্পাদিত হয় উভয় অবস্থানের ইঙ্গিত দিতে সক্ষম করে৷
Async স্ট্যাক ট্যাগিং API
অ্যাসিঙ্ক স্ট্যাক ট্যাগিং ছাড়া, কোডের স্ট্যাক ট্রেসগুলি যা অ্যাসিঙ্ক্রোনাসভাবে ফ্রেমওয়ার্কের দ্বারা জটিল উপায়ে কার্যকর করা হয়, যেখানে এটি নির্ধারিত ছিল সেই কোডের সাথে কোনও সংযোগ ছাড়াই দেখায়৷
Async স্ট্যাক ট্যাগিংয়ের সাথে এই প্রসঙ্গটি প্রদান করা সম্ভব, এবং স্ট্যাক ট্রেসটি এইরকম দেখায়:
এটি অর্জন করতে, console.createTask() নামে একটি নতুন console পদ্ধতি ব্যবহার করুন যা Async স্ট্যাক ট্যাগিং API প্রদান করে। এর স্বাক্ষর নিম্নরূপ:
interface Console {
createTask(name: string): Task;
}
interface Task {
run<T>(f: () => T): T;
}
console.createTask() চালু করা একটি Task ইন্সট্যান্স প্রদান করে যা আপনি পরে অ্যাসিঙ্ক কোড চালানোর জন্য ব্যবহার করতে পারেন।
// Task Creation
const task = console.createTask(name);
// Task Execution
task.run(f);
অ্যাসিঙ্ক্রোনাস অপারেশনগুলিও নেস্ট করা যেতে পারে এবং "মূল কারণগুলি" ক্রমানুসারে স্ট্যাক ট্রেসে প্রদর্শিত হবে।
টাস্ক যেকোন সংখ্যক বার চালানো যেতে পারে এবং কাজের পেলোড প্রতিটি রানের মধ্যে আলাদা হতে পারে। টাস্ক অবজেক্টটি আবর্জনা সংগ্রহ না করা পর্যন্ত সময়সূচী সাইটের কল স্ট্যাকটি মনে রাখা হবে।
কৌণিক মধ্যে Async স্ট্যাক ট্যাগিং API
Angular-এ, NgZone - Angular এর এক্সিকিউশন প্রেক্ষাপটে পরিবর্তন করা হয়েছে যা অ্যাসিঙ্ক টাস্ক জুড়ে থাকে।
একটি টাস্ক শিডিউল করার সময় এটি উপলব্ধ হলে console.createTask() ব্যবহার করে। ফলে Task ইনস্ট্যান্স আরও ব্যবহারের জন্য সংরক্ষণ করা হয়। টাস্কটি চালু করার পরে, NgZone এটি চালানোর জন্য সঞ্চিত Task ইনস্ট্যান্স ব্যবহার করবে।
এই পরিবর্তনগুলি Angular এর NgZone 0.11.8-এ পুল অনুরোধ #46693 এবং #46958 এর মাধ্যমে অবতরণ করেছে।
বন্ধুত্বপূর্ণ কল ফ্রেম
একটি প্রকল্প তৈরি করার সময় ফ্রেমওয়ার্কগুলি প্রায়শই সমস্ত ধরণের টেমপ্লেটিং ভাষা থেকে কোড তৈরি করে, যেমন কৌণিক বা জেএসএক্স টেমপ্লেট যা এইচটিএমএল-দেখানো কোডকে প্লেইন জাভাস্ক্রিপ্টে পরিণত করে যা অবশেষে ব্রাউজারে চলে। কখনও কখনও, এই ধরণের জেনারেট করা ফাংশনগুলিকে এমন নাম দেওয়া হয় যা খুব বন্ধুত্বপূর্ণ নয় — হয় একক অক্ষরের নামগুলি ছোট করার পরে বা কিছু অস্পষ্ট বা অপরিচিত নাম এমনকি যখন সেগুলি না থাকে।
অ্যাঙ্গুলারে স্ট্যাক ট্রেসে AppComponent_Template_app_button_handleClick_1_listener এর মতো নাম সহ কল ফ্রেম দেখা অস্বাভাবিক কিছু নয়।
এটি মোকাবেলা করার জন্য, Chrome DevTools এখন সোর্স ম্যাপের মাধ্যমে এই ফাংশনগুলির পুনঃনামকরণ সমর্থন করে৷ যদি একটি উত্স মানচিত্রে একটি ফাংশন স্কোপ শুরু করার জন্য একটি নাম এন্ট্রি থাকে (অর্থাৎ, প্যারামিটার তালিকার বাম প্যারেন), কল ফ্রেমে স্ট্যাক ট্রেসে সেই নামটি প্রদর্শন করা উচিত।
কৌণিক মধ্যে বন্ধুত্বপূর্ণ কল ফ্রেম
অ্যাঙ্গুলারে কল ফ্রেমের নাম পরিবর্তন করা একটি চলমান প্রচেষ্টা। আমরা আশা করি সময়ের সাথে সাথে এই উন্নতিগুলি ধীরে ধীরে অবতরণ করবে।
লেখকদের লেখা HTML টেমপ্লেটগুলি পার্স করার সময়, কৌণিক কম্পাইলার টাইপস্ক্রিপ্ট কোড তৈরি করে, যা অবশেষে জাভাস্ক্রিপ্ট কোডে স্থানান্তরিত হয় যা ব্রাউজার লোড করে এবং রান করে।
এই কোড জেনারেশন প্রক্রিয়ার অংশ হিসেবে সোর্স ম্যাপও তৈরি করা হয়। আমরা বর্তমানে উত্স মানচিত্রের "নাম" ক্ষেত্রে ফাংশনের নাম অন্তর্ভুক্ত করার উপায়গুলি অন্বেষণ করছি, এবং জেনারেট করা কোড এবং আসল কোডের মধ্যে ম্যাপিংগুলিতে সেই নামগুলি উল্লেখ করছি৷
উদাহরণস্বরূপ, যদি একটি ইভেন্ট শ্রোতার জন্য একটি ফাংশন তৈরি করা হয় এবং এটির নামটি হয় বন্ধুত্বহীন বা মিনিফিকেশনের সময় সরানো হয়, উত্স মানচিত্রগুলি এখন "নাম" ক্ষেত্রে এই ফাংশনের জন্য আরও বন্ধুত্বপূর্ণ নাম এবং ফাংশনের শুরুতে ম্যাপিং অন্তর্ভুক্ত করতে পারে। scope এখন এই নামটি উল্লেখ করতে পারে (অর্থাৎ, প্যারামিটার তালিকার বাম বন্ধনী)। Chrome DevTools তারপর স্ট্যাক ট্রেসে কল ফ্রেমের নাম পরিবর্তন করতে এই নামগুলি ব্যবহার করবে৷
সামনে দেখ
আমাদের কাজ যাচাই করার জন্য একটি পরীক্ষামূলক পাইলট হিসাবে Angular ব্যবহার করা একটি চমৎকার অভিজ্ঞতা হয়েছে। আমরা ফ্রেমওয়ার্ক ডেভেলপারদের কাছ থেকে শুনতে চাই এবং এই এক্সটেনশন পয়েন্টগুলিতে আমাদের প্রতিক্রিয়া জানাতে চাই ।
আমরা অন্বেষণ করতে চাই যে আরো এলাকা আছে. বিশেষ করে, DevTools-এ প্রোফাইলিংয়ের অভিজ্ঞতা কীভাবে উন্নত করা যায়।