מדריך Internet Explorer 9 למפתחים – JavaScript Debugger

רן בר-זיק ‏ • Internet Israel

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

בואו וניצור דף HTML פשוט שיסייע לנו בלימוד.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test page</title>
<script> 
    alert("Hello");
    var age;
    age = prompt("Insert your age","");
    alert("your age is: " + age + " years");
    var name;
    name = prompt("Insert your name","");
    alert("Your name is:\n " + name + "\nYour age");
</script> 
    </head>
    <body>
        <h1>This is test page</h1>
        <p>Hello world!</p>
    </body>
</html>

לאלו מכם שמתעצלים להעתיק ולהדביק – הנה כתובתו של הדף ברשת: http://www.internet-israel.com/internet_files/javascript/example.html

הסקריפט המופיע בדף הוא פשוט ביותר וקל להבנה. בואו ונראה מה אנו יכולים לעשות איתו! נפתח את כלי המפתחים של אינטרנט אקספלורר 9 ונפתח את לשונית Script:

הסקריפט יתגלה במלוא הדרו, בואו ונלחץ עם הכפתור השמאלי של העכבר מימין ל-alert השני:

יצירת נקודת עצירה

מה שיקרה הוא שתיווצר נקודה אדומה:

נקודת עצירה

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

להתחיל לדבג

הסקריפט יתחיל לרוץ כרגיל, אנו נקליד ערך כלשהו ב-prompt (למשל 33) ופתאום הסקריפט יעצור לנו ולא ימשיך הלאה. מדוע? כי הגענו לנקודת העצירה. אם נסתכל על כלי המפתחים אנו נוכל לראות שמשהו השתנה:

breakpoint

מצד אחד, אנו יכולים לראות שהיכן שיש לנו את נקודת העצירה יש דגש. מצד ימין, אם נבחר בלשונית locals, אנו יכולים לראות את כל המשתנים שלנו (גם אלו שלא הוגדרו עדיין) – ושם נראה את משתנה age שכולל את מה שהכנסנו! לא גאוני? מה שיפה הוא, שאנו יכולים לבחון גם מערכים ואובייקטים. var age

אנו יכולים לבחון את הקונסולה עם console ואת כל נקודות העצירה באמצעות Breakpoints, אבל ההצגה האמיתית מתרחשת ב-Locals.

על מנת להמשיך הלאה, אנו נלחץ על כפתור ההמשך:

המשך בדיבאגר

הסקריפט ימשיך לרוץ עד הסיום המיוחל.

אם יש יותר מדי משתנים, אנו יכולים לחפש אותם באמצעות watch:

watch

אנו יכולים להכניס שם של משתנה ולמצוא אותו, למשל המשתנה age:

watch var

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

תגיות: IE9, מדריך, פיתוח

מדריך Internet Explorer 9 למפתחים

מדריך Internet Explorer 9 למפתחים – JavaScript Debugger

עוד בנושא זה

תגובות בפייסבוק

תגיות