C/C++ ডিবাগিংয়ের জন্য মেমরি ইন্সপেক্টরকে প্রসারিত করা হচ্ছে

Michal Pitr

Chrome 92-এ, আমরা মেমরি ইন্সপেক্টর প্রবর্তন করেছি, লিনিয়ার মেমরি বাফার পরিদর্শনের জন্য একটি টুল। এই নিবন্ধে, আমরা আলোচনা করব কিভাবে আমরা C/C++ ডিবাগিং-এর জন্য পরিদর্শককে উন্নত করেছি এবং সেই পথে যে প্রযুক্তিগত চ্যালেঞ্জগুলির মুখোমুখি হয়েছিল।

আপনি যদি C/C++ ডিবাগিং এবং মেমরি ইন্সপেক্টরে নতুন হন তবে এই কয়েকটি প্রাসঙ্গিক ব্লগ পোস্ট:

• গভীর মেমরি ডিবাগিং আগ্রহী? মেমরি ইন্সপেক্টরের পরিচয় দেখুন।
• টুলগুলির সম্পূর্ণ C/C++ ডিবাগিং স্যুটের একটি ভূমিকা চান? আধুনিক সরঞ্জামগুলির সাথে ডিবাগিং WASM এবং দ্রুত ওয়েব অ্যাসেম্বলি ডিবাগিং দেখুন৷

ভূমিকা

মেমরি ইন্সপেক্টর আপনাকে লিনিয়ার মেমরি বাফারের জন্য আরও শক্তিশালী ডিবাগিং বিকল্প সরবরাহ করে। C/C++ এর ক্ষেত্রে, আপনি WebAssembly মেমরিতে C/C++ মেমরির বস্তুগুলি পরিদর্শন করতে পারেন।

আশেপাশের WebAssembly মেমরির মধ্যে আপনার অবজেক্টের বাইট চিনতে পারাটা ছিল একটা বেদনার বিষয়। আপনাকে অবজেক্টের আকার জানতে হবে এবং অবজেক্টের শুরু থেকে বাইট গণনা করতে হবে। নীচের স্ক্রিনশটে, একটি 10-উপাদান int32 অ্যারের প্রথম বাইট নির্বাচন করা হয়েছে কিন্তু অন্য কোন বাইটগুলি অ্যারের অন্তর্গত তা অবিলম্বে স্পষ্ট নয়। আপনি যদি বস্তুর অন্তর্গত সমস্ত বাইটকে অবিলম্বে চিনতে পারেন তবে কি ভাল হবে না?

মেমরি ইন্সপেক্টরে অবজেক্ট হাইলাইটিং

Chrome 107 থেকে শুরু করে, মেমরি ইন্সপেক্টর একটি C/C++ মেমরি অবজেক্টের সমস্ত বাইট হাইলাইট করে। এটি আপনাকে আশেপাশের স্মৃতি থেকে আলাদা করে বলতে সাহায্য করে।

দ্রষ্টব্য: এটি একটি পূর্বরূপ বৈশিষ্ট্য ইতিমধ্যেই Chrome ক্যানারিতে উপলব্ধ৷

মেমরি ইন্সপেক্টরকে অ্যাকশনে দেখতে নীচের ভিডিওটি দেখুন। আপনি মেমরি ইন্সপেক্টরে অ্যারে x প্রকাশ করার সাথে সাথে, হাইলাইট করা মেমরি মেমরি ভিউয়ারে একটি নতুন চিপ সহ এটির ঠিক উপরে প্রদর্শিত হবে। এই চিপ আপনাকে হাইলাইট করা মেমরির নাম এবং প্রকার মনে করিয়ে দেয়। বস্তুর মেমরিতে লাফ দিতে চিপে ক্লিক করুন। আপনি যদি চিপের উপর হোভার করেন, একটি ক্রস আইকন প্রদর্শিত হবে - হাইলাইটটি সরাতে এটিতে ক্লিক করুন।

আপনি যে বস্তুটি পরিদর্শন করেন তার বাইরে একটি বাইট নির্বাচন করলে, হাইলাইটটি আপনাকে বিভ্রান্ত না করতে ডিফোকাস করে। এটিকে পুনরায় ফোকাস করতে, বস্তুর বাইট বা চিপে আবার ক্লিক করুন।

