মেমরি ইন্সপেক্টরের সাথে পরিচয়

Kim-Anh Tran

এই নিবন্ধটি Chrome 91-এ অবতরণ করা মেমরি ইন্সপেক্টরের পরিচয় দেয়। এটি আপনাকে আপনার ArrayBuffer, TypedArray, DataView এবং Wasm মেমরি পরিদর্শন করতে দেয়।

ভূমিকা

কখনও আপনার ArrayBuffer মধ্যে ডেটা উপলব্ধি করতে চেয়েছিলেন? মেমরি ইন্সপেক্টরের আগে, DevTools শুধুমাত্র ArrayBuffers-এ সীমিত অন্তর্দৃষ্টির জন্য অনুমোদিত। একটি ডিবাগিং সেশনের সময় স্কোপ ভিউ থেকে পরিদর্শন অ্যারে বাফারের মধ্যে একক মানগুলির একটি তালিকা দেখার মধ্যে সীমাবদ্ধ ছিল, যা সম্পূর্ণরূপে ডেটা বোঝা কঠিন করে তুলেছিল। একটি উদাহরণ হিসাবে, স্কোপ ভিউ বাফারটিকে নীচের উদাহরণে অ্যারের প্রসারণযোগ্য রেঞ্জ হিসাবে দেখায়:

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

মেমরি ইন্সপেক্টর ব্যবহার করে মান পরিদর্শন করা

Chrome 91-এর সাথে আমরা মেমরি ইন্সপেক্টর প্রবর্তন করছি, অ্যারে বাফার পরিদর্শন করার জন্য একটি টুল। আপনি আগে বাইনারি ডেটা দেখার জন্য মেমরি পরিদর্শন সরঞ্জামগুলি দেখে থাকতে পারেন, যা তাদের ঠিকানা সহ একটি গ্রিডে বাইনারি সামগ্রী দেখায় এবং যা অন্তর্নিহিত মানগুলি ব্যাখ্যা করার বিভিন্ন উপায় অফার করে। এটিই মেমরি ইন্সপেক্টর আপনার কাছে নিয়ে আসছে। মেমরি ইন্সপেক্টরের সাহায্যে আপনি এখন বিষয়বস্তু দেখতে পারেন, এটিতে নেভিগেট করতে পারেন এবং হাতে থাকা মানগুলিকে ব্যাখ্যা করার জন্য ব্যবহার করার জন্য প্রকারগুলি নির্বাচন করতে পারেন৷ এটি সরাসরি বাইটের পাশে ASCII মানগুলি দেখায় এবং এটি ব্যবহারকারীকে বিভিন্ন প্রান্তিকতা নির্বাচন করতে দেয়। নীচের কর্মে মেমরি ইন্সপেক্টর দেখুন:

এটা চেষ্টা করে দেখতে চান? কিভাবে মেমরি ইন্সপেক্টর খুলতে হয় এবং আপনার অ্যারে বাফার (বা TypedArray, DataView, বা Wasm মেমরি) দেখতে এবং কীভাবে এটি ব্যবহার করতে হয় সে সম্পর্কে আরও তথ্য জানতে, মেমরি ইন্সপেক্টরে আমাদের ডকুমেন্টেশনে যান। এই খেলনা উদাহরণগুলিতে এটি ব্যবহার করে দেখুন (JS, Wasm, এবং C++ এর জন্য)।

মেমরি ইন্সপেক্টর ডিজাইন করা

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

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

LinearMemoryInspector কম্পোনেন্ট হল প্যারেন্ট কম্পোনেন্ট যা মেমরি ইন্সপেক্টরের সমস্ত উপাদান তৈরি করে এমন সাবকম্পোনেন্টগুলিকে একত্রিত করে। এটি মূলত একটি Uint8Array এবং একটি address নেয় এবং প্রতিটি পরিবর্তনে এটি তার বাচ্চাদের কাছে ডেটা প্রচার করে, যা একটি পুনরায় রেন্ডারকে ট্রিগার করে। LinearMemoryInspector নিজেই তিনটি সাবকম্পোনেন্ট রেন্ডার করে:

