এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

আধুনিক টুলস দিয়ে WebAssembly ডিবাগ করা

Ingvar Stepanyan

এ পর্যন্ত রাস্তা

এক বছর আগে, Chrome Chrome DevTools-এ নেটিভ ওয়েব অ্যাসেম্বলি ডিবাগিংয়ের জন্য প্রাথমিক সমর্থন ঘোষণা করেছে ।

আমরা প্রাথমিক পদক্ষেপ সমর্থন প্রদর্শন করেছি এবং ভবিষ্যতে আমাদের জন্য উৎস মানচিত্রের পরিবর্তে DWARF তথ্যের ব্যবহারের সুযোগ সম্পর্কে কথা বলেছি:

পরিবর্তনশীল নাম সমাধান করা
প্রিটি-প্রিন্টিং প্রকার
উৎস ভাষায় অভিব্যক্তি মূল্যায়ন
…এবং আরো অনেক কিছু!

আজ, আমরা প্রতিশ্রুত বৈশিষ্ট্যগুলিকে জীবনে নিয়ে আসা এবং Emscripten এবং Chrome DevTools টিম এই বছরে যে অগ্রগতি করেছে, বিশেষ করে, C এবং C অ্যাপের ক্ষেত্রে তা প্রদর্শন করতে পেরে উত্তেজিত।

আমরা শুরু করার আগে, দয়া করে মনে রাখবেন যে এটি এখনও নতুন অভিজ্ঞতার একটি বিটা সংস্করণ, আপনাকে আপনার নিজের ঝুঁকিতে সমস্ত সরঞ্জামের সর্বশেষ সংস্করণ ব্যবহার করতে হবে এবং আপনি যদি কোনও সমস্যায় পড়েন তবে দয়া করে https:// /issues.chromium.org/issues/new?noWizard=true&template=0&component=1456350 ।

চলুন শেষবারের মতো একই সাধারণ C উদাহরণ দিয়ে শুরু করি:

#include <stdlib.h>

void assert_less(int x, int y) {
  if (x >= y) {
    abort();
  }
}

int main() {
  assert_less(10, 20);
  assert_less(30, 20);
}

এটি কম্পাইল করার জন্য, আমরা সর্বশেষ এমস্ক্রিপ্টেন ব্যবহার করি এবং ডিবাগ তথ্য অন্তর্ভুক্ত করতে মূল পোস্টের মতোই একটি -g পতাকা পাস করি:

emcc -g temp.c -o temp.html

এখন আমরা একটি লোকালহোস্ট HTTP সার্ভার থেকে জেনারেট করা পৃষ্ঠাটি পরিবেশন করতে পারি (উদাহরণস্বরূপ, serve এর সাথে), এবং এটি সর্বশেষ Chrome Canary- এ খুলতে পারি।

এবার আমাদের একটি সহায়ক এক্সটেনশনেরও প্রয়োজন হবে যা Chrome DevTools-এর সাথে সংহত করে এবং WebAssembly ফাইলে এনকোড করা সমস্ত ডিবাগিং তথ্য বোঝাতে সাহায্য করে৷ অনুগ্রহ করে এই লিঙ্কে গিয়ে এটি ইনস্টল করুন: goo.gle/wasm-debugging-extension

এছাড়াও আপনি DevTools পরীক্ষায় WebAssembly ডিবাগিং সক্ষম করতে চাইবেন। Chrome DevTools খুলুন, DevTools ফলকের উপরের ডানদিকে কোণায় গিয়ার ( ⚙ ) আইকনে ক্লিক করুন, পরীক্ষা প্যানেলে যান এবং WebAssembly Debugging: DWARF সমর্থন সক্ষম করুন টিক দিন।

DevTools সেটিংসের পরীক্ষামূলক ফলক

আপনি সেটিংস বন্ধ করার সময়, DevTools সেটিংস প্রয়োগ করতে নিজেকে পুনরায় লোড করার পরামর্শ দেবে, তাই আসুন এটিই করি। এটি এক-বন্ধ সেটআপের জন্য।

এখন আমরা উত্স প্যানেলে ফিরে যেতে পারি, ব্যতিক্রমগুলিতে বিরতি সক্ষম করতে পারি (⏸ আইকন), তারপর ধরা ব্যতিক্রমগুলিতে বিরতি চেক করুন এবং পৃষ্ঠাটি পুনরায় লোড করুন৷ আপনি একটি ব্যতিক্রমে DevTools থামানো দেখতে পাবেন:

সোর্স প্যানেলের স্ক্রিনশট দেখানো হচ্ছে কিভাবে 'ধরা ব্যতিক্রমগুলিতে বিরতি' সক্ষম করতে হয়

ডিফল্টরূপে, এটি একটি এমস্ক্রিপ্টেন-উত্পাদিত আঠালো কোডে থামে, কিন্তু ডানদিকে আপনি ত্রুটির স্ট্যাকট্রেস প্রতিনিধিত্বকারী একটি কল স্ট্যাক ভিউ দেখতে পাবেন এবং মূল C লাইনে নেভিগেট করতে পারেন যা abort করা হয়েছে:

DevTools `assert_less` ফাংশনে বিরতি দেওয়া হয়েছে এবং স্কোপ ভিউতে `x` এবং `y` এর মান দেখাচ্ছে

এখন, আপনি যদি স্কোপ ভিউতে দেখেন, আপনি C/C কোডে ভেরিয়েবলের আসল নাম এবং মান দেখতে পাবেন এবং $localN মতো ম্যাঙ্গলড নামগুলির অর্থ কী এবং সেগুলি আপনার সোর্স কোডের সাথে কীভাবে সম্পর্কিত তা আর বের করতে হবে না। লিখেছি।

