סוקר הזיכרון: בדיקת ArrayBuffer, TypedArray, DataView וזיכרון Wasm.

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

אפשר להשתמש בבודק הזיכרון כדי לבדוק את הזיכרון של ArrayBuffer, ‏ TypedArray ו-DataView ב-JavaScript, וגם את WebAssembly.Memory של אפליקציות Wasm שנכתבו ב-C++.

סקירה כללית

בודק הזיכרון מארגן את תוכן הזיכרון ומאפשר לנווט במהירות במערכים גדולים. אפשר להציג את ערכי ה-ASCII של תוכן הזיכרון ישירות ליד הבייטים, ולבחור endianness שונה. כדי לשפר את תהליך העבודה, כדאי להשתמש בכלי לבדיקת זיכרון בזמן ניפוי הבאגים באפליקציית האינטרנט.

פתיחת הכלי לבדיקת זיכרון

יש כמה דרכים לפתוח את הכלי לבדיקת זיכרון.

פתיחה מהתפריט

  1. פותחים את כלי הפיתוח.
  2. לוחצים על אפשרויות נוספות עוד > כלים נוספים > כלי לבדיקת זיכרון. התפריט של בודק הזיכרון

פתיחה במהלך ניפוי הבאגים

  1. פותחים דף עם JavaScript ArrayBuffer. נשתמש בדף ההדגמה הזה.
  2. פותחים את כלי הפיתוח.
  3. פותחים את הקובץ demo-js.js בחלונית מקורות, ומגדירים נקודת עצירה בשורה 18.
  4. יש לרענן את הדף.
  5. מרחיבים את הקטע היקף בחלונית כלי ניפוי הבאגים שמשמאל.

  6. אפשר לפתוח את הכלי לבדיקת זיכרון:

    • דרך הסמל. לוחצים על הסמל שלצד המאפיין buffer, או
    • מתפריט ההקשר. לוחצים לחיצה ימנית על המאפיין buffer ובוחרים באפשרות Reveal in Memory Inspector panel.

    הצגה בחלונית בודק הזיכרון

בדיקה של כמה אובייקטים

  1. אפשר גם לבדוק את DataView או את TypedArray. לדוגמה, b2 הוא TypedArray. כדי לבדוק את זה, לוחצים לחיצה ימנית על המאפיין b2 ובוחרים באפשרות הצגה בחלונית של Memory Inspector (עדיין אין סמל ל-TypedArray או ל-DataView).
  2. תיפתח כרטיסייה חדשה בכלי לבדיקת זיכרון. חשוב לזכור שאפשר לבדוק כמה אובייקטים בו-זמנית. כרטיסייה חדשה בבודק הזיכרון

הכלי לבדיקת זיכרון

הכלי לבדיקת זיכרון

בודק הזיכרון מורכב מ-3 אזורים עיקריים:

סרגל הניווט

  1. בaddress input מוצגת כתובת הביתט הנוכחית בפורמט הקסדצימלי. אפשר להזין ערך חדש כדי לקפוץ למיקום חדש במאגר הזיכרון. לדוגמה, אפשר לנסות להקליד 0x00000008.
  2. מאגרי נתונים זמניים בזיכרון יכולים להיות ארוכים יותר מדף. במקום לגלול, אפשר להשתמש בלחצן השמאלי ובלחצן הימני כדי לנווט.
  3. הלחצנים שבצד ימין מאפשרים ניווט קדימה/לאחור.
  4. כברירת מחדל, המאגר מתעדכן באופן אוטומטי כשעוברים בין שלבים. אם הוא לא מעודכן, אפשר ללחוץ על הלחצן רענון כדי לרענן את הזיכרון ולעדכן את התוכן שלו.

מאגר נתונים זמני בזיכרון

מאגר נתונים זמני בזיכרון

  1. בצד ימין, address מוצג בפורמט הקסדצימלי.
  2. גם הזיכרון מוצג בפורמט הקסדצימלי, וכל בית מופרד באמצעות רווח. הבייט שנבחר מודגש. אפשר ללחוץ על הבייט או לנווט באמצעות המקלדת (שמאלה, ימינה, למעלה, למטה).
  3. בצד שמאל מוצגת ייצוג ASCII של הזיכרון. ההדגשה מראה את הערך התואם לביטים שנבחרו בייט. בדומה לזיכרון, אפשר ללחוץ על הבייט או לנווט באמצעות המקלדת (שמאלה, ימינה, למעלה, למטה).

הכלי לבדיקת ערכים

