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