এটি শুধুমাত্র পূর্ণসংখ্যার মতো আদিম মানের ক্ষেত্রেই নয়, স্ট্রাকচার, ক্লাস, অ্যারে ইত্যাদির মতো যৌগিক প্রকারের ক্ষেত্রেও প্রযোজ্য!

সমৃদ্ধ টাইপ সমর্থন

আসুন সেগুলি দেখানোর জন্য একটি আরও জটিল উদাহরণ দেখি। এইবার, আমরা নিম্নলিখিত C কোড সহ একটি ম্যান্ডেলব্রট ফ্র্যাক্টাল আঁকব:

#include <SDL2/SDL.h>
#include <complex>

int main() {
  // Init SDL.
  int width = 600, height = 600;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window;
  SDL_Renderer* renderer;
  SDL_CreateWindowAndRenderer(width, height, SDL_WINDOW_OPENGL, &window,
                              &renderer);

  // Generate a palette with random colors.
  enum { MAX_ITER_COUNT = 256 };
  SDL_Color palette[MAX_ITER_COUNT];
  srand(time(0));
  for (int i = 0; i < MAX_ITER_COUNT;   i) {
    palette[i] = {
        .r = (uint8_t)rand(),
        .g = (uint8_t)rand(),
        .b = (uint8_t)rand(),
        .a = 255,
    };
  }

  // Calculate and draw the Mandelbrot set.
  std::complex<double> center(0.5, 0.5);
  double scale = 4.0;
  for (int y = 0; y < height; y  ) {
    for (int x = 0; x < width; x  ) {
      std::complex<double> point((double)x / width, (double)y / height);
      std::complex<double> c = (point - center) * scale;
      std::complex<double> z(0, 0);
      int i = 0;
      for (; i < MAX_ITER_COUNT - 1; i  ) {
        z = z * z   c;
        if (abs(z) > 2.0)
          break;
      }
      SDL_Color color = palette[i];
      SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
      SDL_RenderDrawPoint(renderer, x, y);
    }
  }

  // Render everything we've drawn to the canvas.
  SDL_RenderPresent(renderer);

  // SDL_Quit();
}

আপনি দেখতে পাচ্ছেন যে এই অ্যাপ্লিকেশনটি এখনও মোটামুটি ছোট-এটি একটি একক ফাইল যাতে 50 লাইন কোড থাকে-কিন্তু এবার আমি কিছু বাহ্যিক API ব্যবহার করছি, যেমন গ্রাফিক্সের জন্য SDL লাইব্রেরির পাশাপাশি C স্ট্যান্ডার্ড লাইব্রেরি থেকে জটিল সংখ্যা ।

ডিবাগ তথ্য অন্তর্ভুক্ত করার জন্য আমি উপরের মতো একই -g পতাকা দিয়ে এটি কম্পাইল করতে যাচ্ছি, এবং এছাড়াও আমি এমস্ক্রিপ্টেনকে SDL2 লাইব্রেরি সরবরাহ করতে এবং ইচ্ছামত আকারের মেমরির অনুমতি দিতে বলব:

emcc -g mandelbrot.cc -o mandelbrot.html \
     -s USE_SDL=2 \
     -s ALLOW_MEMORY_GROWTH=1

যখন আমি ব্রাউজারে উত্পন্ন পৃষ্ঠাটি পরিদর্শন করি, তখন আমি কিছু এলোমেলো রঙের সাথে সুন্দর ফ্র্যাক্টাল আকৃতি দেখতে পারি:

ডেমো পৃষ্ঠা

যখন আমি DevTools খুলি, আবার, আমি আসল C ফাইল দেখতে পাব। এইবার, যাইহোক, আমাদের কোডে কোন ত্রুটি নেই (হুউ!), তাই এর পরিবর্তে আমাদের কোডের শুরুতে কিছু ব্রেকপয়েন্ট সেট করা যাক।

যখন আমরা আবার পৃষ্ঠাটি পুনরায় লোড করি, তখন ডিবাগারটি আমাদের C উৎসের মধ্যেই বিরাম দেবে:

DevTools `SDL_Init` কলে বিরাম দেওয়া হয়েছে

আমরা ইতিমধ্যে ডানদিকে আমাদের সমস্ত ভেরিয়েবল দেখতে পাচ্ছি, কিন্তু এই মুহূর্তে শুধুমাত্র width এবং height শুরু করা হয়েছে, তাই পরিদর্শন করার মতো অনেক কিছু নেই।

আসুন আমাদের মূল ম্যান্ডেলব্রট লুপের ভিতরে আরেকটি ব্রেকপয়েন্ট সেট করি এবং কিছুটা এগিয়ে যাওয়ার জন্য এক্সিকিউশন পুনরায় শুরু করি।

DevTools নেস্টেড লুপের ভিতরে পজ করা হয়েছে

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

আপনি যদি একটি গভীরভাবে নেস্টেড সম্পত্তি অ্যাক্সেস করতে চান যা অন্যথায় স্কোপ ভিউয়ের মাধ্যমে নেভিগেট করা কঠিন, আপনি কনসোল মূল্যায়নও ব্যবহার করতে পারেন! যাইহোক, মনে রাখবেন যে আরও জটিল C অভিব্যক্তি এখনও সমর্থিত নয়।

কনসোল প্যানেল `প্যালেট[10].r` এর ফলাফল দেখাচ্ছে

চলুন কয়েকবার এক্সিকিউশন আবার শুরু করি এবং আমরা দেখতে পারি যে ভিতরের x কীভাবে পরিবর্তিত হচ্ছে - হয় স্কোপ ভিউতে আবার দেখে, ঘড়ির তালিকায় পরিবর্তনশীল নাম যোগ করে, কনসোলে এটিকে মূল্যায়ন করে, বা ভেরিয়েবলের উপর হোভার করে উত্স কোড:

উৎসে ভেরিয়েবল `x` এর উপর টুলটিপ এর মান `3` দেখাচ্ছে

এখান থেকে, আমরা স্টেপ-ইন বা স্টেপ-ওভার C স্টেটমেন্ট করতে পারি, এবং অন্যান্য ভেরিয়েবলগুলিও কীভাবে পরিবর্তিত হচ্ছে তা পর্যবেক্ষণ করতে পারি:

টুলটিপস এবং স্কোপ ভিউ `রঙ`, `বিন্দু` এবং অন্যান্য ভেরিয়েবলের মান দেখাচ্ছে

ঠিক আছে, তাই যখন একটি ডিবাগ তথ্য উপলব্ধ থাকে তখন এটি দুর্দান্ত কাজ করে, তবে আমরা যদি এমন একটি কোড ডিবাগ করতে চাই যা ডিবাগিং বিকল্পগুলির সাথে তৈরি করা হয়নি?

Raw WebAssembly ডিবাগিং

উদাহরণ স্বরূপ, আমরা Emscripten কে আমাদের জন্য একটি প্রি-বিল্ট SDL লাইব্রেরি প্রদান করতে বলেছি, এটিকে উৎস থেকে নিজেরাই কম্পাইল করার পরিবর্তে, তাই-অন্তত-বর্তমানে-ডিবাগারের জন্য সংশ্লিষ্ট উৎস খুঁজে পাওয়ার কোনো উপায় নেই। SDL_RenderDrawColor এ যাওয়ার জন্য আবার পদক্ষেপ নেওয়া যাক:

DevTools `mandelbrot.wasm`-এর বিচ্ছিন্ন দৃশ্য দেখাচ্ছে

আমরা কাঁচা WebAssembly ডিবাগিং অভিজ্ঞতায় ফিরে এসেছি।

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

এই ক্ষেত্রে সাহায্য করার জন্য, আমরা মৌলিক ডিবাগিং অভিজ্ঞতাতেও কিছু উন্নতি করেছি।

প্রথমত, আপনি যদি আগে কাঁচা WebAssembly ডিবাগিং ব্যবহার করে থাকেন, তাহলে আপনি লক্ষ্য করতে পারেন যে পুরো বিচ্ছিন্নকরণটি এখন একটি একক ফাইলে দেখানো হয়েছে-কোন ফাংশনটি সোর্স এন্ট্রি wasm-53834e3e/ wasm-53834e3e-7 এর সাথে সামঞ্জস্যপূর্ণ তা অনুমান করা যাবে না।

নতুন নাম প্রজন্মের স্কিম

আমরা আলাদা করা ভিউতেও নাম উন্নত করেছি। পূর্বে আপনি শুধু সংখ্যাসূচক সূচক দেখতে পাবেন, অথবা, ফাংশনের ক্ষেত্রে, কোনো নাম নেই।

এখন আমরা WebAssembly নাম বিভাগ থেকে ইঙ্গিত ব্যবহার করে, আমদানি/রপ্তানি পথ এবং অবশেষে, অন্য সবকিছু ব্যর্থ হলে, $func123 এর মতো আইটেমের প্রকার এবং সূচকের উপর ভিত্তি করে সেগুলি তৈরি করে, অন্যান্য বিচ্ছিন্নকরণ সরঞ্জামগুলির মতোই নাম তৈরি করছি। উপরের স্ক্রিনশটে আপনি দেখতে পাচ্ছেন কিভাবে এটি ইতিমধ্যেই কিছুটা বেশি পঠনযোগ্য স্ট্যাকট্রেস এবং বিচ্ছিন্ন করতে সাহায্য করে।

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

মেমরি পরিদর্শন

পূর্বে, আপনি শুধুমাত্র WebAssembly মেমরি অবজেক্টটি প্রসারিত করতে পারতেন, স্কোপ ভিউ-এ পৃথক বাইট দেখতে env.memory দ্বারা উপস্থাপিত। এটি কিছু তুচ্ছ পরিস্থিতিতে কাজ করেছিল, কিন্তু প্রসারিত করার জন্য বিশেষ সুবিধাজনক ছিল না এবং বাইট মান ব্যতীত অন্য ফর্ম্যাটে ডেটা পুনঃব্যাখ্যা করার অনুমতি দেয়নি। আমরা এটিতে সাহায্য করার জন্য একটি নতুন বৈশিষ্ট্য যুক্ত করেছি: একটি লিনিয়ার মেমরি ইন্সপেক্টর৷

আপনি যদি env.memory এ ডান-ক্লিক করেন, তাহলে আপনার এখন Inspect memory নামে একটি নতুন বিকল্প দেখতে হবে:

একবার ক্লিক করলে, এটি একটি মেমরি ইন্সপেক্টর আনবে, যেখানে আপনি হেক্সাডেসিমেল এবং ASCII ভিউতে ওয়েব অ্যাসেম্বলি মেমরি পরিদর্শন করতে পারবেন, নির্দিষ্ট ঠিকানাগুলিতে নেভিগেট করতে পারবেন, সেইসাথে বিভিন্ন ফর্ম্যাটে ডেটা ব্যাখ্যা করতে পারবেন:

DevTools-এ মেমরি ইন্সপেক্টর ফলক মেমরির একটি হেক্স এবং ASCII ভিউ দেখাচ্ছে

উন্নত পরিস্থিতি এবং সতর্কতা

প্রোফাইলিং WebAssembly কোড

