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