1. LinearMemoryViewer (মানগুলি দেখানো হচ্ছে),
2. LinearMemoryNavigator (নেভিগেশন অনুমতি দেয়), এবং
3. LinearMemoryValueInterpreter (অন্তর্নিহিত ডেটার বিভিন্ন ধরনের ব্যাখ্যা দেখানো হচ্ছে)।

পরেরটি নিজেই একটি মূল উপাদান, যা ValueInterpreterDisplay (মানগুলি দেখানো) এবং ValueInterpreterSettings (ডিসপ্লেতে কোন ধরনের দেখতে হবে তা নির্বাচন করে) রেন্ডার করে।

প্রতিটি উপাদান শুধুমাত্র UI এর একটি ছোট উপাদানকে উপস্থাপন করার জন্য ডিজাইন করা হয়েছে, যেমন প্রয়োজনে উপাদানগুলি পুনরায় ব্যবহার করা যেতে পারে। যখনই একটি কম্পোনেন্টে নতুন ডেটা সেট করা হয়, তখন একটি রি-রেন্ডারিং শুরু হয়, যা কম্পোনেন্টে সেট করা ডেটাতে প্রতিফলিত পরিবর্তন দেখায়। আমাদের উপাদানগুলির সাথে একটি কর্মপ্রবাহের একটি উদাহরণ নীচে দেখানো হয়েছে, যেখানে ব্যবহারকারী ঠিকানা বারে ঠিকানা পরিবর্তন করছেন, যা নতুন ডেটা সেট করে একটি আপডেট ট্রিগার করে, এই ক্ষেত্রে ঠিকানাটি দেখতে হবে:

LinearMemoryInspector নিজেকে LinearMemoryNavigator এ একজন শ্রোতা হিসেবে যুক্ত করে। addressChanged ফাংশনটি address-changed ইভেন্টে ট্রিগার করা হয়। যত তাড়াতাড়ি ব্যবহারকারী এখন ঠিকানা ইনপুট সম্পাদনা করছেন, এটি পূর্বোক্ত ইভেন্টটি পাঠায়, যেমন addressChanged ফাংশন বলা হয়। এই ফাংশনটি এখন ঠিকানাটিকে অভ্যন্তরীণভাবে সংরক্ষণ করে, এবং একটি data(address, ..) সেটার ব্যবহার করে এর সাবকম্পোনেন্ট আপডেট করে। সাবকম্পোনেন্টগুলি ঠিকানাটি অভ্যন্তরীণভাবে সংরক্ষণ করে এবং তাদের মতামতগুলিকে পুনরায় রেন্ডার করে, সেই নির্দিষ্ট ঠিকানায় বিষয়বস্তু দেখায়।

ডিজাইন লক্ষ্য: কর্মক্ষমতা এবং মেমরি খরচ বাফার আকার স্বাধীন করা

মেমরি ইন্সপেক্টরের ডিজাইনের সময় একটি দিক যা আমাদের মনে ছিল তা হল মেমরি ইন্সপেক্টরের কর্মক্ষমতা বাফার আকার থেকে স্বাধীন হওয়া উচিত।

আপনি আগের অংশে দেখেছেন, LinearMemoryInspector উপাদানটি মান রেন্ডার করতে একটি UInt8Array নেয়। একই সময়ে আমরা নিশ্চিত করতে চেয়েছিলাম যে মেমরি ইন্সপেক্টরকে পুরো ডেটা ধরে রাখতে হবে না, কারণ মেমরি ইন্সপেক্টর শুধুমাত্র এটির একটি অংশ দেখায় (যেমন Wasm মেমরি 4GB এর মতো বড় হতে পারে, এবং আমরা চাই না মেমরি ইন্সপেক্টরের মধ্যে 4GB সংরক্ষণ করতে)।

