במאמר הזה נסביר על 'בודק הזיכרון' בגרסה 91 של Chrome. היא מאפשרת לבדוק את ArayBuffer, TypedArray, DataView וזיכרון Wasm.
מבוא
רצית פעם להבין את הנתונים ב-ArrayBuffer? לפני 'בדיקת הזיכרון', כלי הפיתוח יכלו לקבל רק תובנות מוגבלות לגבי ArrayBuffers. הבדיקה מהתצוגה המפורטת היקף במהלך סשן של ניפוי באגים הוגבלה להצגת רשימה של ערכים בודדים בתוך מאגר הנתונים הזמני, ולכן היה קשה להבין את הנתונים בשלמותם. לדוגמה, התצוגה היקף מציגה את המאגר כטווחים מתרחבים של מערכים בדוגמה הבאה:
המעבר לטווח מסוים בתוך המאגר היה נקודת קושי, והמשתמש דרש גלילה למטה כדי להגיע בסופו של דבר לאינדקס הזה. אבל גם אם יהיה קל לנווט אל מיקום מסוים, השיטה הזו למעשה inspecting הערכים היא משימה מורכבת: קשה לדעת מה המשמעות של המספרים האלה. במיוחד, מה קורה אם אין לפרש אותם כבייטים בודדים, למשל כמספרים שלמים של 32 סיביות?
בדיקת ערכים באמצעות בודק הזיכרון
ב-Chrome 91 אנחנו מציגים את 'בודק הזיכרון', כלי לבדיקת מאגרי נתונים זמניים של מערכים. יכול להיות שבעבר כבר ראיתם כלים לבדיקת זיכרון כדי להציג נתונים בינאריים, שבהם מוצג התוכן הבינארי ברשת יחד עם הכתובות שלהם, ומציעים דרכים שונות לפרש את הערכים הבסיסיים. זה מה שבודק הזיכרון מביא לכם. עכשיו אפשר להשתמש ב'בדיקת הזיכרון' כדי לראות את התוכן, לנווט בו ולבחור את הסוגים שישמשו לפירוש הערכים שבידך. היא מציגה את ערכי ה-ASCII ישירות ליד הבייטים, ומאפשרת למשתמש לבחור קצה שונה. מה עושים אם 'בדיקת הזיכרון' פועלת?
רוצים לנסות? כדי לדעת איך לפתוח את 'בודק הזיכרון' ולהציג את מאגר המערך שלך (או TypedArray , DataView או Wasm Memory) למידע נוסף על אופן השימוש בו, כדאי לעיין במסמכי התיעוד שלנו במפקח הזיכרון. נסה את דוגמאות אלה לצעצועים (עבור JS , Wasm ו-C++ ).
עיצוב בודק הזיכרון
בחלק הזה נסביר איך 'בודק הזיכרון' עוצב באמצעות רכיבי אינטרנט, ונציג את אחד מיעדי התכנון שיצרנו ואיך יישמנו אותו. אם תרצו לקבל מידע נוסף, תוכלו לעיין במסמך התכנון שלנו למפקח הזיכרון.
אולי כבר ראיתם פוסט בבלוג שלנו על העברה לרכיבי אינטרנט, שבו דני פרסם את המדריך הפנימי שלנו לגבי בניית רכיבי ממשק משתמש באמצעות רכיבי אינטרנט. המעבר לרכיבי האינטרנט התרחש במהלך העבודה שלנו על מפקח הזיכרון, וכתוצאה מכך החלטנו לנסות את המערכת החדשה. בהמשך תוכלו לראות תרשים שמציג את הרכיבים שבנינו כדי ליצור את מפקח הזיכרון (שימו לב שבאופן פנימי אנחנו קוראים לו בודק זיכרון לינארי):
הרכיב LinearMemoryInspector הוא רכיב ההורה שמשלב את רכיבי המשנה שמרכיבים את כל הרכיבים ב'בודק הזיכרון'. בעיקרון הוא לוקח Uint8Array ו-address, ובכל שינוי של אחד מהם הוא מפיץ את הנתונים אל הצאצאים שלו, וכתוצאה מכך גורם לעיבוד מחדש. ה-LinearMemoryInspector עצמו מעבד שלושה רכיבי משנה:
LinearMemoryViewer(מציג את הערכים),LinearMemoryNavigator(מאפשר הניווט)LinearMemoryValueInterpreter(מוצגות פרשנויות מסוגים שונים של הנתונים הבסיסיים).
הרכיב השני הוא עצמו רכיב הורה, שמעבד את ValueInterpreterDisplay (מציג את הערכים) ואת ValueInterpreterSettings (בוחר את הסוגים שיוצגו במסך).
כל אחד מהרכיבים נועד לייצג רק רכיב אחד קטן של ממשק המשתמש, כך שניתן לעשות שימוש חוזר ברכיבים במקרה הצורך. בכל פעם שנתונים חדשים מוגדרים על רכיב, מופעל עיבוד מחדש שמשקף את השינוי בנתונים שמוגדרים ברכיב. בהמשך מוצגת דוגמה אחת לתהליך עבודה עם הרכיבים שלנו, שבו המשתמש משנה את הכתובת בסרגל הכתובות ופעולה זו מפעילה עדכון על ידי הגדרת הנתונים החדשים. במקרה הזה, הכתובת להצגה:
ה-LinearMemoryInspector מוסיף את עצמו כמאזין ב-LinearMemoryNavigator. הפונקציה addressChanged תופעל באירוע address-changed. ברגע שהמשתמש עורך עכשיו את קלט הכתובת, הפעולה הזו שולחת את האירוע הנ"ל כך שתתבצע קריאה לפונקציה addressChanged. הפונקציה הזו שומרת עכשיו את הכתובת באופן פנימי, ומעדכנת את רכיבי המשנה שלה באמצעות המגדיר data(address, ..). רכיבי המשנה שומרים את הכתובת באופן פנימי ומעבדים מחדש את התצוגות שלהם, תוך הצגת התוכן בכתובת הספציפית הזו.
עיצוב יעד: הפיכת הביצועים וצריכת הזיכרון ללא תלות בגודל המאגר הזמני
אחד ההיבטים שהיו לנו במהלך התכנון של מפקח הזיכרון היה שהביצועים של מפקח הזיכרון לא צריכים להיות תלויים בגודל המאגר.
כפי שראיתם בחלק הקודם, לרכיב LinearMemoryInspector נדרש UInt8Array כדי לעבד את הערכים. עם זאת, רצינו לוודא שבודק הזיכרון לא יצטרך לשמור את כל הנתונים, מכיוון שלוח הזיכרון מציג רק חלק מהם (למשל, Wasm Memory יכול להיות גדול כמו 4GB, ואנחנו לא רוצים לאחסן 4GB במפקח הזיכרון).
לכן, כדי לוודא שהמהירות וצריכת הזיכרון של בודק הזיכרון אינן קשורות למאגר הנתונים הזמני שאנחנו מציגים, אנחנו מאפשרים לרכיב LinearMemoryInspector לשמור רק טווח משנה של המאגר המקורי.
כדי שזה יעבוד, LinearMemoryInspector צריך קודם לכלול שני ארגומנטים נוספים: memoryOffset ו-outerMemoryLength. הערך memoryOffset מציין את הקיזוז, שבו מתחיל Uint8Array שהועבר, ונדרש לעיבוד הכתובות הנכונות של הנתונים. הערך outerMemoryLength הוא האורך של המאגר המקורי, והוא נדרש כדי להבין איזה טווח אפשר להציג:
בעזרת המידע הזה אנחנו יכולים לוודא שעדיין נוכל לעבד את אותה תצוגה כמו קודם (התוכן שמסביב ל-address), בלי שכל הנתונים יהיו במקומם. אז מה לעשות אם התבקשת כתובת אחרת, שתיכלל בטווח אחר? במקרה כזה, LinearMemoryInspector מפעיל RequestMemoryEvent, שמעדכן את הטווח הנוכחי שנשמר. זוהי דוגמה:
בדוגמה הזו, המשתמש מנווט בדף הזיכרון ('בודק הזיכרון' משתמש בהחלפה כדי להציג מקטעי נתונים), וכתוצאה מכך מופעל PageNavigationEvent, שבעצמו מפעיל RequestMemoryEvent.
האירוע הזה מתחיל לאחזר את הטווח החדש, ולאחר מכן מופץ אל הרכיב LinearMemoryInspector באמצעות הגדרת הנתונים. כתוצאה מכך, אנחנו מציגים את הנתונים החדשים שאוחזרו.
אה, וגם ידעת? אפשר אפילו לבדוק את הזיכרון ב-Wasm ובקוד C/C++
'בודק הזיכרון' אינו זמין רק עבור ArrayBuffers ב-JavaScript, אלא יכול לשמש גם לבדיקת זיכרון Wasm וזיכרון שאליו מפנים הפניות/מצביעים באמצעות C/C++ (באמצעות תוסף DWARF שלנו – כדאי לנסות אם עדיין לא עשית זאת! כדאי לעיין במאמר ניפוי באגים ב-WebAssembly באמצעות כלים מודרניים. מבט קצר על 'בודק הזיכרון' בפעולה לצורך ניפוי באגים במקור ב-C++ באינטרנט:
סיכום
במאמר הזה הוצג 'בודק הזיכרון' והצצה לעיצוב שלו. אנחנו מקווים שבודק הזיכרון יעזור לך להבין מה קורה ב-ArrayBuffer :-). אם יש לך הצעות לשיפור, נשמח לשמוע על כך ולדווח על באג.
הורדת הערוצים של התצוגה המקדימה
כדאי להשתמש ב-Chrome Canary, Dev או Beta כדפדפן הפיתוח בברירת מחדל. ערוצי התצוגה המקדימה האלה נותנים לך גישה לתכונות החדשות של כלי הפיתוח, בודקים ממשקי API מתקדמים של פלטפורמת האינטרנט ומוצאים בעיות באתר לפני שהמשתמשים יגלו אותן!
יצירת קשר עם צוות כלי הפיתוח ל-Chrome
אפשר להשתמש באפשרויות הבאות כדי לדון בתכונות החדשות ובשינויים בפוסט, או בכל דבר אחר שקשור לכלי הפיתוח.
- שלחו לנו הצעה או משוב דרך crbug.com.
- כדי לדווח על בעיה בכלי הפיתוח, לוחצים על אפשרויות נוספות
> עזרה > דיווח על בעיות בכלי הפיתוח בכלי הפיתוח. - אפשר לשלוח ציוץ אל @ChromeDevTools.
- אפשר לכתוב תגובות לגבי 'מה חדש' בסרטוני YouTube בכלי הפיתוח או בסרטונים ב-YouTube בקטע 'טיפים לשימוש בכלי הפיתוח'.