WebAssembly চালানোর একটি উপায় প্রদান করে, উদাহরণস্বরূপ, কাছাকাছি নেটিভ গতিতে এবং জাভাস্ক্রিপ্টের পাশাপাশি ওয়েবে C/C++ কোড। এই দস্তাবেজটি দেখায় যে কীভাবে এই ধরনের অ্যাপ্লিকেশনগুলিকে আরও ভালভাবে ডিবাগ করতে Chrome DevTools সেট আপ এবং ব্যবহার করতে হয়৷
আপনি একবার DevTools সেট আপ করার পরে, আপনি করতে পারেন:
- উৎস > সম্পাদকে আপনার আসল কোড পরিদর্শন করুন।
- লাইন-অফ-কোড ব্রেকপয়েন্টের সাথে এক্সিকিউশন থামান এবং আপনার আসল C/C++ সোর্স কোডের মধ্য দিয়ে যান, কম্পাইল করা
.wasmবাইনারি ফাইল নয়।
এবং, বিরতির সময়, আপনি করতে পারেন:
- আসল সোর্স ফাইলে ভেরিয়েবলের উপর হোভার করুন এবং তাদের মান দেখুন।
- কল স্ট্যাকের ফাংশনের নাম এবং স্কোপে ভেরিয়েবলগুলি বুঝুন।
- কনসোলে গভীরভাবে নেস্টেড বৈশিষ্ট্য এবং জটিল বস্তু আউটপুট করুন।
- মেমরি ইন্সপেক্টর দিয়ে অবজেক্ট মেমরি পরিদর্শন করুন।
সেট আপ করুন
DevTools-এ C/C++ WebAssembly ডিবাগিং সক্ষম করতে:
DWARF ডিবাগ তথ্য অন্তর্ভুক্ত করে আপনার অ্যাপ্লিকেশন কম্পাইল করুন। সর্বশেষ Emscripten কম্পাইলার চালান এবং এটি
-gপতাকা পাস. যেমন:emcc -g source.cc -o app.htmlআরও তথ্যের জন্য, ডিবাগ তথ্য সহ প্রকল্প নির্মাণ দেখুন।
C/C++ DevTools Support (DWARF) Chrome এক্সটেনশন ইনস্টল করুন।
ডিবাগ
DevTools সেট আপ দিয়ে, আপনার কোড ডিবাগ করুন:
- আপনার ওয়েবসাইট পরিদর্শন করতে DevTools খুলুন । এই টিউটোরিয়ালের জন্য, আপনি এই ডেমো পৃষ্ঠায় এটি চেষ্টা করতে পারেন, যা প্রয়োজনীয়
-gপতাকা দিয়ে সংকলিত হয়েছিল। - ঐচ্ছিকভাবে, সহজে নেভিগেশনের জন্য আপনার লেখা ফাইলগুলিকে গোষ্ঠীভুক্ত করুন। সূত্রে , চেক করুন
> পৃষ্ঠা > 
> লেখক/নিয়োজিত দ্বারা গোষ্ঠী 
. - ফাইল ট্রি থেকে আপনার আসল সোর্স ফাইল নির্বাচন করুন। এই ক্ষেত্রে,
mandelbrot.cc. একটি লাইন-অফ-কোড ব্রেকপয়েন্ট সেট করতে, সম্পাদকের বাম দিকের কলামে একটি লাইন নম্বরে ক্লিক করুন, উদাহরণস্বরূপ, 38 লাইনে।
কোডটি আবার চালান। ব্রেকপয়েন্ট সহ লাইনের আগে মৃত্যুদন্ড বিরতি দেয়।
বিরাম দেওয়ার সময়, নিম্নলিখিতগুলি চেষ্টা করুন:
- Sources > Editor- এ , একটি টুলটিপে এর মান দেখতে একটি ভেরিয়েবলের উপর হোভার করুন।
- সোর্স > কল স্ট্যাক-এ , সোর্সের মতো ফাংশনের নামগুলি দেখুন।
- উত্স > সুযোগ- এ, স্থানীয় এবং বিশ্বব্যাপী ভেরিয়েবল, তাদের প্রকার এবং মানগুলি দেখুন।
কনসোলে , আউটপুট ভেরিয়েবল এবং অবজেক্ট যা স্কোপে নেভিগেট করা কঠিন:
- গভীরভাবে নেস্টেড ভেরিয়েবল, উদাহরণস্বরূপ, বড় অ্যারেতে ইন্ডেক্স করা আইটেম।
- জটিল বস্তু, যার মধ্যে আপনি পয়েন্টার দিয়ে অ্যাক্সেস করতে পারেন (
->)। পরিদর্শন করতে তাদের প্রসারিত করুন।
- উত্স > সুযোগ- এ, ক্লিক করুন
মেমরি ইন্সপেক্টর খুলতে আইকন এবং অবজেক্ট মেমরির কাঁচা বাইট পরিদর্শন করুন। আরও তথ্যের জন্য, WebAssembly মেমরি পরিদর্শন দেখুন।
প্রোফাইল কর্মক্ষমতা
DevTools সেট আপ এবং খোলার সাথে, Chrome রান করা কোডটি অপ্টিমাইজ করা হয় না। এটি আপনাকে আরও ভাল ডিবাগিং অভিজ্ঞতা দিতে টায়ার্ড করা হয়েছে ।
এই ক্ষেত্রে, আপনি প্রোফাইল পারফরম্যান্সের জন্য আপনার কোডে console.time() এবং performance.now() এর উপর নির্ভর করতে পারবেন না। পরিবর্তে, প্রোফাইল করতে পারফরম্যান্স প্যানেল ব্যবহার করুন।
বিকল্পভাবে, আপনি DevTools না খুলেই আপনার প্রোফাইলিং কোড চালাতে পারেন, তারপর কনসোলে বার্তাগুলি পরিদর্শন করতে এটি খুলতে পারেন।
ডিবাগ তথ্য আলাদা করুন
লোড করার গতি বাড়ানোর জন্য কিন্তু এখনও একটি ভাল ডিবাগিং অভিজ্ঞতা পেতে, আপনি একটি পৃথক .wasm ফাইলে ডিবাগ তথ্য বিভক্ত করতে পারেন। আরও তথ্যের জন্য, Debugging WebAssembly Faster দেখুন।
আপনি হয় এই ফাইলটি স্থানীয়ভাবে রাখতে পারেন বা এটি একটি পৃথক সার্ভারে হোস্ট করতে পারেন। Emscripten এর সাথে এটি করতে, -gseparate-dwarf=<filename> পতাকাটি পাস করুন এবং ফাইলের পথটি নির্দিষ্ট করুন:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
বিভিন্ন মেশিনে বিল্ড এবং ডিবাগ করুন
আপনি যে মেশিনে Chrome চালাচ্ছেন তার চেয়ে ভিন্ন অপারেটিং সিস্টেম (ধারক, VM, বা রিমোট সার্ভার) সহ একটি মেশিন তৈরি করলে, আপনাকে ডিবাগ ফাইল পাথগুলি ম্যানুয়ালি ম্যাপ করতে হতে পারে৷
উদাহরণ স্বরূপ, যদি আপনার প্রজেক্ট স্থানীয়ভাবে C:\src\project এ থাকে কিন্তু পথ /mnt/c/src/project সহ একটি ডকার কন্টেইনারে তৈরি করা হয়, তাহলে নিম্নলিখিতগুলি করুন:
-
chrome://extensions/এ যান, C/C++ DevTools Support (DWARF) এক্সটেনশন খুঁজুন এবং বিস্তারিত > এক্সটেনশন বিকল্পে ক্লিক করুন। - পুরানো এবং নতুন ফাইল পাথ নির্দিষ্ট করুন।
আরও জানুন
WebAssembly ডিবাগিং সম্পর্কে আরও তথ্যের জন্য Chrome DevTools ইঞ্জিনিয়ারিং ব্লগ দেখুন: