WebAssembly מספק דרך להריץ באינטרנט, לדוגמה, קוד C/C++ במהירות מותאמת ולצד JavaScript. במסמך הזה נסביר איך להגדיר את כלי הפיתוח ל-Chrome ולהשתמש בהם כדי לנפות באגים בצורה טובה יותר באפליקציות כאלה.
אחרי שמגדירים כלי פיתוח, אפשר:
- בודקים את הקוד המקורי בקטע מקורות > עריכה.
- משהים את ההפעלה באמצעות נקודות עצירה של שורת קוד ועוברים לקוד המקור המקורי C/C++ ולא בקובץ הבינארי
.wasmשעבר הידור.
בזמן ההשהיה, אתם יכולים:
- מעבירים את העכבר מעל משתנים בקובץ המקור המקורי כדי לראות את הערכים שלהם.
- הסבר על שמות של פונקציות ב-Call Stack ועל משתנים בהיקף.
- ליצור פלט של מאפיינים עם היררכיה עמוקה ואובייקטים מורכבים באמצעות המסוף.
- יש לבדוק את זיכרון האובייקטים באמצעות הכלי לבדיקת זיכרון.
הגדרה
כדי להפעיל ניפוי באגים באמצעות C/C++ WebAssembly בכלי הפיתוח:
מוסיפים לאפליקציה מידע על תוצאות ניפוי הבאגים מ-DWARF. מריצים את המהדר האחרון של Emscripten ומעבירים אליו את הדגל
-g. לדוגמה:emcc -g source.cc -o app.htmlלמידע נוסף, ראו יצירת פרויקטים באמצעות מידע על ניפוי באגים.
מתקינים את התוסף C/C++ DevTools Support (DWARF) ל-Chrome.
ניפוי באגים
אחרי ההגדרה של כלי הפיתוח, אפשר לנפות באגים בקוד:
- פותחים את כלי הפיתוח כדי לבדוק את האתר. אפשר לנסות את המדריך הזה בדף ההדגמה הזה, שנאסף באמצעות הדגל הנדרש
-g. - אפשר לקבץ את הקבצים שיצרת כדי לנווט בקלות. בקטע מקורות, מסמנים את
> דף > 
> Group by Authored/Deployed 
- בוחרים את קובץ המקור המקורי מעץ הקבצים. במקרה הזה,
mandelbrot.cc. כדי להגדיר נקודת עצירה (breakpoint) של שורת קוד, לוחצים על מספר שורה בעמודה שמימין ל-Editor. לדוגמה, בשורה 38.
מריצים את הקוד שוב. הביצוע מושהה לפני השורה עם נקודת העצירה.
בזמן ההשהיה, כדאי לנסות את הפעולות הבאות:
- בקטע מקורות > Editor, מעבירים את העכבר מעל משתנה כדי לראות את הערך שלו בהסבר קצר.
- בקטע מקורות > Call Stack כדי להציג את שמות הפונקציות כפי שהן במקור.
- בקטע מקורות > היקף, הצגת משתנים מקומיים וגלובליים, הסוגים והערכים שלהם.
במסוף, משתני פלט ואובייקטים שקשה לנווט אליהם ב-Scope:
- משתנים בתוך משתנים, לדוגמה, פריטים שנוספו לאינדקס במערכים גדולים.
- אובייקטים מורכבים, כולל אובייקטים שאפשר לגשת אליהם באמצעות מצביעים (
->). צריך להרחיב אותן כדי לבדוק.
- בקטע מקורות > היקף, לוחצים על הסמל
כדי לפתוח את בודק הזיכרון ובודקים את הבייטים הגולמיים של זיכרון האובייקט. מידע נוסף זמין במאמר בדיקת זיכרון של 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]
פיתוח וניפוי באגים במכונות שונות
אם אתם בונים במכונה עם מערכת הפעלה שונה (קונטיינר, מכונה וירטואלית או שרת מרוחק) מזו שבמכונה שבה אתם מפעילים את Chrome, יכול להיות שתצטרכו למפות באופן ידני את נתיבי הקבצים לניפוי באגים.
לדוגמה, אם הפרויקט נמצא ב-C:\src\project באופן מקומי אבל נבנה בקונטיינר ב-Docker עם הנתיב /mnt/c/src/project, צריך לבצע את הפעולות הבאות:
- עוברים אל
chrome://extensions/, מוצאים את התוסף תמיכה בכלי פיתוח (DWARF) של C/++ ולוחצים על פרטים > אפשרויות תוסף. - מציינים את נתיב הקובץ הישן ואת נתיבי הקובץ החדש.
מידע נוסף
לקבלת מידע נוסף על ניפוי באגים ב-WebAssembly, כדאי לעיין בבלוג ההנדסה של Chrome DevTools: