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

Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

  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 ו-dec ל-floats. מתג קידוד

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

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

  1. יש לבצע את השלבים הבאים כדי להתחיל את ניפוי הבאגים.
  2. משנים את הכתובת ל-0x00000027 בקלט הכתובת. קלט הכתובת
  3. חשוב להקפיד על ייצוג ASCII ועל פירושי הערכים. כל הערכים ריקים כרגע.
  4. שימו לב ללחצן מעבר לכתובת הכחול שלצד Pointer 32-bit ו-Pointer 64-bit. אפשר ללחוץ עליה כדי לעבור לכתובת. הלחצנים מופיעים באפור ואי אפשר ללחוץ עליהם אם הכתובות לא תקינות. לחצן מעבר לכתובת
  5. לוחצים על Resume Script (המשך ההפעלה של הסקריפט) כדי להמשיך בקוד. המשך ביצוע הסקריפט
  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. בחלונית כלי לניפוי באגים, מרחיבים את היקף > מקומי.

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

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

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

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

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

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