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