দ্রষ্টব্য: সেরা ডিবাগিং অভিজ্ঞতার জন্য, কম্পাইলার অপ্টিমাইজেশন অক্ষম করুন। আমাদের দ্রুত WebAssembly ডিবাগিং ব্লগ পোস্টে আরও জানুন।

অবজেক্ট হাইলাইট করার জন্য সমর্থন অ্যারেতে সীমাবদ্ধ নয়। আপনি স্ট্রাকট, অবজেক্ট এবং পয়েন্টারগুলিও পরিদর্শন করতে পারেন। এই পরিবর্তনগুলি আপনার C/C++ অ্যাপগুলির মেমরি অন্বেষণকে আগের চেয়ে সহজ করে তোলে!

এইটা একবার চেষ্টা করে দেখতে চাও? তোমার দরকার হবে:

• Chrome 107 বা আরও নতুন।
• C/C++ DWARF এক্সটেনশন ইনস্টল করুন।
• DevTools > এ DWARF ডিবাগিং সক্ষম করুন সেটিংস > পরীক্ষা-নিরীক্ষা > WebAssemble ডিবাগিং: DWARF সমর্থন সক্ষম করুন ।
• এই ডেমো পৃষ্ঠা খুলুন.
• পৃষ্ঠায় নির্দেশাবলী অনুসরণ করুন.

ডিবাগিং উদাহরণ

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

#include <iostream>

int main()
{
    int numbers[] = {1, 2, 3, 4};
    int *ptr = numbers;
    int arraySize = sizeof(numbers)/sizeof(int);
    int* lastNumber = ptr + arraySize;  // Can you notice the bug here?
    std::cout <<../ *lastNumber <<../ '\n';
    return 0;
}

সমস্যাটি ডিবাগ করতে প্রোগ্রামার মেমরি ইন্সপেক্টরের দিকে ফিরে যায়। আপনি এই ডেমো বরাবর অনুসরণ করতে পারেন! তারা প্রথমে মেমরি ইন্সপেক্টরে অ্যারেটি পরিদর্শন করে এবং দেখে যে numbers অ্যারেটিতে প্রত্যাশিত হিসাবে শুধুমাত্র পূর্ণসংখ্যা 1 , 2 , 3 এবং 4 রয়েছে।

এর পরে, তারা স্কোপ ফলক থেকে lastNumber ভেরিয়েবলটি প্রকাশ করে এবং লক্ষ্য করে যে পয়েন্টারটি অ্যারের বাইরে একটি পূর্ণসংখ্যার দিকে নির্দেশ করে! এই জ্ঞান দিয়ে সজ্জিত, প্রোগ্রামার বুঝতে পারে যে তারা পয়েন্টার অফসেট লাইন 8 এ ভুল গণনা করেছে। এটি ptr + arraySize - 1 হওয়া উচিত ছিল।

যদিও এটি একটি খেলনা উদাহরণ, এটি ব্যাখ্যা করে যে কীভাবে অবজেক্ট হাইলাইটিং কার্যকরভাবে মেমরি অবজেক্টের আকার এবং অবস্থান প্রকাশ করে, যা আপনাকে আপনার C/C++ অ্যাপের মেমরির ভিতরে কী ঘটছে তা আরও ভালভাবে বুঝতে সাহায্য করতে পারে।

DevTools কীভাবে হাইলাইট করতে হবে তা বের করে

এই বিভাগে, আমরা C/C++ ডিবাগিং সক্ষম করে এমন সরঞ্জামগুলির ইকোসিস্টেম দেখব। বিশেষভাবে, আপনি শিখবেন কিভাবে DevTools, V8, C/C++ DWARF এক্সটেনশন, এবং Emscripten Chrome-এ C/C++ ডিবাগিং সম্ভব করে।

DevTools-এ C/C++ ডিবাগিংয়ের সম্পূর্ণ শক্তি আনলক করতে, আপনার দুটি জিনিসের প্রয়োজন:

• ক্রোমে ইনস্টল করা C/C++ DWARF এক্সটেনশন
• এই ব্লগ পোস্টে নির্দেশিত C/C++ সোর্স ফাইলগুলি সর্বশেষ Emscripten কম্পাইলার সহ WebAssembly-এ কম্পাইল করা হয়েছে

কিন্তু কেন? V8 , Chrome এর JavaScript এবং WebAssembly ইঞ্জিন, কিভাবে C বা C++ চালাতে হয় তা জানে না। Emscripten কে ধন্যবাদ, একটি C/C++ থেকে WebAssembly কম্পাইলার, আপনি WebAssembly হিসাবে C বা C++-এ নির্মিত অ্যাপগুলিকে কম্পাইল করতে পারেন এবং ব্রাউজারে চালাতে পারেন!

সংকলনের সময়, emscripten আপনার বাইনারিতে DWARF ডিবাগ ডেটা এম্বেড করবে। একটি উচ্চ স্তরে, এই ডেটা এক্সটেনশনকে সাহায্য করে যে কোন WebAssembly ভেরিয়েবলগুলি আপনার C/C++ ভেরিয়েবলের সাথে সামঞ্জস্যপূর্ণ, এবং আরও অনেক কিছু। এইভাবে, V8 আসলে WebAssembly চালানো সত্ত্বেও DevTools আপনাকে আপনার C++ ভেরিয়েবল দেখাতে পারে। আপনি যদি কৌতূহলী হন তবে DWARF ডিবাগ ডেটার উদাহরণের জন্য এই ব্লগ পোস্টটি দেখুন ।

আপনি যখন lastNumber প্রকাশ করেন তখন আসলে কী ঘটে? আপনি মেমরি আইকনে ক্লিক করার সাথে সাথে, DevTools চেক করে যে আপনি কোন ভেরিয়েবলটি পরিদর্শন করতে চান। এটি তারপর lastNumber ডেটা টাইপ এবং অবস্থানের এক্সটেনশনকে জিজ্ঞাসা করে। এক্সটেনশনটি সেই তথ্যের সাথে সাড়া দেওয়ার সাথে সাথে, মেমরি ইন্সপেক্টর মেমরির প্রাসঙ্গিক স্লাইস প্রদর্শন করতে পারে এবং এর ধরন জেনে এটি আপনাকে বস্তুর আকারও দেখাতে পারে।

আপনি যদি আগের উদাহরণে lastNumber দেখেন, আপনি লক্ষ্য করতে পারেন যে আমরা lastNumber: int * পরিদর্শন করেছি, কিন্তু মেমরি ইন্সপেক্টরের চিপটি বলছে *lastNumber: int , কী দেয়? পরিদর্শক আপনাকে দেখানো বস্তুর ধরন নির্দেশ করতে C++-স্টাইল পয়েন্টার ডিরেফারেন্সিং ব্যবহার করে! আপনি যদি একটি পয়েন্টার পরিদর্শন করেন, তাহলে পরিদর্শক আপনাকে দেখাবে যে এটি কী নির্দেশ করে।

ডিবাগার ধাপে হাইলাইট স্থায়ী করা

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

যখন ডিবাগার একটি নতুন ব্রেকপয়েন্টে আঘাত করে, মেমরি ইন্সপেক্টর আবার V8 এবং পূর্ববর্তী হাইলাইটের সাথে যুক্ত ভেরিয়েবলের জন্য এক্সটেনশন জিজ্ঞাসা করে। এটি তখন বস্তুর অবস্থান এবং প্রকারের তুলনা করে। যদি তারা মেলে, হাইলাইট বজায় থাকে। উপরের ভিডিওতে, অ্যারে x এ একটি ফর-লুপ লেখা রয়েছে। এই অপারেশনগুলি অ্যারের ধরন বা অবস্থান পরিবর্তন করে না, তাই এটি হাইলাইট থাকে।

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

উপসংহার

এই নিবন্ধটি C/C++ ডিবাগিংয়ের জন্য মেমরি ইন্সপেক্টরে আমাদের উন্নতিগুলি বর্ণনা করেছে। আমরা আশা করি নতুন বৈশিষ্ট্যগুলি আপনার C/C++ অ্যাপগুলির মেমরি ডিবাগ করাকে সহজ করবে! আপনার যদি এটিকে আরও উন্নত করার পরামর্শ থাকে তবে একটি বাগ ফাইল করে আমাদের জানান!

এরপর কি

আরও জানতে, দেখুন:

• মেমরি ইন্সপেক্টরের সাথে পরিচয়
• আধুনিক টুলস দিয়ে WebAssembly ডিবাগ করা
• দ্রুততর ওয়েব অ্যাসেম্বলি ডিবাগিং
• মেমরি ইন্সপেক্টর ডক্স