וובמאסטר - תיכנות ובניית אתרים

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

ironshay ,‏ CodeValue‏ ‏/‏ 17 מרץ, 2011
F+
F-

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

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

  1. פתחו את Visual Studio Web Developer Express ולחצו על …File -> New Web Site כמוצג בתמונה הבאה:
    Visual Studio Express - יצירת פרוייקט חדש עבור דוגמא לניפוי שגיאות
  2. בחלונית שנפתחת, בחרו בסוג פרוייקט מסוג (ASP.NET Web Site (Razor ולחצו על OK כמוצג בתמונה הבאה:
    Visual Studio Express - חלון יצירת פרוייקט חדש
  3. כעת הפרוייקט יפתח בדף הראשי (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>
    
  4. אחרי שהקוד הונח במקומו, הריצו את הדף. לאחר ההרצה הדף יפתח בדפדפן ויראה דומה לתמונה הבאה:
    Visual Studio Express - דף דוגמא המכיל תקלה שעלינו למצוא ולתקן
  5. עתה הכניסו מספרים בתיבות הטקסט, לדוגמא 5 ו- 6:
    Visual Studio Express - דף דוגמא המכיל תקלה שעלינו למצוא ולתקן
    כעת לחצו על הכפתור עם הסימן "=" ותקבלו את התוצאה הבאה:
    Visual Studio Express - דף דוגמא המכיל תקלה שעלינו למצוא ולתקן

 

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

  1. השלב הראשון בתהליך ה debugging (ברוב המוחלט של הפעמים) הוא קביעת נקודת עצירה (breakpoint) בקוד. נקודת עצירה היא שורת קוד שכאשר התכנית תגיע אליה בזמן ריצה, היא תעצור ונוכל לתחקר את הקוד ואת ערכי המשתנים בתוך Visual Studio.
    במקרה שלנו נשים את נקודת העצירה בשורה המתבצעת לאחר לחיצה על הכפתור עם הסימון "=".
    כדי לשים נקודת עצירה, עמדו עם הסמן על השורה הבאה בקובץ:
    int num1 = Request["tbNum1"].AsInt();
    
  2. כעת לחיצה על F9 תוסיף נקודת עצירה בשורה זאת. ניתן גם ללחוץ על הפס האפור המופיע משמאל לשורה כדי להוסיף נקודת עצירה. לאחר ההוספה, תצבע השורה באדום ויתווסף עיגול אדום משמאלה, כמוצג בתמונה הבאה:
    Visual Studio Express - סימון נקודת עצירה
  3. כעת נריץ את הפרוייקט במצב debug. ניתן לעשות זאת על ידי לחיצה על F5 או על ידי לחיצה על כפתור ה- “play” המופיע בסרגל הכלים העליון:
    Visual Studio Express - הרצת תכנית במצב ניפוי שגיאות
  4. הרצת הפרוייקט במצב debug משמעותה שברגע שהמערכת תפעיל שורה המסומנת כנקודת עצירה בקוד, היא תעצור. הכניסו לתיבות הטקסט את המספרים חמש ושש ולחצו על כפתור ה- "=".
    הלחיצה תגרום ל Visual Studio לעלות ולשורה שסומנה כנקודת עצירה להיות מסומנת בצבע צהוב, כמופיע בתמונה הבאה:
    Visual Studio Express - עצירה בנקודת עצירה
    שורה המסמונת בצהוב מסמנת את השורה שעומדת להתבצע.
  5. ניתן להמשיך לשורה הבאה על ידי לחיצה על F10, פעולה שנקראת Step Over. לחיצה זאת תגרום לשורה המסומנת בצהוב להתבצע ולסימון הצהוב לעבור לשורה הבאה. המצב לאחר הלחיצה יראה כך:
    Visual Studio Express - Step Over
  6. בנוסף על מעבר על שורות הקוד, במצב זה אנו יכולים לחקור את המשתנים השונים שיש לנו. לדוגמא, יתכן והבעיה שלנו היא בקליטת המספר מהמשתמש.
    כדי לראות את הערך שיש במשתנה num1, עמדו מעליו עם העכבר. הערך יוצג בחלונית שתפתח כמו בתמונה הבאה:
    Visual Studio Express - הצגת ערך משתנה
    ניתן לראות מכאן שהמספר הראשון נקלט טוב.
  7. לחצו שוב על F10 כדי להתקדם שורה נוספת ועברו עם העכבר מעל למשתנה num2. זהו כי המשתנה מכיל את המספר שש, כלומר - הקלט נקלט נכון וללא בעיה.
  8. כעת השורה המסומנת היא שורת הקוד השלישית:
    Visual Studio Express - תהליך ניפוי שגיאות
    ניתן לזהות כבר כאן כי ככל הנראה הבעיה נמצאת בשורה זו מכיוון שאין יותר קוד עם לוגיקה בדף. נסו לעבור את השורה בעזרת (Step Over (F10 ולבדוק את הערך במשתנה addResult. שימו לב שהערך שיוצא אינו נכון - זיהינו את השורה הבעייתית!
  9. אם נסתכל טוב, נזהה את הבעיה - אנו מבצעים חיבור של num1 + num1 במקום חיבור של num1 + num2.
    כדי לתקן את הבעיה, נפסיק תחילה את ריצת התכנית על ידי לחיצה על Shift+F5 או לחיצה על כפתור ה “stop” בסרגל הכלים העליון:
    Visual Studio Express - עצירת תכנית הרצה במצב ניפוי שגיאות
  10. כעת תקנו את הקוד והריצו שוב כדי לבדוק שאכן נפתרה הבעיה.

סיכום

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

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

ironshay, CodeValue

מייסד בחברת CodeValue. עובד כיועץ ומרצה בתחומים שונים כמו C#, שפות דינמיות ופיתוח אתרי אינטרנט. Microsoft Visual C# MVP. מחבר הספרים IronRuby Unleashed ו- ASP.NET 4 Programmer's Reference.
תגיות: Visual Studio‏  /  מדריך‏  /  פיתוח‏  /  .net‏  /  CSHTML‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות