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

Jecelyn Yeen

Sofia Emelianova

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

סקירה כללית

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

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

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

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

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

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

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

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

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

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

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

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. בחלונית כלי לניפוי באגים, מרחיבים את היקף > מקומי.

5. לוחצים על הסמל ליד המערך x: int[10].

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

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

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

• הרחבת בודק הזיכרון לניפוי באגים ב-C/C++
• ניפוי באגים ב-WebAssembly באמצעות כלים מודרניים.