সুতরাং মেমরি ইন্সপেক্টরের গতি এবং মেমরি খরচ আমাদের দেখানো প্রকৃত বাফার থেকে স্বাধীন তা নিশ্চিত করার জন্য, আমরা LinearMemoryInspector উপাদানটিকে শুধুমাত্র মূল বাফারের একটি সাবরেঞ্জ রাখতে দিই।

এটি কাজ করার জন্য, LinearMemoryInspector প্রথমে আরও দুটি আর্গুমেন্ট নিতে হবে: একটি memoryOffset এবং একটি outerMemoryLength । memoryOffset অফসেট নির্দেশ করে, যেখানে পাস করা Uint8Array শুরু হয় এবং সঠিক ডেটা ঠিকানাগুলি রেন্ডার করার প্রয়োজন হয়। outerMemoryLength হল আসল বাফারের দৈর্ঘ্য, এবং আমরা কি পরিসীমা দেখাতে পারি তা বোঝার জন্য প্রয়োজন:

এই তথ্যের সাহায্যে আমরা নিশ্চিত করতে পারি যে আমরা এখনও আগের মতো একই দৃশ্য রেন্ডার করতে পারি ( address চারপাশের বিষয়বস্তু), প্রকৃতপক্ষে সমস্ত ডেটা জায়গায় না রেখে। তাহলে কি করতে হবে যদি একটি ভিন্ন ঠিকানার অনুরোধ করা হয়, যা একটি ভিন্ন পরিসরের মধ্যে পড়ে? সেই ক্ষেত্রে, LinearMemoryInspector একটি RequestMemoryEvent ট্রিগার করে, যা রাখা বর্তমান পরিসর আপডেট করে; একটি উদাহরণ নীচে দেখানো হয়েছে:

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

ওহ, এবং আপনি কি জানেন? এমনকি আপনি Wasm এবং C/C++ কোডে মেমরি পরিদর্শন করতে পারেন

মেমরি ইন্সপেক্টর জাভাস্ক্রিপ্টে শুধুমাত্র ArrayBuffers এর জন্যই উপলব্ধ নয়, তবে C/C++ রেফারেন্স/পয়েন্টার দ্বারা নির্দেশিত Wasm মেমরি এবং মেমরি পরিদর্শনের জন্যও ব্যবহার করা যেতে পারে (আমাদের DWARF-এক্সটেনশন ব্যবহার করে - আপনি যদি এখনও না করে থাকেন তবে এটি একবার চেষ্টা করে দেখুন! এখানে আধুনিক সরঞ্জামগুলির সাথে ডিবাগিং ওয়েব অ্যাসেম্বলি দেখুন। ওয়েবে C++ এর নেটিভ ডিবাগিংয়ের জন্য মেমরি ইন্সপেক্টরের একটি ছোট দৃষ্টিভঙ্গি:

উপসংহার

এই নিবন্ধটি মেমরি ইন্সপেক্টর উপস্থাপন করেছে এবং এর নকশার একটি আভাস দেখিয়েছে। আমরা আশা করি যে মেমরি ইন্সপেক্টর আপনাকে আপনার ArrayBuffer এ কী ঘটছে তা বুঝতে সাহায্য করবে :-)। আপনার যদি এটিকে উন্নত করার পরামর্শ থাকে তবে আমাদের জানান এবং একটি বাগ ফাইল করুন !

প্রিভিউ চ্যানেল ডাউনলোড করুন

আপনার ডিফল্ট ডেভেলপমেন্ট ব্রাউজার হিসেবে Chrome Canary , Dev বা Beta ব্যবহার করার কথা বিবেচনা করুন। এই পূর্বরূপ চ্যানেলগুলি আপনাকে সর্বশেষ DevTools বৈশিষ্ট্যগুলিতে অ্যাক্সেস দেয়, অত্যাধুনিক ওয়েব প্ল্যাটফর্ম API পরীক্ষা করে এবং আপনার ব্যবহারকারীদের আগে আপনার সাইটে সমস্যাগুলি খুঁজে পায়!

Chrome DevTools টিমের সাথে যোগাযোগ করা হচ্ছে

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

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