আপনি যখন DevTools খোলেন, তখন WebAssembly কোড ডিবাগিং সক্ষম করার জন্য একটি অঅপ্টিমাইজ করা সংস্করণে "tiered down" হয়ে যায়। এই সংস্করণটি অনেক ধীর, যার মানে আপনি DevTools খোলা থাকা অবস্থায় console.time , performance.now এবং আপনার কোডের গতি পরিমাপের অন্যান্য পদ্ধতির উপর নির্ভর করতে পারবেন না, কারণ আপনি যে সংখ্যাগুলি পাবেন তা বাস্তব-জগতের প্রতিনিধিত্ব করবে না সব সময়ে কর্মক্ষমতা

পরিবর্তে, আপনার DevTools পারফরম্যান্স প্যানেল ব্যবহার করা উচিত যা কোডটি সম্পূর্ণ গতিতে চালাবে এবং আপনাকে বিভিন্ন ফাংশনে ব্যয় করা সময়ের বিশদ বিবরণ প্রদান করবে:

প্রোফাইলিং প্যানেল বিভিন্ন Wasm ফাংশন দেখাচ্ছে

বিকল্পভাবে, আপনি DevTools বন্ধ করে আপনার অ্যাপ্লিকেশন চালাতে পারেন, এবং কনসোল পরিদর্শন করার জন্য সেগুলি একবার খুলতে পারেন।

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

বিভিন্ন মেশিনে বিল্ডিং এবং ডিবাগিং (ডকার/হোস্ট সহ)

ডকার, ভার্চুয়াল মেশিনে বা রিমোট বিল্ড সার্ভারে তৈরি করার সময়, আপনি সম্ভবত এমন পরিস্থিতিতে পড়বেন যেখানে বিল্ডের সময় ব্যবহৃত সোর্স ফাইলগুলির পাথগুলি আপনার নিজের ফাইল সিস্টেমের পাথগুলির সাথে মেলে না যেখানে Chrome DevTools চলছে৷ এই ক্ষেত্রে, ফাইলগুলি উত্স প্যানেলে প্রদর্শিত হবে কিন্তু লোড হতে ব্যর্থ হবে৷

এই সমস্যাটি সমাধান করার জন্য, আমরা C/C এক্সটেনশন বিকল্পগুলিতে একটি পাথ ম্যাপিং কার্যকারিতা প্রয়োগ করেছি। আপনি ইচ্ছামত পাথ রিম্যাপ করতে এটি ব্যবহার করতে পারেন এবং DevTools-কে উত্স সনাক্ত করতে সাহায্য করতে পারেন।

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

C/C ডিবাগিং এক্সটেনশনের বিকল্প পৃষ্ঠা

প্রথম মিলিত উপসর্গ "জয়"। আপনি যদি অন্যান্য C ডিবাগারের সাথে পরিচিত হন, তাহলে এই বিকল্পটি GDB-তে set substitute-path কমান্ড বা LLDB-তে একটি target.source-map সেটিং-এর মতো।

অপ্টিমাইজড বিল্ড ডিবাগ করা

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

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

emcc -g temp.c -o temp.html \
     -O3 -fno-inline

ডিবাগ তথ্য আলাদা করা হচ্ছে

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

WebAssembly মডিউলটির লোডিং এবং সংকলনের গতি বাড়ানোর জন্য, আপনি এই ডিবাগ তথ্যটিকে একটি পৃথক WebAssembly ফাইলে বিভক্ত করতে চাইতে পারেন। এমস্ক্রিপ্টেনে এটি করতে, একটি -gseparate-dwarf=… একটি পছন্দসই ফাইলের নাম সহ পতাকা পাস করুন:

emcc -g temp.c -o temp.html \
     -gseparate-dwarf=temp.debug.wasm

এই ক্ষেত্রে, প্রধান অ্যাপ্লিকেশনটি শুধুমাত্র একটি ফাইলের নাম temp.debug.wasm সঞ্চয় করবে এবং আপনি যখন DevTools খুলবেন তখন হেল্পার এক্সটেনশন এটি সনাক্ত করতে এবং লোড করতে সক্ষম হবে৷

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

emcc -g temp.c -o temp.html \
     -O3 -fno-inline \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=file://[local path to temp.debug.wasm]

চালিয়ে যেতে হবে…

বাহ, এটি অনেক নতুন বৈশিষ্ট্য ছিল!

এই সমস্ত নতুন ইন্টিগ্রেশনের সাথে, Chrome DevTools শুধুমাত্র জাভাস্ক্রিপ্টের জন্যই নয়, C এবং C অ্যাপগুলির জন্যও একটি কার্যকর, শক্তিশালী, ডিবাগার হয়ে ওঠে, যা বিভিন্ন প্রযুক্তিতে তৈরি অ্যাপগুলিকে নেওয়া আগের চেয়ে সহজ করে তোলে এবং সেগুলিকে শেয়ার করা, ক্রস-প্ল্যাটফর্ম ওয়েব।

তবে আমাদের যাত্রা এখনো শেষ হয়নি। আমরা এখান থেকে কিছু জিনিস নিয়ে কাজ করব:

ডিবাগিং অভিজ্ঞতায় রুক্ষ প্রান্তগুলি পরিষ্কার করা।
কাস্টম টাইপ ফরম্যাটারগুলির জন্য সমর্থন যোগ করা হচ্ছে।
WebAssembly অ্যাপের প্রোফাইলিংয়ের উন্নতিতে কাজ করা।
অব্যবহৃত কোড খুঁজে পাওয়া সহজ করতে কোড কভারেজের জন্য সমর্থন যোগ করা।
কনসোল মূল্যায়নে অভিব্যক্তির জন্য সমর্থন উন্নত করা।
আরও ভাষার জন্য সমর্থন যোগ করা হচ্ছে।
…এবং আরো!

ইতিমধ্যে, আপনার নিজের কোডে বর্তমান বিটা চেষ্টা করে এবং https://issues.chromium.org/issues/new?noWizard=true&template=0&component=1456350- এ যেকোনও সমস্যা রিপোর্ট করে দয়া করে আমাদের সাহায্য করুন।

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

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

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

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

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

Ingvar Stepanyan

এ পর্যন্ত রাস্তা

পরিবর্তনশীল নাম সমাধান করা
প্রিটি-প্রিন্টিং প্রকার
উৎস ভাষায় অভিব্যক্তি মূল্যায়ন
…এবং আরো অনেক কিছু!

চলুন শেষবারের মতো একই সাধারণ C উদাহরণ দিয়ে শুরু করি:

#include <stdlib.h>

void assert_less(int x, int y) {
  if (x >= y) {
    abort();
  }
}

int main() {
  assert_less(10, 20);
  assert_less(30, 20);
}

emcc -g temp.c -o temp.html

DevTools সেটিংসের পরীক্ষামূলক ফলক

DevTools `assert_less` ফাংশনে বিরতি দেওয়া হয়েছে এবং স্কোপ ভিউতে `x` এবং `y` এর মান দেখাচ্ছে

সমৃদ্ধ টাইপ সমর্থন

#include <SDL2/SDL.h>
#include <complex>

int main() {
  // Init SDL.
  int width = 600, height = 600;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window;
  SDL_Renderer* renderer;
  SDL_CreateWindowAndRenderer(width, height, SDL_WINDOW_OPENGL, &window,
                              &renderer);

  // Generate a palette with random colors.
  enum { MAX_ITER_COUNT = 256 };
  SDL_Color palette[MAX_ITER_COUNT];
  srand(time(0));
  for (int i = 0; i < MAX_ITER_COUNT;   i) {
    palette[i] = {
        .r = (uint8_t)rand(),
        .g = (uint8_t)rand(),
        .b = (uint8_t)rand(),
        .a = 255,
    };
  }

  // Calculate and draw the Mandelbrot set.
  std::complex<double> center(0.5, 0.5);
  double scale = 4.0;
  for (int y = 0; y < height; y  ) {
    for (int x = 0; x < width; x  ) {
      std::complex<double> point((double)x / width, (double)y / height);
      std::complex<double> c = (point - center) * scale;
      std::complex<double> z(0, 0);
      int i = 0;
      for (; i < MAX_ITER_COUNT - 1; i  ) {
        z = z * z   c;
        if (abs(z) > 2.0)
          break;
      }
      SDL_Color color = palette[i];
      SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
      SDL_RenderDrawPoint(renderer, x, y);
    }
  }

  // Render everything we've drawn to the canvas.
  SDL_RenderPresent(renderer);

  // SDL_Quit();
}

emcc -g mandelbrot.cc -o mandelbrot.html \
     -s USE_SDL=2 \
     -s ALLOW_MEMORY_GROWTH=1

ডেমো পৃষ্ঠা

DevTools `SDL_Init` কলে বিরাম দেওয়া হয়েছে

DevTools নেস্টেড লুপের ভিতরে পজ করা হয়েছে

কনসোল প্যানেল `প্যালেট[10].r` এর ফলাফল দেখাচ্ছে

উৎসে ভেরিয়েবল `x` এর উপর টুলটিপ এর মান `3` দেখাচ্ছে

টুলটিপস এবং স্কোপ ভিউ `রঙ`, `বিন্দু` এবং অন্যান্য ভেরিয়েবলের মান দেখাচ্ছে

Raw WebAssembly ডিবাগিং

DevTools `mandelbrot.wasm`-এর বিচ্ছিন্ন দৃশ্য দেখাচ্ছে

আমরা কাঁচা WebAssembly ডিবাগিং অভিজ্ঞতায় ফিরে এসেছি।

নতুন নাম প্রজন্মের স্কিম

মেমরি পরিদর্শন

DevTools-এ মেমরি ইন্সপেক্টর ফলক মেমরির একটি হেক্স এবং ASCII ভিউ দেখাচ্ছে

উন্নত পরিস্থিতি এবং সতর্কতা

প্রোফাইলিং WebAssembly কোড

প্রোফাইলিং প্যানেল বিভিন্ন Wasm ফাংশন দেখাচ্ছে

বিভিন্ন মেশিনে বিল্ডিং এবং ডিবাগিং (ডকার/হোস্ট সহ)

C/C ডিবাগিং এক্সটেনশনের বিকল্প পৃষ্ঠা

অপ্টিমাইজড বিল্ড ডিবাগ করা

emcc -g temp.c -o temp.html \
     -O3 -fno-inline

ডিবাগ তথ্য আলাদা করা হচ্ছে

emcc -g temp.c -o temp.html \
     -gseparate-dwarf=temp.debug.wasm

emcc -g temp.c -o temp.html \
     -O3 -fno-inline \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=file://[local path to temp.debug.wasm]

চালিয়ে যেতে হবে…

বাহ, এটি অনেক নতুন বৈশিষ্ট্য ছিল!

তবে আমাদের যাত্রা এখনো শেষ হয়নি। আমরা এখান থেকে কিছু জিনিস নিয়ে কাজ করব:

ডিবাগিং অভিজ্ঞতায় রুক্ষ প্রান্তগুলি পরিষ্কার করা।
কাস্টম টাইপ ফরম্যাটারগুলির জন্য সমর্থন যোগ করা হচ্ছে।
WebAssembly অ্যাপের প্রোফাইলিংয়ের উন্নতিতে কাজ করা।
অব্যবহৃত কোড খুঁজে পাওয়া সহজ করতে কোড কভারেজের জন্য সমর্থন যোগ করা।
কনসোল মূল্যায়নে অভিব্যক্তির জন্য সমর্থন উন্নত করা।
আরও ভাষার জন্য সমর্থন যোগ করা হচ্ছে।
…এবং আরো!

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

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

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

Ingvar Stepanyan

এ পর্যন্ত রাস্তা

পরিবর্তনশীল নাম সমাধান করা
প্রিটি-প্রিন্টিং প্রকার
উৎস ভাষায় অভিব্যক্তি মূল্যায়ন
…এবং আরো অনেক কিছু!

চলুন শেষবারের মতো একই সাধারণ C উদাহরণ দিয়ে শুরু করি:

#include <stdlib.h>

void assert_less(int x, int y) {
  if (x >= y) {
    abort();
  }
}

int main() {
  assert_less(10, 20);
  assert_less(30, 20);
}

emcc -g temp.c -o temp.html

DevTools সেটিংসের পরীক্ষামূলক ফলক

DevTools `assert_less` ফাংশনে বিরতি দেওয়া হয়েছে এবং স্কোপ ভিউতে `x` এবং `y` এর মান দেখাচ্ছে

সমৃদ্ধ টাইপ সমর্থন

#include <SDL2/SDL.h>
#include <complex>

int main() {
  // Init SDL.
  int width = 600, height = 600;
  SDL_Init(SDL_INIT_VIDEO);
  SDL_Window* window;
  SDL_Renderer* renderer;
  SDL_CreateWindowAndRenderer(width, height, SDL_WINDOW_OPENGL, &window,
                              &renderer);

  // Generate a palette with random colors.
  enum { MAX_ITER_COUNT = 256 };
  SDL_Color palette[MAX_ITER_COUNT];
  srand(time(0));
  for (int i = 0; i < MAX_ITER_COUNT;   i) {
    palette[i] = {
        .r = (uint8_t)rand(),
        .g = (uint8_t)rand(),
        .b = (uint8_t)rand(),
        .a = 255,
    };
  }

  // Calculate and draw the Mandelbrot set.
  std::complex<double> center(0.5, 0.5);
  double scale = 4.0;
  for (int y = 0; y < height; y  ) {
    for (int x = 0; x < width; x  ) {
      std::complex<double> point((double)x / width, (double)y / height);
      std::complex<double> c = (point - center) * scale;
      std::complex<double> z(0, 0);
      int i = 0;
      for (; i < MAX_ITER_COUNT - 1; i  ) {
        z = z * z   c;
        if (abs(z) > 2.0)
          break;
      }
      SDL_Color color = palette[i];
      SDL_SetRenderDrawColor(renderer, color.r, color.g, color.b, color.a);
      SDL_RenderDrawPoint(renderer, x, y);
    }
  }

  // Render everything we've drawn to the canvas.
  SDL_RenderPresent(renderer);

  // SDL_Quit();
}

emcc -g mandelbrot.cc -o mandelbrot.html \
     -s USE_SDL=2 \
     -s ALLOW_MEMORY_GROWTH=1

ডেমো পৃষ্ঠা

যখন আমরা আবার পৃষ্ঠাটি পুনরায় লোড করি, ডিবাগারটি আমাদের সি উত্সের ঠিক ভিতরে বিরতি দেবে:

ডিভটুলস `এসডিএল_আইনিট` কলটিতে বিরতি দিয়েছিল

আমরা ইতিমধ্যে আমাদের সমস্ত ভেরিয়েবলগুলি ডানদিকে দেখতে পাচ্ছি, তবে এই মুহুর্তে কেবল width এবং height শুরু করা হয়েছে, তাই পরিদর্শন করার মতো খুব বেশি কিছু নেই।

আসুন আমাদের মূল ম্যান্ডেলব্রোট লুপের ভিতরে আরও একটি ব্রেকপয়েন্ট সেট করুন এবং কিছুটা এগিয়ে যেতে পুনরায় কার্যকর করুন।

নেস্টেড লুপের ভিতরে ডিভটুলস বিরতি দেয়

এই মুহুর্তে আমাদের palette কিছু এলোমেলো রঙে ভরাট হয়েছে এবং আমরা উভয়ই অ্যারে নিজেই প্রসারিত করতে পারি, পাশাপাশি পৃথক SDL_Color কাঠামোগুলিও ভাল দেখায় তা যাচাই করতে তাদের উপাদানগুলি পরিদর্শন করতে পারি (উদাহরণস্বরূপ, "আলফা" চ্যানেল সর্বদা থাকে সম্পূর্ণ অস্বচ্ছতা সেট)। একইভাবে, আমরা center ভেরিয়েবলে সঞ্চিত জটিল সংখ্যার আসল এবং কাল্পনিক অংশগুলি প্রসারিত এবং পরীক্ষা করতে পারি।

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

কনসোল প্যানেল `প্যালেট [10] .r` এর ফলাফল দেখায়

আসুন কয়েকবার কার্যকর করা শুরু করুন এবং আমরা দেখতে পাচ্ছি যে কীভাবে অভ্যন্তরীণ x আবার স্কোপ ভিউটি দেখে আবার ভালভাবে পরিবর্তিত হচ্ছে, ঘড়ির তালিকায় ভেরিয়েবলের নাম যুক্ত করে, এটি কনসোলে মূল্যায়ন করে, বা ভেরিয়েবলের উপর ঘুরে বেড়ায় উত্স কোড:

উত্সটিতে ভেরিয়েবলের উপরে টুলটিপ `x` এর মান দেখায়` 3`

এখান থেকে, আমরা সি স্টেপ-ইন বা স্টেপ-ওভার সি বিবৃতি দিতে পারি এবং অন্যান্য ভেরিয়েবলগুলি কীভাবে পরিবর্তন হচ্ছে তা পর্যবেক্ষণ করতে পারি:

টুলটিপস এবং স্কোপ ভিউ `রঙ`,` পয়েন্ট` এবং অন্যান্য ভেরিয়েবলের মানগুলি দেখায়

ঠিক আছে, সুতরাং যখন কোনও ডিবাগের তথ্য পাওয়া যায় তখন এই সমস্ত দুর্দান্ত কাজ করে তবে আমরা যদি এমন কোনও কোড ডিবাগ করতে চাই যা ডিবাগিং বিকল্পগুলির সাথে নির্মিত হয়নি?

কাঁচা ওয়েবসেম্বলি ডিবাগিং

উদাহরণস্বরূপ, আমরা এমস্ক্রিপ্টেনকে উত্স থেকে নিজেদের সংকলন করার পরিবর্তে আমাদের জন্য একটি প্রিপাইল্ট এসডিএল লাইব্রেরি সরবরাহ করতে বলেছিলাম, কমপক্ষে বর্তমানে ডিবাগারের সাথে সম্পর্কিত উত্সগুলি সন্ধানের কোনও উপায় নেই। SDL_RenderDrawColor যেতে আবার ধাপে ধাপে আসুন:

ডিভটুলগুলি `ম্যান্ডেলব্রোট.ওয়াসম` এর বিচ্ছিন্ন দৃশ্য দেখায়

আমরা কাঁচা ওয়েবসেম্বলি ডিবাগিং অভিজ্ঞতায় ফিরে এসেছি।

এখন, এটি কিছুটা ভীতিজনক দেখাচ্ছে এবং বেশিরভাগ ওয়েব বিকাশকারীদের এর সাথে মোকাবিলা করার প্রয়োজন হবে এমন কিছু নয়, তবে মাঝে মাঝে আপনি ডিবাগ তথ্য ছাড়াই নির্মিত একটি লাইব্রেরি ডিবাগ করতে চাইতে পারেন কারণ এটি একটি 3 ^rd -party লাইব্রেরি আপনার কোনও নিয়ন্ত্রণ নেই , বা কারণ আপনি কেবল উত্পাদনে ঘটে এমন বাগগুলির মধ্যে একটিতে চলেছেন।

এই ক্ষেত্রে সহায়তা করার জন্য, আমরা বেসিক ডিবাগিং অভিজ্ঞতায়ও কিছু উন্নতি করেছি।

প্রথমত, আপনি যদি এর আগে কাঁচা ওয়েবসেম্বল ডিবাগিং ব্যবহার করেন তবে আপনি লক্ষ্য করতে পারেন যে পুরো বিচ্ছিন্নতা এখন একটি একক ফাইলে দেখানো হয়েছে-কোনও উত্স এন্ট্রি wasm-53834e3e/ wasm-53834e3e-7 সম্ভবত এর সাথে সম্পর্কিত কোনটি ফাংশন করে।

নতুন নাম জেনারেশন স্কিম

আমরা বিচ্ছিন্ন ভিউতে নামগুলিও উন্নত করেছি। পূর্বে আপনি কেবল সংখ্যার সূচকগুলি দেখতে পাবেন, বা, ফাংশনগুলির ক্ষেত্রে, মোটেও কোনও নাম নেই।

এখন আমরা অন্যান্য বিচ্ছিন্ন সরঞ্জামগুলির মতো একই নাম তৈরি করছি, ওয়েবসেম্বলি নাম বিভাগ , আমদানি/রফতানি পাথের ইঙ্গিতগুলি ব্যবহার করে এবং অবশেষে, যদি সমস্ত কিছু ব্যর্থ হয়, $func123 এর মতো আইটেমের ধরণ এবং সূচকের ভিত্তিতে এগুলি তৈরি করে। আপনি দেখতে পাচ্ছেন যে কীভাবে, উপরের স্ক্রিনশটে, এটি ইতিমধ্যে কিছুটা বেশি পাঠযোগ্য স্ট্যাকট্রেস এবং বিচ্ছিন্নতা পেতে সহায়তা করে।

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

স্মৃতি পরিদর্শন

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

আপনি যদি env.memory ডান ক্লিক করেন তবে আপনার এখন পরিদর্শন মেমরি নামে একটি নতুন বিকল্প দেখতে হবে:

একবার ক্লিক হয়ে গেলে, এটি একটি মেমরি ইন্সপেক্টর নিয়ে আসবে, যাতে আপনি হেক্সাডেসিমাল এবং এএসসিআইআই ভিউগুলিতে ওয়েবসেম্বলি মেমরিটি পরিদর্শন করতে পারেন, নির্দিষ্ট ঠিকানাগুলিতে নেভিগেট করতে পারেন, পাশাপাশি বিভিন্ন ফর্ম্যাটে ডেটা ব্যাখ্যা করতে পারেন:

মেমোরি ইন্সপেক্টর ফলকগুলিতে মেমরির একটি হেক্স এবং এএসসিআইআই ভিউ দেখানো

উন্নত পরিস্থিতি এবং সতর্কতা

প্রোফাইলিং ওয়েবসেম্বলি কোড

আপনি যখন ডেভটুলগুলি খুলবেন, ওয়েবসেম্বলি কোডটি ডিবাগিং সক্ষম করতে একটি অপ্রচলিত সংস্করণে "টায়ার্ড ডাউন" হয়ে যায়। এই সংস্করণটি অনেক ধীর গতির, যার অর্থ আপনি console.time উপর নির্ভর করতে পারবেন না। সময়, performance.now এখন এবং আপনার কোডের গতি পরিমাপের অন্যান্য পদ্ধতিগুলি যখন ডিভটুলগুলি খোলা থাকে, কারণ আপনি যে সংখ্যাগুলি পান সেগুলি বাস্তব-বিশ্বের প্রতিনিধিত্ব করবে না পারফরম্যান্স আদৌ।

পরিবর্তে, আপনার ডেভটুলস পারফরম্যান্স প্যানেলটি ব্যবহার করা উচিত যা পুরো গতিতে কোডটি চালাবে এবং আপনাকে বিভিন্ন ফাংশনে ব্যয় করা সময়ের বিশদ ভাঙ্গন সরবরাহ করবে:

প্রোফাইলিং প্যানেল বিভিন্ন WASM ফাংশন দেখায়

বিকল্পভাবে, আপনি ডেভটুলগুলি বন্ধ করে আপনার অ্যাপ্লিকেশনটি চালাতে পারেন এবং কনসোলটি পরিদর্শন করার জন্য একবার এটি খুলুন।

আমরা ভবিষ্যতে প্রোফাইলিং পরিস্থিতিগুলির উন্নতি করব, তবে আপাতত সচেতন হওয়া এটি একটি সতর্কতা। আপনি যদি ওয়েবসেম্বলি টায়ারিং পরিস্থিতি সম্পর্কে আরও জানতে চান তবে ওয়েবসেম্বলি সংকলন পাইপলাইনে আমাদের ডক্সগুলি দেখুন।

বিভিন্ন মেশিনে বিল্ডিং এবং ডিবাগিং (ডকার / হোস্ট সহ)

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

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

উদাহরণস্বরূপ, যদি আপনার হোস্ট মেশিনে প্রকল্পটি কোনও পাথের অধীনে থাকে C:\src\my_project , তবে একটি ডকার ধারকটির ভিতরে নির্মিত হয়েছিল যেখানে সেই পথটি /mnt/c/src/my_project হিসাবে প্রতিনিধিত্ব করা হয়েছিল, আপনি ডিবাগিংয়ের সময় এটি পুনরায় পুনরায় তৈরি করতে পারেন এই পাথগুলি উপসর্গ হিসাবে নির্দিষ্ট করে:

সি/সি ডিবাগিং এক্সটেনশনের বিকল্প পৃষ্ঠা

প্রথম মিলে যাওয়া উপসর্গ "জয়"। আপনি যদি অন্যান্য সি ডিবাগারগুলির সাথে পরিচিত হন তবে এই বিকল্পটি জিডিবিতে set substitute-path কমান্ড বা একটি target.source-map সেটিংয়ের সাথে এলএলডিবিতে অনুরূপ।

ডিবাগিং অপ্টিমাইজড বিল্ডস

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

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

emcc -g temp.c -o temp.html \
     -O3 -fno-inline

ডিবাগ তথ্য পৃথক করা

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

ওয়েবসেম্বলি মডিউলটির লোডিং এবং সংকলনকে গতি বাড়ানোর জন্য, আপনি এই ডিবাগ তথ্যটিকে একটি পৃথক ওয়েবসেম্বলি ফাইলে বিভক্ত করতে চাইতে পারেন। এমস্ক্রিপ্টনে এটি করার জন্য, একটি -gseparate-dwarf=… একটি পছন্দসই ফাইলের নাম সহ পতাকা পাস করুন:

emcc -g temp.c -o temp.html \
     -gseparate-dwarf=temp.debug.wasm

এই ক্ষেত্রে, মূল অ্যাপ্লিকেশনটি কেবলমাত্র একটি ফাইলের নাম temp.debug.wasm সংরক্ষণ করবে এবং সহায়ক এক্সটেনশনটি আপনি যখন ডিভটুলগুলি খোলেন তখন এটি সনাক্ত এবং লোড করতে সক্ষম হবে।

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

emcc -g temp.c -o temp.html \
     -O3 -fno-inline \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=file://[local path to temp.debug.wasm]

চালিয়ে যেতে হবে…

হ্যাঁ, এটি ছিল অনেক নতুন বৈশিষ্ট্য!

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

তবে আমাদের যাত্রা এখনও শেষ হয়নি। আমরা এখান থেকে কাজ করব এমন কয়েকটি বিষয়:

ডিবাগিং অভিজ্ঞতায় রুক্ষ প্রান্তগুলি পরিষ্কার করা।
কাস্টম টাইপ ফর্ম্যাটারগুলির জন্য সমর্থন যুক্ত করা।
ওয়েবসেম্বল অ্যাপ্লিকেশনগুলির জন্য প্রোফাইলিংয়ের উন্নতি নিয়ে কাজ করা।
অব্যবহৃত কোড সন্ধান করা সহজ করার জন্য কোড কভারেজের জন্য সমর্থন যুক্ত করা।
কনসোল মূল্যায়নে অভিব্যক্তির জন্য সমর্থন উন্নত করা।
আরও ভাষার জন্য সমর্থন যুক্ত করা।
…এবং আরো!

এদিকে, দয়া করে আপনার নিজের কোডে বর্তমান বিটা চেষ্টা করে এবং https://issues.chromium.org/issues/new?nowizard=true&template=0&componencent=1456350 এ যে কোনও পাওয়া সমস্যা প্রতিবেদন করে আমাদের সহায়তা করুন।

পূর্বরূপ চ্যানেলগুলি ডাউনলোড করুন

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

ক্রোম ডিভটুলস দলের সাথে যোগাযোগ করা

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

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