מדריך Visual Studio Express – ביצוע Debugging של דף CSHTML

ironshay ‏ • CodeValue

Debugging, או בשמו העברי – "ניפוי תקלות", הוא תהליך בו מתכנת עובר על קוד בחיפוש אחר מקור לתקלה מסויימת במטרה לתקנה. יש אפשרויות שונות לביצוע התהליך כגון כתיבת הודעות על המסך או לקובץ, הורדת קטעי קוד עדי למקד את הבעיה וכו'. Visual Studio מאפשר את ביצוע התהליך בצורה ויזואלית במסך הקוד, דרך אשר מקלה ומאיצה את מציאת התקלות ותיקונן.

במדריך זה נלמד לדבג דףCSHTML המכיל קוד #C. נתחיל קודם בבניית הדף – עקבו אחרי השלבים הבאים כדי לעשות זאת:

פתחו את Visual Studio Web Developer Express ולחצו על …File -> New Web Site כמוצג בתמונה הבאה:
בחלונית שנפתחת, בחרו בסוג פרוייקט מסוג (ASP.NET Web Site (Razor ולחצו על OK כמוצג בתמונה הבאה:

כעת הפרוייקט יפתח בדף הראשי (default.cshtml). החליפו את הקוד הכתוב בקוד הבא:


@{
   string result = String.Empty;
    if (IsPost)   {
      int num1 = Request["tbNum1"].AsInt();
      int num2 = Request["tbNum2"].AsInt();
      int addResult = num1 + num1;
      result = addResult.ToString();
    }
}
<html>
<head>
   <title></title>
</head>
<body>
   <form method="post" action="">
   <h1>Calculator</h1>
   <input type="text" name="tbNum1" value="@Request["tbNum1"]" />
   +
   <input type="text" name="tbNum2" value="@Request["tbNum2"]" />
   <input type="submit" value="  =  " />
   <b>@result</b>
   </form>
</body>
</html>

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

כעת לחצו על הכפתור עם הסימן "=" ותקבלו את התוצאה הבאה:

אך אבוי, יש לנו תקלה! הביטוי 5+6 שווה 11 ולא 10! עלינו למצוא את התקלה ונעשה זאת בעזרת יכולות ה debugging של Visual Studio. עקבו אחרי השלבים הבאים:

השלב הראשון בתהליך ה debugging (ברוב המוחלט של הפעמים) הוא קביעת נקודת עצירה (breakpoint) בקוד. נקודת עצירה היא שורת קוד שכאשר התכנית תגיע אליה בזמן ריצה, היא תעצור ונוכל לתחקר את הקוד ואת ערכי המשתנים בתוך Visual Studio.

במקרה שלנו נשים את נקודת העצירה בשורה המתבצעת לאחר לחיצה על הכפתור עם הסימון "=".
כדי לשים נקודת עצירה, עמדו עם הסמן על השורה הבאה בקובץ:
```
int num1 = Request["tbNum1"].AsInt();
```
כעת לחיצה על F9 תוסיף נקודת עצירה בשורה זאת. ניתן גם ללחוץ על הפס האפור המופיע משמאל לשורה כדי להוסיף נקודת עצירה. לאחר ההוספה, תצבע השורה באדום ויתווסף עיגול אדום משמאלה, כמוצג בתמונה הבאה:
כעת נריץ את הפרוייקט במצב debug. ניתן לעשות זאת על ידי לחיצה על F5 או על ידי לחיצה על כפתור ה- “play” המופיע בסרגל הכלים העליון:
הרצת הפרוייקט במצב debug משמעותה שברגע שהמערכת תפעיל שורה המסומנת כנקודת עצירה בקוד, היא תעצור. הכניסו לתיבות הטקסט את המספרים חמש ושש ולחצו על כפתור ה- "=".

הלחיצה תגרום ל Visual Studio לעלות ולשורה שסומנה כנקודת עצירה להיות מסומנת בצבע צהוב, כמופיע בתמונה הבאה:
שורה המסמונת בצהוב מסמנת את השורה שעומדת להתבצע.
ניתן להמשיך לשורה הבאה על ידי לחיצה על F10, פעולה שנקראת Step Over. לחיצה זאת תגרום לשורה המסומנת בצהוב להתבצע ולסימון הצהוב לעבור לשורה הבאה. המצב לאחר הלחיצה יראה כך:
בנוסף על מעבר על שורות הקוד, במצב זה אנו יכולים לחקור את המשתנים השונים שיש לנו. לדוגמא, יתכן והבעיה שלנו היא בקליטת המספר מהמשתמש.

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

ניתן לזהות כבר כאן כי ככל הנראה הבעיה נמצאת בשורה זו מכיוון שאין יותר קוד עם לוגיקה בדף. נסו לעבור את השורה בעזרת (Step Over (F10 ולבדוק את הערך במשתנה addResult. שימו לב שהערך שיוצא אינו נכון – זיהינו את השורה הבעייתית!
אם נסתכל טוב, נזהה את הבעיה – אנו מבצעים חיבור של num1 + num1 במקום חיבור של num1 + num2.

כדי לתקן את הבעיה, נפסיק תחילה את ריצת התכנית על ידי לחיצה על Shift+F5 או לחיצה על כפתור ה “stop” בסרגל הכלים העליון:
כעת תקנו את הקוד והריצו שוב כדי לבדוק שאכן נפתרה הבעיה.

סיכום

תהליך ה debugging אינו תהליך מסובך וסביבת הפיתוח מקלה אותו אף יותר. המורכבות של התהליך נובעת ברוב הפעמים ממציאת הבעיה הלוגית וביצוע תיקון בצורה הנכונה בלי ליצור תקלות נוספות.

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

תגיות: .net, CSHTML, Visual Studio, מדריך, פיתוח

מדריך Visual Studio Express

מדריך Visual Studio Express – ביצוע Debugging של דף CSHTML

סיכום

עוד בנושא זה

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

תגיות