בלוג MSDN ישראל

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

• חלק 1 – מבוא
• חלק 2 – עבודה עם HTML ו- CSS
• חלק 3 – לדבג סקריפטים ב- JavaScript
• חלק 4 – לבצע Profiling ל- JavaScript
• חלק 5 – ביצועים ברשת ואופטימיזציה

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

לדבג JavaScript עם אינטרנט אקספלורר

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

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

להפעיל את הדיבאגר

כדי להפעיל את הדיבאגר, יש להציג את כלי המפתחים של אינטרנט אקספלורר (לחיצע על F12 או מהתפריט Tools->F12 Developers Tools), ולעבור לטאב Script.

כדי לשים breakpoint, נבחר שורה כלשהי בקוד ונלחץ על F9, או על הכפתור הימני ונבחר Add Breakpoint. כדי להתחיל לדבג נלחץ על Start Debugging.

אפליקציות Web רבות מכילות סקריפטים המשולבים בתוך קבצי ה- HTML וכן הפניות למספר קבצי JavaScript חיצוניים. כדי לדפדף ביניהם, נשתמש ברשימת הסקריפטים:

• טיפ: השתמשו בקיצור Ctrl+G כדי לקפוץ לשורה מסויימת בקובץ.

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

נשתמש בסרגל הכלים כדי כדי לבצע את הקוד שלב אחרי שלב על מנת לאתר את הבאגים:

או לחילופין נשתמש בקיצורי המקשים הבאים (בדיוק כמו ב- Visual Studio):

• F5 – המשך ריצת הקוד עד לנקודת העצירה הבאה
• Ctrl + Shift + B – עצור עכשיו (בפקודה הבאה)
• F11 – בצע את הפקודה הבאה, כולל כניסה לתוך פונקציות
• F10 – בצע את הפקודה הבאה, ודלג מעל פונקציות
• Shift + F11 – דלג החוצה – צא מהפונקציה הנוכחית

לחיצה ימנית על פקודה כלשהי בקוד תציג מספר אפשרויות מתקדמות נוספות:

• Set Next Statement – קובע את הפקודה הבאה לביצוע להיות הפקודה הנבחרת, ומדלג על על הקוד עד אליה.
• Run to cursor – מבצע את כל הקוד עד לפקודה שנבחרה.
• Add watch – מוסיף את המשתנה לרשימת המשתנים שנעקוב אחרי הערכים שלהם (פירוט בהמשך).

עבודה עם משתנים – Watch ו- Locals

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

אם נרחף עם העכבר מעל משתנים בקוד הסקריפט במהלך תהליך דיבאג, נוכל לקבל את ערכי המשתנים, החל מערכים פשוטים ועד לאובייקטים מורכבים יותר:

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

ערכים שהשתנו בעקבות הפקודה האחרונה שרצה צבועים באדום.

חלון ה- Watch מאפשר לעקוב אחרי משתנים שאנחנו בוחרים. אפשר להקליד לתוכו שמות של משתנים, או להוסיף אותם מחלון הקוד:

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

Call Stack – שרשרת הקריאות

אם במהלך תהליך הדיבאג נרצה להבין את שרשרת קריאות הפונקציות שהביאה את הקוד למיקום הנוכחי, נוכל להציץ בחלון ה- Call Stack.

אפשר לדפדף בין הפונקציות בשרשרת הקריאות ע”י דאבל קליק על השמות שלהן בחלון ה- Call Stack. המיקום הנוכחי בפונקציה שבחרנו יסומן באיזור הקוד בשורה ירוקה, בעוד השורה הבאה לביצוע תישאר בצבע צהוב.

שגיאות

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

באיזור ה- Console (בחלק הימני של כלי הפיתוח) נראה רשימה של הודעות ושגיאות. אם נלחץ על הקישורים שברשימת השגיאות, כדי לעבור ישירות לשורת הקוד הבעייתית. באתר MSDN תמצאו רשימת קודי שגיאה והצעות לפיתרון במגוון נושאים (מאבטחה ועד HTML5).

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

סידור קוד JavaScript

אתרים רבים משתמשים בקוד JavaScript מכווץ (minified) לצורך שיפורי ביצועים. בבואנו להציץ בקוד כזה, נראה שהוא מאד קשה להבנה.

ע”י שימוש בפקודה Format JavaScript, נוכל לקבל תצוגה הרבה יותר קריאה של אותו קוד:

עבודה עם ה- Console

איזור ה- Console קיבל טאב משלו החל מאקספלורר 9, אבל זמין גם בטאב ה- Script. באיזור זה מוצגות הודעות השגיאה שקורות תוך כדי ריצת הסקריפט, וכן הודעות שנכתבות במיוחד ע”י המפתח בעת שימוש באובייקט window.console לצורך tracing באפליקציה.

אפשר להשתמש בפונקציות הבאות כדי לכתוב הודעות מסוגים שונים לקונסול:

• console.log – הודעות לוג כלליות
• console.info – הודעות מסוג Information
• console.warn – הודעות מסוג warning
• console.error – הודעות מסוג Error
• console.assert – הצגת השגיאה רק אם תנאי כלשהו לא מתקיים

וכן בפונקציות הבאות:

• console.clear – ניקוי ההודעות בחלון הקונסול
• console.dir – מציג פרטים של אובייקט
• console.profile/profileEnd – מתחיל / מסיים תהליך profiling של סקריפט (פירוט בפרק 4 במדריך זה)

כדאי לבדוק האם האובייקט window.console זמין לפני השימוש בו לכתיבת הודעות לקונסול.

• טיפ: לא צריך להיות במצג דיבאג כדי לראות את ההודעות הנכתבות לקונסול. כל מה שנדרש הוא לפתוח את כלי הפיתוח ולעבור לטאב Console.

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

הרצת פקודות סקריפט בחלון הקונסול

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

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

• טיפ: השימוש ב- Console היא דרך מצויינת ללמוד פקודות ב- JavaScript או בספריות כגון jQuery.
• טיפ: פקודות המשנות את ה- DOM לא יגרמו לעדכון טאב ה- HTML באופן אוטומטי. כדי לרענן אותו בשינויים האחרונים יש ללחוץ על הכפתור . שימו לב שזה רק יבצע ריענון לטאב ה- HTML ולא ירענן את הדף בדפדפן (בשונה מלחיצה על כפתור ה- refresh של הדפדפן).

סיכום

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

תהנו!