הכלי לבדיקת ערכים

  1. בסרגל הכלים העליון יש כפתור שמאפשר לעבור בין big endian ל-little endian ולפתוח את ההגדרות. פותחים את ההגדרות כדי לבחור את סוגי הערכים שרוצים שיוצגו כברירת מחדל בבודק. לחצן בסרגל הכלים
  2. באזור הראשי מוצגות כל הפירושים של הערכים בהתאם להגדרות. כברירת מחדל, כולם מוצגים.
  3. אפשר ללחוץ על הקידוד. אפשר לעבור בין dec,‏ hex,‏ oct למספרים שלמים, ובין sci,‏ dec למספרים עשרוניים. מתג קידוד

בדיקת הזיכרון

נבדוק את הזיכרון ביחד.

  1. כדי להתחיל את ניפוי הבאגים, פועלים לפי השלבים הבאים.
  2. משנים את הכתובת ל-0x00000027 בהזנת הכתובת. כניסת כתובת
  3. בודקים את הצגת ה-ASCII ואת פרשנויות הערכים. כל הערכים ריקים כרגע.
  4. שימו לב ללחצן הכחול מעבר לכתובת לצד Pointer 32-bit ו-Pointer 64-bit. אפשר ללחוץ עליו כדי לעבור לכתובת. אם הכתובות לא תקינות, הלחצנים מופיעים באפור ואי אפשר ללחוץ עליהן. לחצן מעבר לכתובת
  5. לוחצים על המשך ביצוע הסקריפט כדי לעבור על הקוד. המשך ביצוע הסקריפט
  6. שימו לב שהתצוגה של ASCII מעודכנת עכשיו. גם כל הפירושים של הערכים מתעדכנים. כל הפירושים של הערכים מתעדכנים
  7. נשנה את ההגדרות של כלי לבדיקת ערכים כך שיוצגו רק נקודות צפות. לוחצים על הלחצן settings (הגדרות) ומסמנים רק את האפשרויות Float 32-bit (מספר ממשי (float) ב-32 ביט) ו-Float 64-bit (מספר ממשי (float) ב-64 ביט). הגדרות להתאמה אישית של הכלי לבדיקת ערכים
  8. נשנה את הקידוד מ-dec ל-sci. שימו לב שהתצוגות של הערכים מתעדכנות בהתאם. משנים את הקידוד.
  9. מנסים לנווט במאגר הזיכרון באמצעות המקלדת או באמצעות סרגל הניווט. חוזרים על שלב 4 כדי לראות את השינויים בערכים.

בדיקת זיכרון של WebAssembly

האובייקט WebAssembly.Memory הוא ArrayBuffer שמכיל את הבייטים הגולמיים של זיכרון האובייקט. בחלונית Memory Inspector אפשר לבדוק אובייקטים כאלה באפליקציות Wasm שנכתבו ב-C++‎.

כדי ליהנות מכל היתרונות של בדיקת WebAssembly.Memory:

  • להשתמש ב-Chrome מגרסה 107 ואילך. אפשר לבדוק את הגרסה בכתובת chrome://version/.
  • מתקינים את התוסף C/C++ DevTools Support (DWARF). זהו פלאגין לניפוי באגים באפליקציות WebAssembly של C/C++ באמצעות מידע על תוצאות ניפוי הבאגים של DWARF.

כדי לבדוק את WebAssembly.Memory של אובייקט:

  1. פותחים את כלי הפיתוח בדף ההדגמה הזה.
  2. בחלונית מקורות, פותחים את demo-cpp.cc ומגדירים נקודת עצירה בפונקציה main() בשורה 15: x[i] = n - i - 1;.
  3. צריך לטעון מחדש את הדף כדי להריץ את האפליקציה. הכלי לניפוי באגים מושהה בנקודת העצירה.
  4. בחלונית Debugger, מרחיבים את Scope (היקף) > Local (מקומי).

  5. לוחצים על הסמל הצגה בחלונית בודק הזיכרון. לצד המערך x: int[10].

    לחלופין, לוחצים לחיצה ימנית על המערך ובוחרים באפשרות הצגה בחלונית של Memory Inspector.

מערך x שנפתח ב-Memory Inspector.

כדי להפסיק את ההדגשה של זיכרון האובייקט, בחלונית Memory Inspector מעבירים את העכבר מעל תג האובייקט ולוחצים על הלחצן x.

הפסקת ההדגשה של זיכרון האובייקט.

מידע נוסף זמין במאמרים הבאים: