WebAssembly מאפשר לפעול, למשל, קוד C/C++ באינטרנט במהירות כמעט מותאמת ולצד JavaScript. במסמך הזה מוסבר איך להגדיר את כלי הפיתוח ל-Chrome ולהשתמש בהם כדי לנפות באגים בצורה טובה יותר באפליקציות כאלה.
אחרי שמגדירים את כלי הפיתוח, אפשר:
- בודקים את הקוד המקורי במקורות > עורך.
- השהיית הביצוע באמצעות נקודות עצירה של שורת הקוד והתקדם אל קוד המקור המקורי של C/C++, ולא אל הקובץ הבינארי
.wasmשעבר הידור.
בזמן ההשהיה אפשר:
- מעבירים את העכבר מעל המשתנים בקובץ המקור המקורי כדי לראות את הערכים שלהם.
- הסבר על שמות הפונקציות ב-Call Stack והמשתנים בהיקף ההרשאות.
- פלט מאפיינים בהיררכיה עמוקה ואובייקטים מורכבים במסוף.
- בדיקת זיכרון האובייקט באמצעות בודק הזיכרון.
הגדרה
כדי להפעיל ניפוי באגים ב-WebAssembly באמצעות C/C++ בכלי הפיתוח:
הידור האפליקציה בעזרת המידע על תוצאות ניפוי הבאגים של DWARF. מריצים את הידור Emscripten העדכני ביותר ומעבירים אליו את הדגל
-g. למשל:emcc -g source.cc -o app.htmlלמידע נוסף, אפשר לקרוא את המאמר יצירת פרויקטים עם מידע על תוצאות ניפוי באגים.
מתקינים את התוסף C/C++ DevTools Support (DWARF) ל-Chrome.
ניפוי באגים
אחרי שמגדירים כלי פיתוח, מבצעים ניפוי באגים בקוד:
- פותחים את כלי הפיתוח כדי לבדוק את האתר. במדריך הזה ניתן לנסות את התכונה בדף ההדגמה הזה, שהורכב עם הדגל
-gהנדרש. - אפשר גם לקבץ את הקבצים שיצרת כדי לאפשר ניווט קל יותר. במקורות, בודקים את
> דף > 
> קיבוץ לפי מחבר/פרוס 
. - בוחרים את קובץ המקור המקורי מעץ הקבצים. במקרה הזה,
mandelbrot.cc. כדי להגדיר נקודת עצירה של שורת קוד, לוחצים על מספר שורה בעמודה שמימין לעורך, לדוגמה, בשורה 38.
מריצים את הקוד שוב. הביצוע מושהה לפני הקו עם נקודת העצירה (breakpoint).
בזמן ההשהיה, כדאי לנסות את הפעולות הבאות:
- בקטע מקורות > עורך, מעבירים את העכבר מעל משתנה כדי לראות את הערך שלו בהסבר קצר.
- בקטע מקורות > מקבץ שיחות מציגים את השמות של הפונקציות כפי שהם במקור.
- בקטע מקורות > היקף, מציגים משתנים מקומיים וגלובליים, את הסוגים שלהם ואת הערכים שלהם.
במסוף, משתני פלט ואובייקטים שקשה לנווט אליהם בהיקף:
- משתנים שמוצבים בצורה עמוקה, לדוגמה, פריטים שנוספו לאינדקס במערכים גדולים.
- אובייקטים מורכבים, כולל אובייקטים שאפשר לגשת אליהם באמצעות מצביעים (
->). צריך להרחיב אותם כדי לבדוק.
- במקורות > היקף, לוחצים על הסמל
כדי לפתוח את בודק הזיכרון ולבדוק את הבייטים הגולמיים של זיכרון האובייקט. מידע נוסף זמין במאמר בדיקת זיכרון WebAssembly.
ביצועי הפרופיל
כשכלי הפיתוח מוגדרים ופותחים, הקוד ש-Chrome מריץ לא עובר אופטימיזציה. היא מדורגת כדי לספק לך חוויית ניפוי באגים טובה יותר.
במקרה הזה, לא ניתן להסתמך על console.time() ועל performance.now() בקוד שלכם לביצועי הפרופיל. במקום זאת, השתמשו בחלונית ביצועים כדי ליצור פרופיל.
לחלופין, אפשר להריץ את הקוד ליצירת פרופילים בלי לפתוח את כלי הפיתוח, ואז לפתוח אותו כדי לבדוק את ההודעות במסוף.
הפרדת המידע על תוצאות ניפוי הבאגים
כדי להאיץ את הטעינה ועדיין ליהנות מחוויית ניפוי באגים טובה יותר, אפשר לפצל את המידע על תוצאות ניפוי הבאגים לקובץ .wasm נפרד. מידע נוסף זמין במאמר ניפוי באגים מהיר יותר של WebAssembly.
אתם יכולים לשמור את הקובץ הזה באופן מקומי או לארח אותו בשרת נפרד. כדי לבצע את הפעולה עם Emscripten, מעבירים את הדגל -gseparate-dwarf=<filename> ומציינים את הנתיב אל הקובץ:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
בנייה וניפוי באגים במכונות שונות
אם אתם בונים מכונה עם מערכת הפעלה שונה (מאגר, VM או שרת מרוחק) מזו במחשב שבו אתם מריצים את Chrome, יכול להיות שתצטרכו למפות באופן ידני את הנתיבים של קובצי ניפוי הבאגים.
לדוגמה, אם הפרויקט נמצא ב-C:\src\project באופן מקומי, אבל הוא נבנה בקונטיינר של Docker עם הנתיב /mnt/c/src/project, צריך לבצע את הפעולות הבאות:
- עוברים אל
chrome://extensions/, מאתרים את התוסף C/C++ DevTools Support (DWARF) ולוחצים על פרטים > אפשרויות תוסף. - צריך לציין את נתיב הקובץ הישן ואת נתיב הקובץ החדש.
מידע נוסף
אפשר לקרוא מידע נוסף על ניפוי באגים ב-WebAssembly בבלוג המהנדסים של Chrome DevTools: