ignoreList সোর্স ম্যাপ এক্সটেনশনের মাধ্যমে Chrome DevTools-এ ডিবাগিংয়ের অভিজ্ঞতা উন্নত করুন।
ডেভেলপারদের ডিবাগিং অভিজ্ঞতা উন্নত করতে Chrome DevTools সোর্স ম্যাপে ignoreList ফিল্ড পার্স করে। Console-এ নিম্নলিখিত স্ট্যাক ট্রেস দেখুন। DevTools অটোমেটিক সব থার্ড-পার্টি ফ্রেম লুকিয়ে দেয় এবং শুধু আপনার কোডের সাথে প্রাসঙ্গিক ফ্রেমগুলি দেখায়।
ignoreList-কে সাপোর্ট করার আগে ও পরে স্ট্যাক ট্রেস কেমন দেখায় তা এই ছবিতে দেখানো হয়েছে। ডিবাগ করার সময় সমস্যা দ্রুত পিনপয়েন্ট করতে আপনাকে সাহায্য করার জন্য, পরেরটি অপ্রাসঙ্গিক থার্ড-পার্টি ফ্রেম লুকিয়ে রাখে।
ignoreList কী?
সোর্স ম্যাপ এক্সটেনশন হল অতিরিক্ত ফিল্ড যা সোর্স ম্যাপ সম্পর্কে পরিপূরক তথ্য স্টোর করে। এই ধরনের ফিল্ডের শুরুতে x_ থাকে।
Chrome DevTools ignoreList ফিল্ড (যদি দেওয়া থাকে) ব্যবহার করে, যাতে জেনারেট করা কোড ফিল্টার করা যায় এবং ওয়েব ডেভেলপাররা শুধুমাত্র তাদের লেখা কোডে ফোকাস করতে পারেন। যেমন, নিম্নলিখিত সোর্স ম্যাপটি দেখুন।
/* demo.js.map */
{
"version": 3,
"mappings": "AAAAA, ..."
"sources": [
"app.js",
"components/Button.ts",
"node_modules/.../framework.js",
"node_modules/.../library.js",
...
],
"ignoreList": [2, 3],
...
}
sources ফিল্ডে mappings এন্ট্রির মাধ্যমে ব্যবহার করা আসল সোর্সের তালিকা দেখানো হয়। ম্যাপিং কীভাবে কাজ করে তা জানতে সোর্স ম্যাপ কী? ভিডিওটি দেখুন।
node_modules/…/frameworks.js এবং node_modules/.../library.js ফাইল দুটি থার্ড-পার্টি স্ক্রিপ্ট হলে, sources ফিল্ডে তাদের অবস্থান নির্দেশ করতে আপনি ignoreList ফিল্ড নির্দিষ্ট করতে পারেন। Chrome DevTools এই তথ্য প্রয়োগ করে ইগনোর করা ফাইল থেকে ফ্রেম লুকাবে।
ব্রেকপয়েন্ট ডিবাগিংয়ের সময় Sources প্যানেলে কল স্ট্যাক-এর ক্ষেত্রেও এটি প্রযোজ্য।
DevTools-এ ডিফল্ট হিসেবে একটি অতিরিক্ত সেটিং চালু করা থাকে: উপেক্ষা তালিকাতে পরিচিত থার্ড-পার্টি স্ক্রিপ্ট অটোমেটিক যোগ করুন। আপনি এটি DevTools > সেটিংস > ইগনোর লিস্ট-এ খুঁজে পাবেন।
ignoreList সোর্স ম্যাপ ফিল্ডের মাধ্যমে, আপনার কোডে ফোকাস করার জন্য সোর্স প্যানেলে এড়িয়ে যাওয়া ফাইল লুকানোর বিকল্প আপনার কাছে আছে।
ignoreList কীভাবে পপুলেট করবেন
সুসংবাদ হল, Angular ও Nuxt-এর মতো ফ্রেমওয়ার্ক আগে থেকেই তাদের সোর্স ম্যাপে ignoreList কনফিগার করে। লেটেস্ট ভার্সনে আপগ্রেড করুন এবং এটি কোনও সমস্যা ছাড়াই কাজ করবে। আপনি সহজেই স্ট্যাক ট্রেস সংক্রান্ত উন্নতি দেখতে পাবেন।
অন্যদিকে, Vite এবং Rollup-এর মতো বিল্ড টুল এটি কনফিগার করার জন্য সেটিংস প্রদান করে। এছাড়াও, এর জন্য একটি webpack প্লাগ-ইন আছে।
আপনি যদি ফ্রেমওয়ার্ক বা লাইব্রেরি মেনটেনার হন, তাহলে আপনার ব্যবহারকারীদের ডিবাগিং অভিজ্ঞতা উন্নত করতে এইসব সেটিংস কীভাবে প্রয়োগ করবেন তা বোঝা জরুরি। Angular এবং Nuxt কীভাবে পর্দার আড়ালে থেকে এটি করেছে তা জানতে নিম্নলিখিত বিভাগটি দেখুন।
আপনার পছন্দের ফ্রেমওয়ার্ক ও বিল্ড টুল যদি এখনও এটি সাপোর্ট না করে, তাহলে কী হবে?
এই নতুন সেটিংস চালু করার জন্য আমরা ফ্রেমওয়ার্কের সাথে সক্রিয়ভাবে কাজ করি এবং টুল তৈরি করি। এছাড়াও, এই ফিচার সম্পর্কে রক্ষণাবেক্ষণকারীদের বিজ্ঞপ্তি পাঠিয়ে আপনি সাহায্য করতে পারেন। যেমন, আপনি তাদের রিপোজিটরিতে কোনও সমস্যা ফাইল করতে পারেন।
অন্যথায়, একই ফলাফল পেতে, DevTools > সোর্স > পৃষ্ঠা প্যানে ফাইল ট্রি থেকে সরাসরি ইগনোর লিস্টে অপ্রাসঙ্গিক স্ক্রিপ্ট যোগ করতে পারেন।
কেস স্টাডি: Nuxt ও Angular ইমপ্লিমেন্টেশন
নিচে দেওয়া দুটি কেস স্টাডি দেখুন।
Nuxt-এ ignoreList
Nuxt v3.3.1 থেকে শুরু করে, node_modules এবং Nuxt buildDir-এর কন্টেন্ট "ডিবাগার দ্বারা উপেক্ষা করা হবে" হিসেবে চিহ্নিত করা হয়েছে।
এটি Vite ও Rollup ব্যবহার করে Nuxt-এর বিল্ড কনফিগারেশনে পরিবর্তন করার মাধ্যমে করা হয়েছে:
/* vite.config.ts */
const ctx: ViteBuildContext = {
config: vite.mergeConfig(
build: {
rollupOptions: {
output: {
sourcemapIgnoreList: (relativeSourcePath) => {
return relativeSourcePath.includes('/node_modules/') || relativeSourcePath.includes(ctx.nuxt.options.buildDir)
},
}
})
DevTools টিম Vite ও Nuxt টিমকে ধন্যবাদ জানাতে চায়, কারণ তাদের জন্যই এটি সম্ভব হয়েছে। আপনার প্রচেষ্টা ও সহযোগিতার জন্য আমরা কৃতজ্ঞ, যা এই প্রয়োগের সাফল্যের জন্য অপরিহার্য ছিল। Vite ও Nuxt টিমকে তাদের কন্ট্রিবিউশনের জন্য আবারও ধন্যবাদ!
Angular-এ ignoreList
Angular v14.1.0 থেকে শুরু করে, node_modules এবং webpack ফোল্ডারের কন্টেন্ট "এড়িয়ে যেতে হবে" হিসেবে চিহ্নিত করা হয়েছে।
angular-cli-এ পরিবর্তন করার মাধ্যমে এটি করা হয়েছে, যার জন্য ওয়েবপ্যাকের Compiler মডিউলে হুক করে এমন প্লাগ-ইন তৈরি করা হয়েছে।
আমাদের ইঞ্জিনিয়ারদের তৈরি করা webpack প্লাগ-ইন PROCESS_ASSETS_STAGE_DEV_TOOLING স্টেজে হুক করে এবং webpack-এর জেনারেট করা ও ব্রাউজারের লোড করা ফাইনাল অ্যাসেট দিয়ে সোর্স ম্যাপের 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[`ignoreList`] = ignoreList;
compilation.updateAsset(name, new RawSource(JSON.stringify(map)));
DevTools-এ অন্যান্য Angular ডিবাগিং সংক্রান্ত উন্নতি সম্পর্কে আরও জানতে, কেস স্টাডি: DevTools-এর মাধ্যমে আরও ভাল Angular ডিবাগিং দেখুন।
Chrome DevTools টিম, Angular টিমকে এই প্রয়োগের সাফল্যের জন্য তাদের অমূল্য অবদানের জন্য কৃতজ্ঞতা জানাতে চায়। আপনার প্রচেষ্টা ও সহযোগিতা অত্যন্ত গুরুত্বপূর্ণ ছিল এবং আপনার কঠোর পরিশ্রমের জন্য আমরা কৃতজ্ঞ। Angular টিমকে ধন্যবাদ, এটি সম্ভব করার জন্য!