تتناول هذه المقالة أداة "فحص الذاكرة" التي وصلت إلى الإصدار 91 من Chrome. ويسمح لك بفحص ArrayBuffer وTypedArray وDataView وWasm Memory.
مقدمة
هل أردت يومًا فهم البيانات في ArrayBuffer؟ قبل استخدام "أداة فحص الذاكرة"، كانت "أدوات مطوّري البرامج" تسمح فقط بالحصول على إحصاءات محدودة عن ArrayBuffers. اقتصر الفحص من عرض النطاق أثناء جلسة تصحيح الأخطاء على عرض قائمة بقيم فردية داخل المخزن المؤقت للصفيف، ما جعل من الصعب فهم البيانات ككل. على سبيل المثال، تُظهر طريقة عرض النطاق المورد الاحتياطي كنطاقات قابلة للتوسيع من المصفوفات في المثال التالي:
كان الانتقال إلى نطاق معين داخل المخزن الاحتياطي مشكلة، مما يتطلب من المستخدم التمرير لأسفل للوصول أخيرًا إلى هذا الفهرس. ولكن حتى إذا كان الانتقال إلى أحد المواضع أمرًا سهلاً، فإن طريقة inspecting القيم هذه مرهقة، إذ يصعب معرفة ما تعنيه هذه الأرقام. وبشكل خاص، ماذا لو كان يجب عدم تفسيرها كوحدات بايت مفردة، ولكن على سبيل المثال كأعداد صحيحة في 32 بت؟
فحص القيم باستخدام "أداة فحص الذاكرة"
في الإصدار 91 من Chrome، نقدّم أداة "فحص الذاكرة"، وهي أداة لفحص المخازن المؤقتة للصفائف. ربما تكون قد رأيت سابقًا أدوات فحص الذاكرة لعرض البيانات الثنائية، التي تُظهر المحتوى الثنائي في شبكة إلى جانب عناوينها، والتي توفر طرقًا مختلفة لتفسير القيم الأساسية. وهذا ما يقدّمه لك "أداة فحص الذاكرة". باستخدام "أداة فحص الذاكرة"، يمكنك الآن عرض المحتوى والتنقّل فيه واختيار الأنواع التي سيتم استخدامها لتفسير القيم المطروحة. وهي تعرض قيم ASCII بجوار وحدات البايت مباشرةً، وتتيح للمستخدم تحديد قيمة مختلفة لأحرف النهاية. ويمكنك الاطّلاع على أداة "فحص الذاكرة" وهي تعمل أدناه:
هل تريد تجربتها؟ للتعرّف على كيفية فتح "أداة فحص الذاكرة" وعرض المخزن المؤقت للصفيف (أو TypedArray أو DataView أو Wasm Memory) والمزيد من المعلومات حول كيفية استخدامه، يمكنك الانتقال إلى مستنداتنا على "أداة فحص الذاكرة". جربها على أمثلة الألعاب هذه (لـ JS وWasm وC++ ).
تصميم أداة "فحص الذاكرة"
في هذا الجزء، سنلقي نظرة على كيفية تصميم Memory Inspector (أداة فحص الذاكرة) باستخدام مكونات الويب، وسنعرض أحد أهداف التصميم التي كانت لدينا وكيف تم تنفيذها. إذا كنت فضوليًا وتريد رؤية المزيد، يمكنك إلقاء نظرة على مستند التصميم الخاص بنا في Memory Inspector (أداة فحص الذاكرة).
ربما تكون قد اطّلعت على مشاركة المدونة التي تتناول النقل إلى مكوّنات الويب، حيث نشر "جاك" دليلنا الداخلي حول كيفية إنشاء مكوّنات واجهة المستخدم باستخدام مكونات الويب. تزامن الترحيل إلى مكوّنات الويب مع عملنا على أداة 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 Memory والذاكرة المُشار إليها من خلال إشارات/مراجع C/C++ (باستخدام الإضافة DWARF، يمكنك تجربتها إذا لم تجرّبها بعد). راجع تصحيح أخطاء WebAssembly باستخدام الأدوات الحديثة هنا. نظرة صغيرة على Memory Inspector أثناء العمل على تصحيح الأخطاء الأصلية للغة C++ على الويب:
الخلاصة
قدمت هذه المقالة أداة "فحص الذاكرة" وأظهرت لمحة عن تصميمها. نأمل أن يساعدك "أداة فحص الذاكرة" في فهم ما يحدث في ArrayBuffer :-). إذا كانت لديك اقتراحات لتحسينها، يُرجى إعلامنا بها والإبلاغ عن خطأ.
تنزيل قنوات المعاينة
يمكنك استخدام إصدار Canary أو إصدار مطوّري البرامج أو الإصدار التجريبي من Chrome كمتصفّح تلقائي للتطوير. تتيح لك قنوات المعاينة هذه الوصول إلى أحدث ميزات "أدوات مطوري البرامج" واختبار واجهات برمجة التطبيقات المتطورة للأنظمة الأساسية على الويب والعثور على المشاكل في موقعك الإلكتروني قبل المستخدمين.
التواصل مع فريق "أدوات مطوري البرامج في Chrome"
يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".
- يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
- يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية
> مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج". - يمكنك نشر تغريدة على @ChromeDevTool.
- يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.