Facebook
Twitter
RSSמדריך Visual Studio Express – תהליך Debugging עבור דף ASP.NET
Debugging, או בשמו העברי – "ניפוי תקלות", הוא תהליך בו מתכנת עובר על קוד בחיפוש אחר מקור לתקלה מסויימת במטרה לתקנה. יש אפשרויות שונות לביצוע התהליך כגון כתיבת הודעות על המסך או לקובץ, הורדת קטעי קוד עדי למקד את הבעיה וכו'. Visual Studio מאפשר את ביצוע התהליך בצורה ויזואלית במסך הקוד, דרך אשר מקלה ומאיצה את מציאת התקלות ותיקונן.
במדריך זה נלמד לדבג את ה- code behind של דף ASP.NET. נתחיל קודם בבניית הדף – עקבו אחרי השלבים הבאים כדי לעשות זאת:
- צרו פרוייקט חדש מסוג ASP.NET Web Application.
- הוסיפו לפרוייקט דף חדש וקראו לו DebugTest. מסך הוספת הקובץ יראה דומה לתמונה הבאה:
- בדף ה ASPX, הכניסו את התוכן הבא:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DebugTest.aspx.cs" Inherits="WebApplication1.DebugTest" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Calculator</h1>
<asp:TextBox ID="tbNum1" runat="server"></asp:TextBox>
+
<asp:TextBox ID="tbNum2" runat="server"></asp:TextBox>
<asp:Button ID="btnCalculate" runat="server" Text=" = "
onclick="btnCalculate_Click" />
<asp:Label ID="lblResult" runat="server" Font-Bold="true" />
</div>
</form>
</body>
</html> - ב code behind של הדף הכניסו את הקוד הבא:
using System;
namespace WebApplication1
{
public partial class DebugTest : System.Web.UI.Page
{
protected void btnCalculate_Click(object sender, EventArgs e)
{
int num1 = int.Parse(tbNum1.Text);
int num2 = int.Parse(tbNum2.Text);
int result = Add(num1, num2);
lblResult.Text = result.ToString();
}
private int Add(int num1, int num2)
{
return num1 + num1;
}
}
}
אחרי שהקוד הונח במקומו, הריצו את הדף. לאחר ההרצה הדף יפתח בדפדפן ויראה דומה לתמונה הבאה:
עתה הכניסו מספרים בתיבות הטקסט, לדוגמא 5 ו- 6:
כעת לחצו על הכפתור עם הסימן "=" ותקבלו את התוצאה הבאה:
אך אבוי, יש לנו תקלה! הביטוי 5+6 שווה 11 ולא 10! עלינו למצוא את התקלה ונעשה זאת בעזרת יכולות ה debugging של Visual Studio. עקבו אחרי השלבים הבאים:
- השלב הראשון בתהליך ה debugging (ברוב המוחלט של הפעמים) הוא קביעת נקודת עצירה (breakpoint) בקוד. נקודת עצירה היא שורת קוד שכאשר התכנית תגיע אליה בזמן ריצה, היא תעצור ונוכל לתחקר את הקוד ואת ערכי המשתנים בתוך Visual Studio.
במקרה שלנו נשים את נקודת העצירה בשורה הראשונה שמתבצעת בעת לחיצה על הכפתור עם הסימון "=".כדי לשים נקודת עצירה, נפתח את קובץ ה code behind ונעמוד על השורה:
int num1 = int.Parse(tbNum1.Text);
כעת לחיצה על F9 תוסיף נקודת עצירה בשורה זאת. ניתן גם ללחוץ על הפס האפור המופיע משמאל לשורה כדי להוסיף נקודת עצירה. לאחר ההוספה, תצבע השורה באדום ויתווסף עיגול אדום משמאלה, כמוצג בתמונה הבאה:
- כעת נריץ את הפרוייקט במצב debug. ניתן לעשות זאת על ידי לחיצה על F5 או על ידי לחיצה על כפתור ה- “play” המופיע בסרגל הכלים העליון (מסומן בחץ):
- הרצת הפרוייקט במצב debug משמעותה שברגע שהמערכת תפעיל שורה המסומנת כנקודת עצירה בקוד, היא תעצור. הכניסו לתיבות הטקסט את המספרים חמש ושש ולחצו על כפתור ה- "=".
הלחיצה תגרום ל Visual Studio לעלות ולשורה שסומנה כנקודת עצירה להיות מסומנת בצבע צהוב, כמופיע בתמונה הבאה:
שורה המסמונת בצהוב מסמנת את השורה שעומדת להתבצע.
- ניתן להמשיך לשורה הבאה על ידי לחיצה על F10, פעולה שנקראת Step Over. לחיצה זאת תגרום לשורה המסומנת בצהוב להתבצע ולסימון הצהוב לעבור לשורה הבאה. המצב לאחר הלחיצה יראה כך:
- בנוסף על מעבר על שורות הקוד, במצב זה אנו יכולים לחקור את המשתנים השונים שיש לנו. לדוגמא, יתכן והבעיה שלנו היא בקליטת המספר מהמשתמש.
כדי לראות את הערך שיש במשתנה num1, עמדו מעליו עם העכבר. הערך יוצג בחלונית שתפתח כמו בתמונה הבאה:
ניתן לראות מכאן שהמספר הראשון נקלט טוב.
- לחצו שוב על F10 כדי להתקדם שורה נוספת ועברו עם העכבר מעל למשתנה num2. זהו כי המשתנה מכיל את המספר שש, כלומר – הקלט נקלט נכון וללא בעיה.
- כעת השורה המסומנת היא שורת הקוד השלישית:
ניתן לזהות כבר כאן כי ככל הנראה הבעיה נמצאת בשורה זו. ככל הנראה המתודה Add מחזירה ערך שגוי. לכן נרצה להכנס לקוד של המתודה ולדבג אותו.
אם נלחץ על F10, סביבת הפיתוח לא תעביר את הסימון הצהוב לשורות הקוד בתוך המתודה Add אלא תריץ את המתודה ותעבור לשורה הבאה במיקום הנוכחי. כדי "להכריח" את סביבת הפיתוח להעביר אותנו לקוד שבתוך המתודה, נלחץ על F11, פעולה הנקראת Step Into. תוצאת הפעולה תהיה מעבר לשורה הראשונה של המתודה Add, כמופיע בתמונה הבאה:
- לחצו על F10 כדי לעבור לשורת הקוד הראשונה.
- שימו לב שבאמת כאן נמצאת הבעיה שלנו! אנו מחברים num1 + num1 במקום לחבר num1 + num2.
כדי לתקן את הבעיה, נפסיק את הריצה על ידי לחיצה על Shift+F5 או לחיצה על כפתור ה “stop” בסרגל הכלים העליון:
- כעת תקנו את הקוד והריצו שוב כדי לבדוק שאכן נפתרה הבעיה.
סיכום
תהליך ה debugging אינו תהליך מסובך וסביבת הפיתוח מקלה אותו אף יותר. המורכבות של התהליך נובעת ברוב הפעמים ממציאת הבעיה הלוגית וביצוע תיקון בצורה הנכונה בלי ליצור תקלות נוספות.
במדריך זה עברנו על אפשרויות ה debugging של Visual Studio הבסיסיות ביותר. אם ברצונכם להעמיק את ידיעותיכם בתהליך, היעזרו במדריכים המופיעים כאן, כאן וכאן.
תגובות בפייסבוק