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

ג'סלין יין
ג'סלין יין
Twitter GitHub דף הבית
סופיה אמליאנובה
סופיה אמליאנובה
GitHub

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

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

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

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

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

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

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

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

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

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

בדיקה של מספר אובייקטים

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

בודק הזיכרון

בודק הזיכרון

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

סרגל הניווט

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

מאגר נתונים זמני

מאגר נתונים זמני

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

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

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

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

מתבצעת בדיקת זיכרון

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

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

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

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

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

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

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

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

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

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

מערך ה-x נפתח ב'בודק הזיכרון'.

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

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

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