توفّر WebAssembly طريقة لتشغيل رمز C/C++ على الويب بسرعة قريبة من السرعة الأصلية وبجانب JavaScript. يوضِّح هذا المستند كيفية إعداد "أدوات مطوري البرامج في Chrome" واستخدامها لتصحيح أخطاء هذه التطبيقات بشكل أفضل.
بعد إعداد أدوات مطوّري البرامج، يمكنك إجراء ما يلي:
- تحقّق من الرمز الأصلي في المصادر > المحرِّر.
- يمكنك إيقاف التنفيذ مؤقتًا باستخدام نقاط التوقف لسطر الرمز والتنقل عبر رمز مصدر C/C++ الأصلي، وليس ملف
.wasmالثنائي الذي تم تجميعه.
وأثناء الإيقاف المؤقت، يمكنك:
- مرِّر مؤشر الماوس فوق المتغيّرات في ملف المصدر الأصلي واطّلِع على قيمها.
- فهم أسماء الدوالّ في تسلسل الاستدعاء والمتغيّرات في النطاق
- عرض المواقع الإلكترونية والكائنات المعقدة والمُدمجة بعمق في وحدة التحكّم
- فحص ذاكرة العناصر باستخدام أداة فحص الذاكرة
إعداد
لتفعيل تصحيح أخطاء C/C++ WebAssembly في أدوات مطوّري البرامج:
اجمع تطبيقك مع تضمين معلومات تصحيح الأخطاء DWARF. شغِّل أحدث إصدار من مُجمِّع Emscripten وأدخِل العلامة
-g. على سبيل المثال:emcc -g source.cc -o app.htmlلمزيد من المعلومات، يُرجى الاطّلاع على إنشاء المشاريع باستخدام معلومات تصحيح الأخطاء.
تصحيح الأخطاء
بعد إعداد أدوات مطوّري البرامج، يمكنك تصحيح أخطاء الرمز البرمجي:
- افتح "أدوات مطوّري البرامج" لفحص موقعك الإلكتروني. بالنسبة إلى هذا الدليل التعليمي، يمكنك تجربته في صفحة العرض التوضيحي هذه التي تمّ تجميعها باستخدام علامة
-gالمطلوبة. - يمكنك اختياريًا تجميع الملفات التي أنشأتها لتسهيل التنقّل. في المصادر، ضَع علامة في المربّع
> الصفحة > 
> التجميع حسب المؤلف/النشر 
. - اختَر ملف المصدر الأصلي من شجرة الملفات. وهي في هذه الحالة
mandelbrot.cc. لضبط نقطة توقّف لسطر تعليمات برمجية، انقر على رقم سطر في العمود على يمين المحرِّر، على سبيل المثال، في السطر 38.
شغِّل الرمز البرمجي مرة أخرى. يتوقّف التنفيذ مؤقتًا قبل السطر الذي يتضمّن نقطة التوقف.
أثناء إيقاف الفيديو مؤقتًا، جرِّب ما يلي:
- في المصادر > المحرِّر، مرِّر مؤشر الماوس فوق متغيّر للاطّلاع على قيمته في تلميح.
- في المصادر > تسلسل الاستدعاء، اطّلِع على أسماء الدوال كما هي في المصدر.
- في المصادر > النطاق، اطّلِع على المتغيّرات المحلية والعالمية وأنواعها وقيمها.
في وحدة التحكّم، يمكنك عرض المتغيّرات والعناصر التي يصعب الانتقال إليها في النطاق:
- يشير ذلك المصطلح إلى المتغيّرات المتداخلة بشدة، مثل العناصر المفهرَسة في الصفائف الكبيرة.
- الكائنات المعقّدة، بما في ذلك العناصر التي يمكنك الوصول إليها باستخدام المؤشرات (
->)، يُرجى توسيعها لفحصها.
- في المصادر > النطاق، انقر على رمز
لفتح أداة فحص الذاكرة وفحص وحدات البايت الأولية لذاكرة العنصر. للحصول على مزيد من المعلومات، يُرجى الاطّلاع على فحص ذاكرة WebAssembly.
أداء الملف التجاري
أثناء إعداد "أدوات مطوري البرامج" وفتحها، لا يتم تحسين الرمز الذي يتم تشغيله في Chrome. تم تصنيفها حسب المستوى لمنحك تجربة تصحيح أخطاء أفضل.
في هذه الحالة، لا يمكنك الاعتماد على console.time() وperformance.now() في الرمز البرمجي لتقييم الأداء. بدلاً من ذلك، استخدِم لوحة الأداء لإنشاء الملفات التعريفية.
بدلاً من ذلك، يمكنك تشغيل رمز وضع ال profiling بدون فتح "أدوات مطوّري البرامج"، ثم فتحها لفحص الرسائل في وحدة التحكّم.
فصل معلومات تصحيح الأخطاء
لتسريع عملية التحميل مع الحفاظ على تجربة تصحيح أخطاء أفضل، يمكنك تقسيم معلومات تصحيح الأخطاء إلى ملف .wasm منفصل. لمزيد من المعلومات، يُرجى الاطّلاع على تصحيح أخطاء WebAssembly بشكل أسرع.
يمكنك الاحتفاظ بهذا الملف محليًا أو استضافته على خادم منفصل. لتنفيذ ذلك باستخدام 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، قد تحتاج إلى ربط مسارات ملف تصحيح الأخطاء يدويًا.
على سبيل المثال، إذا كان مشروعك في C:\src\project محليًا ولكن تم إنشاؤه في حاوية Docker بالمسار /mnt/c/src/project، يمكنك إجراء ما يلي:
- انتقِل إلى
chrome://extensions/وابحث عن الإضافة دعم C/C++ لدعم أدوات مطوّري البرامج (DWARF)، ثم انقر على التفاصيل > خيارات الإضافة. - حدِّد مسارَي الملفات القديم والجديد.
مزيد من المعلومات
يمكنك الاطّلاع على مدوّنة Chrome DevTools الهندسية للحصول على مزيد من المعلومات حول تصحيح أخطاء WebAssembly: