تعرِض هذه المقالة أداة "فحص الذاكرة" التي تم طرحها في الإصدار 91 من Chrome. يتيح لك هذا الإجراء فحص ArrayBuffer وTypedArray وDataView وWasm Memory.
مقدمة
هل سبق لك أن أردت فهم البيانات في ArrayBuffer؟ قبل توفّر "أداة فحص الذاكرة"، كانت أدوات المطوّرين تتيح فقط إحصاءات محدودة حول ArrayBuffers. كان الفحص من طريقة العرض النطاق أثناء جلسة تصحيح الأخطاء يقتصر على عرض قائمة بالقيم الفردية ضمن مخزن الصفيف، ما جعل من الصعب فهم البيانات ككل. على سبيل المثال، تعرِض طريقة العرض النطاق المخزن المؤقت كنطاقات قابلة للتوسيع من الصفائف في المثال أدناه:
كان الانتقال إلى نطاق معيّن ضمن المخزن المؤقت مشكلة، إذ كان على المستخدم الانتقال للأسفل للوصول إلى هذا الفهرس أخيرًا. ولكن حتى لو كان من السهل الانتقال إلى موضع معيّن، فإنّ طريقة فحص القيم هذه هي عملية صعبة، إذ من الصعب معرفة معنى هذه الأرقام. على وجه الخصوص، ماذا لو لم يكن من المفترض تفسيرها على أنّها وحدات بايت فردية، ولكن على سبيل المثال كأرقام صحيحة 32 بت؟
فحص القيم باستخدام "أداة فحص الذاكرة"
في الإصدار 91 من Chrome، نقدّم أداة "مُدقّق الذاكرة" لفحص مخازن مصفوفات البيانات. ربما سبق لك استخدام أدوات فحص الذاكرة لعرض البيانات الثنائية التي تعرض المحتوى الثنائي في شبكة مع عناوين تلك البيانات، وتقدّم طرقًا مختلفة لتفسير القيم الأساسية. هذا ما تقدّمه لك "أداة فحص الذاكرة". باستخدام "أداة فحص الذاكرة"، يمكنك الآن عرض المحتوى والتنقّل فيه واختيار الأنواع التي سيتم استخدامها لتفسير القيم المتاحة. ويعرِض هذا التنسيق قيم ASCII مباشرةً بجانب البايتات، ويسمح للمستخدم باختيار ترتيب مختلف للبتّات. يمكنك الاطّلاع على طريقة عمل "أداة فحص الذاكرة" أدناه:
هل تريد تجربتها؟ للتعرّف على كيفية فتح "أداة فحص الذاكرة" وعرض مخزن مصفوفة (أو TypedArray أو DataView أو Wasm Memory) والاطّلاع على مزيد من المعلومات عن كيفية استخدامه، انتقِل إلى مستنداتنا حول "أداة فحص الذاكرة". جرِّب هذه الأمثلة البسيطة (للغة JavaScript وWasm وC++).
تصميم "أداة فحص الذاكرة"
في هذا الجزء، سنلقي نظرة على كيفية تصميم "أداة فحص الذاكرة" باستخدام Web Components، وسنعرض أحد أهداف التصميم التي حدّدناها وكيفية تنفيذها. إذا أردت الاطّلاع على مزيد من المعلومات، يمكنك الاطّلاع على مستند التصميم الخاص بأداة "مدقّق الذاكرة".
ربما اطّلعت على مشاركة المدوّنة حول نقل البيانات إلى Web Components، حيث نشر "جاك" دليلنا الداخلي حول كيفية إنشاء مكونات واجهة المستخدم باستخدام Web Components. تزامن نقل البيانات إلى Web Components مع عملنا على أداة Memory Inspector، ونتيجةً لذلك، قرّرنا تجربة النظام الجديد. في ما يلي مخطّط بياني يعرض المكوّنات التي أنشأناها لإنشاء "أداة فحص الذاكرة" (يُرجى العِلم أنّنا نُطلق عليها داخليًا اسم أداة فحص الذاكرة الخطية):
المكوّن LinearMemoryInspector هو المكوّن الرئيسي الذي يجمع المكوّنات الفرعية التي تشكل جميع العناصر في "أداة فحص الذاكرة". يأخذ العنصر بشكل أساسي Uint8Array وaddress، وعند تغيير أيّ منهما، ينشر البيانات إلى العناصر التابعة له، ما يؤدي إلى إعادة التقديم. يعرض الرمز LinearMemoryInspector نفسه ثلاثة مكوّنات فرعية:
LinearMemoryViewer(لعرض القيم)LinearMemoryNavigator(السماح بالتنقّل)LinearMemoryValueInterpreter(عرض تفسيرات مختلفة لأنواع البيانات الأساسية)
هذا المكوّن الأخير هو نفسه مكوّن رئيسي يعرض ValueInterpreterDisplay (لعرض القيم) وValueInterpreterSettings (لاختيار الأنواع التي تريد الاطّلاع عليها في العرض).
تم تصميم كل مكوّن ليمثّل مكوّنًا صغيرًا واحدًا فقط من واجهة المستخدم، بحيث يمكن إعادة استخدام المكوّنات إذا لزم الأمر. عند ضبط بيانات جديدة على مكوّن، يتم بدء عملية إعادة التقديم التي تعرض التغيير الذي تم إجراؤه على البيانات التي تم ضبطها على المكوّن. في ما يلي مثال على سير عمل يتضمّن مكوّناتنا، حيث يغيّر المستخدم العنوان في شريط العناوين، ما يؤدي إلى إجراء تعديل من خلال ضبط البيانات الجديدة، وفي هذه الحالة العنوان المطلوب عرضه:
يضيف LinearMemoryInspector نفسه كمستمع في LinearMemoryNavigator. يتم تنشيط الدالة addressChanged عند حدوث حدث address-changed. فور تعديل المستخدم الآن لإدخال العنوان، يتم إرسال الحدث المذكور أعلاه، ما يؤدي إلى استدعاء الدالة addressChanged. تحفظ هذه الدالة العنوان الآن داخليًا، وتُحدِّث مكوّناته الفرعية باستخدام أداة ضبط data(address, ..). تحفظ المكوّنات الفرعية العنوان داخليًا وتعيد عرض مشاهداتها، ما يؤدي إلى عرض المحتوى على هذا العنوان المحدّد.
هدف التصميم: جعل الأداء واستهلاك الذاكرة مستقلّين عن حجم ذاكرة التخزين المؤقت
كان أحد الجوانب التي أخذناها في الاعتبار أثناء تصميم "أداة فحص الذاكرة" هو أنّ أداء "أداة فحص الذاكرة" يجب أن يكون مستقلاً عن حجم المخزن المؤقت.
كما رأيت في الجزء السابق، يأخذ المكوّن LinearMemoryInspector UInt8Array لعرض القيم. في الوقت نفسه، أردنا التأكّد من أنّ "أداة فحص الذاكرة" لن تحتاج إلى الاحتفاظ بالبيانات بأكملها، لأنّ "أداة فحص الذاكرة" تعرض جزءًا منها فقط (على سبيل المثال، يمكن أن تصل سعة ذاكرة Wasm إلى 4 غيغابايت، ولا نريد تخزين 4 غيغابايت ضمن "أداة فحص الذاكرة").
وبالتالي، لضمان أن تكون سرعة "أداة فحص الذاكرة" واستهلاكها للذاكرة مستقلّين عن المخزن المؤقت الفعلي الذي نعرضه، نسمح لمكوّن LinearMemoryInspector بالاحتفاظ فقط بنطاق فرعي من المخزن المؤقت الأصلي.
لكي يعمل هذا الإجراء، يجب أن يأخذ LinearMemoryInspector أولاً مَعلمتَين إضافيتَين: memoryOffset وouterMemoryLength. يشير العنصر memoryOffset إلى البادئة التي يبدأ عندها Uint8Array، وهو مطلوب لعرض عناوين البيانات الصحيحة. يشير الرمز outerMemoryLength إلى طول المخزن المؤقت الأصلي، وهو مطلوب لفهم النطاق الذي يمكننا عرضه:
باستخدام هذه المعلومات، يمكننا التأكّد من أنّه لا يزال بإمكاننا عرض العرض نفسه كما كان من قبل (المحتوى حول address)، بدون توفّر جميع البيانات في الواقع. ماذا لو تم طلب عنوان مختلف يقع ضمن نطاق مختلف؟ في هذه الحالة، يُشغِّل LinearMemoryInspector RequestMemoryEvent، ما يؤدي إلى تعديل النطاق الحالي الذي يتم الاحتفاظ به. يظهر مثال أدناه:
في هذا المثال، ينتقل المستخدم إلى صفحة الذاكرة (يستخدم "أداة فحص الذاكرة" ميزة "نقل البيانات إلى ذاكرة التخزين المؤقت" لعرض أجزاء من البيانات)، ما يؤدي إلى تشغيل PageNavigationEvent، الذي يؤدي بدوره إلى تشغيل RequestMemoryEvent.
يبدأ هذا الحدث جلب النطاق الجديد، والذي يتم نشره بعد ذلك إلى المكوّن LinearMemoryInspector من خلال ضبط البيانات. ونتيجةً لذلك، نعرض البيانات التي تم جلبها حديثًا.
هل تعلم؟ يمكنك أيضًا فحص الذاكرة في رمز Wasm وC/C++.
لا يتوفّر "أداة فحص الذاكرة" ArrayBuffers في JavaScript فقط، بل يمكن استخدامه أيضًا لفحص ذاكرة Wasm والذاكرة التي تشير إليها مراجع/مشير C/C++ (باستخدام إضافة DWARF، جرِّبها إذا لم يسبق لك ذلك). يمكنك الاطّلاع على تصحيح أخطاء WebAssembly باستخدام أدوات حديثة هنا. نظرة سريعة على أداة فحص الذاكرة أثناء استخدامها لتصحيح أخطاء C++ الأصلية على الويب:
الخاتمة
قدّمت هذه المقالة أداة "مدقّق الذاكرة" وعرضت لمحة عن تصميمها. نأمل أن يساعدك "أداة فحص الذاكرة" في فهم ما يحدث في ArrayBuffer :-). إذا كانت لديك اقتراحات لتحسينها، يُرجى إعلامنا بها وإبلاغنا بأي أخطاء.
تنزيل قنوات المعاينة
ننصحك باستخدام إصدار Canary أو Dev أو الإصدار التجريبي من Chrome كمتصفّح التطوير التلقائي. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات DevTools، وتتيح لك اختبار واجهات برمجة تطبيقات منصات الويب المتطوّرة، وتساعدك في العثور على المشاكل في موقعك الإلكتروني قبل أن يعثر عليها المستخدمون.
التواصل مع فريق "أدوات مطوّري البرامج في Chrome"
استخدِم الخيارات التالية لمناقشة الميزات الجديدة أو التحديثات أو أي شيء آخر مرتبط بـ "أدوات مطوّري البرامج".
- يمكنك إرسال الملاحظات وطلبات الميزات إلينا على crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" باستخدام رمز خيارات إضافية > مساعدة > الإبلاغ عن مشكلة في "أدوات مطوّري البرامج" في "أدوات مطوّري البرامج".
- يمكنك نشر تغريدة على Twitter على @ChromeDevTools.
- يمكنك إضافة تعليقات على فيديوهات YouTube حول الميزات الجديدة في "أدوات مطوّري البرامج" أو فيديوهات YouTube حول نصائح حول "أدوات مطوّري البرامج".