Facebook
Twitter
RSSמדריך CSHTML – מבוא ל- Debugging
Debugging ("ניפוי שגיאות") הוא התהליך של איתור ותיקון שגיאות בדפי הקוד שלך. פרק זה מראה לך כמה כלים וטכניקות בהן ניתן להשתמש כדי לאתר באגים ולנתח את האתר שלך.
מה תלמד:
· כיצד להציג מידע העוזר לנתח באגים בדפים.
· כיצד להשתמש בכלים לאיתור באגים כגון: Internet Explorer Developer Tools ו- Firebug כדי לנתח את דפי האינטרנט.
בפרק זה נציג את:
· העוזר ServerInfo.
· העוזר ObjectInfo.
· כלים לניפוי שגיאות – Internet Explorer Developer Tools ו- Firebug.
היבט חשוב של פתרון בעיות שגיאות ובעיות בקוד שלך היא להימנע מהן מלכתחילה. ניתן לעשות זאת על ידי הצבת קטעי הקוד שעלולים לגרום לטעויות לתוך בלוקים של try/catch.
שימוש בעוזר ServerInfo כדי להציג מידע על השרת
העוזר ServerInfo הוא כלי אבחון הנותן לך סקירה של מידע על סביבת שרת האינטרנט שמארח את הדפים שלך. הוא גם מראה לך מידע על בקשות HTTP שנשלחות כאשר הדפדפן מבקש את הדף. העוזר ServerInfo מציג את זהות המשתמש הנוכחי, סוג הדפדפן שהגיש את הבקשה, וכן הלאה. מידע מסוג זה יכול לעזור לך לפתור בעיות נפוצות.
1. צור דף חדש בשם ServerInfo.cshtml.
2. בסוף העמוד, ממש לפני התג הסוגר <body/>, הוסף קריאה לפונקציה GetHtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@ServerInfo.GetHtml()
</body>
</html>
ניתן להוסיף את ServerInfo בכל מקום בקוד הדף. אבל הוספתו בסוף תגרום לפלט להיות בנפרד מהתוכן בדף שלך, מה שהופך אותו לקל יותר לקריאה.
הערה: עליך להסיר כל קוד אבחון מדפי האינטרנט שלך לפני שאתה מעביר את הדפים לשרת האינטרנט. עיקרון זה חל על העוזר
ServerInfoוכן על טכניקות אבחון אחרות בפרק זה הכרוכות בהוספת קוד לדף. אתה לא רוצה שמבקרים באתר שלך יוכלו לראות מידע על שם השרת שלך, שמות משתמשים, נתיבים בשרת, ופרטים דומים. מידע מסוג זה עלול להיות שימושי לאנשים עם כוונות זדוניות.
3. שמור את הדף והפעל אותו בדפדפן.
העוזר ServerInfo מציג ארבע טבלאות מידע בדף:
- Server Configuration (תצורת שרת). טבלה זו מספקת מידע על שרת האירוח של האתר, כולל שם המחשב, הגירסה של ASP.NET, שם ה- domain, וזמן שרת.
- ASP.NET Server Variables (משתנים בשרת). טבלה זו מספקת פרטים על משתנים של פרוטוקול HTTP והערכים המהווים חלק בכל בקשת דף אינטרנט.
- HTTP Runtime Information (מידע על HTTP בזמן ריצה). טבלה זו מספקת פרטים אודות הגירסה של Microsoft .NET Framework של דף האינטרנט שלך, הנתיב, פרטים על המטמון, וכן הלאה. (דפי CSHTMLבנויים על טכנולוגית שרת ASP.NET של מיקרוסופט, אשר מבוססת על פלטפורמה הנקראת NET Framework.).
- Environment Variables (משתני סביבה). טבלה זו מספקת רשימה של כל משתני הסביבה המקומיים והערכים שלהם על שרת האינטרנט.
תיאור מלא של המידע על השרת והבקשות הוא מעבר להיקף של הפרק הזה, אבל אתה יכול לראות שהעוזר ServerInfo מחזיר הרבה מידע אבחוני. לקבלת מידע נוסף אודות הערכים שהעוזר ServerInfo מחזיר, ראה Recognized Environment Variables באתר Microsoft TechNet ואת IIS Server Variables באתר MSDN.
שילוב ביטויי פלט כדי להציג ערכים של הדף
דרך נוספת לראות מה קורה בקוד שלך היא באמצעות שילוב ביטויי פלט בדף. כפי שאתה יודע, אתה יכול ישירות להציג את הערך של משתנה על ידי הוספת ביטויים לקוד כמו myVariable@ או (subTotal * 12)@ . לשם איתור באגים, אתה יכול למקם את הביטויים הללו בנקודות אסטרטגיות בתוך הקוד שלך. זה מאפשר לך לראות את הערך של משתנים עיקריים או תוצאה של חישובים כאשר הדף שלך פועל. כשתסיים לבדוק באגים, אתה יכול להסיר את הביטויים או לזמן אותם כהערה. הליך זה מדגים דרך טיפוסית להשתמש בביטויים משולבים בקוד כדי למצוא באגים בדף.
1. צור דף חדש בשם OutputExpression.cshtml.
2. החלף את תוכן הדף עם הקוד הבא:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@{
var weekday = DateTime.Now.DayOfWeek;
// כבדיקה, הוסף 1 למשתנה היום בשבוע
if (weekday.ToString() != "Saturday")
{
// אם המשתנה אינו שבת אזי הוסף 1 ליום בשבוע
weekday = weekday + 1;
}
else
{
// אם המשתנה הוא שבת אזי אפס אותו ל- 0 (יום ראשון)
weekday = 0;
}
// המר את מספר היום בשבוע למחרוזת
var weekdayText = weekday.ToString();
var greeting = "";
switch (weekdayText)
{
case "Monday":
greeting = "Ok, it's a marvelous Monday.";
break;
case "Tuesday":
greeting = "It's a tremendous Tuesday.";
break;
case "Wednesday":
greeting = "Wild Wednesday is here!";
break;
case "Thursday":
greeting = "All right, it's thrifty Thursday.";
break;
case "Friday":
greeting = "It's finally Friday!";
break;
case "Saturday":
greeting = "Another slow Saturday is here.";
break;
case "Sunday":
greeting = "The best day of all: serene Sunday.";
break;
default:
break;
}
}
<h2>@greeting</h2>
</body>
</html>
דוגמה זו משתמשת במבנה switch כדי לבדוק את הערך של המשתנה weekday ולאחר מכן להציג הודעת פלט מתאימה בהתאם ליום בשבוע זה. בדוגמה, הבלוק if בתוך קוד הבלוק הראשון באופן שרירותי משנה את היום בשבוע על-ידי הוספת יום אחד ליום הנוכחי. זוהי שגיאה למטרות ההמחשה זו בלבד.
3. שמור את הדף והפעל אותו בדפדפן.
הדף מציג את ההודעה על יום שגוי של השבוע. לא משנה מה היום בשבוע, תראה את ההודעה על יום אחד מאוחר יותר. אמנם במקרה הזה אתה יודע למה ההודעה שגויה (בגלל הקוד שבכוונה מגדיר ערך יום שגוי), במציאות זה בדרך כלל קשה יותר לדעת למה הדברים השתבשו. כדי לאתר באגים, אתה צריך לברר מה קורה לערך של אובייקטים עיקריים ומשתנים כמו weekday .
4. הוסף ביטויים להצגה על ידי הוספת weekday@ בשני המקומות המסומנים בקוד על ידי הערות. ביטויי הפלט יציגו את ערכי המשתנה בשלב ביצוע הקוד.
var weekday = DateTime.Now.DayOfWeek;
// weekday הצגת הערך הראשוני של המשתנה
@weekday
if (weekday.ToString() != "Saturday")
{
weekday = weekday + 1;
}
else
{
weekday = 0;
}
// weekday הצגת הערך העדכני של המשתנה
@weekday
var weekdayText = weekday.ToString();
5. שמור את הדף והפעל אותו בדפדפן.
הדף מציג קודם כל את היום האמיתי של השבוע, ואז את היום המעודכן של השבוע (לאחר הוספת יום אחד), ולאחר מכן את הודעת הפלט הנובעת ממבנה ה- switch. אין רווח בין הפלט של שני הביטויים המציגים את המשתנה weekday, כי אתה לא מוסיף שום תגיות פלט HTML (כמו <p>); הביטויים הם רק לצורך הבדיקות.
עכשיו אתה יכול לראות איפה הבעיה. בפעם הראשונה שאתה מציג את המשתנה weekday בקוד, הוא מציג את היום הנכון. כשאתה מציג את המשתנה בפעם השניה, לאחר הבלוק if שבקוד, היום התקדם באחד, אז אתה יודע שמשהו קרה בין ההופעה הראשונה להופעה השנייה של המשתנה weekday. אם זה היה באג אמיתי, סוג של גישה יעזור לך לצמצם את המיקום של הקוד הגורם לבעיה.
6. תקן את הקוד בדף על-ידי הסרת שני ביטויי הפלט שהוספת, והסרת הקוד שמשנה את היום בשבוע. הקוד שנשאר לאחר מכן הוא:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@{
var weekday = DateTime.Now.DayOfWeek;
var weekdayText = weekday.ToString();
var greeting = "";
switch (weekdayText)
{
case "Monday":
greeting = "Ok, it's a marvelous Monday.";
break;
case "Tuesday":
greeting = "It's a tremendous Tuesday.";
break;
case "Wednesday":
greeting = "Wild Wednesday is here!";
break;
case "Thursday":
greeting = "All right, it's thrifty Thursday.";
break;
case "Friday":
greeting = "It's finally Friday!";
break;
case "Saturday":
greeting = "Another slow Saturday is here.";
break;
case "Sunday":
greeting = "The best day of all: serene Sunday.";
break;
default:
break;
}
}
<h2>@greeting</h2>
</body>
</html>
7. הפעל את הדף בדפדפן. הפעם אתה רואה את ההודעה הנכונה המציגה את היום הנכון של השבוע.
שימוש בעוזר ObjectInfo כדי להציג ערכים של אובייקטיים
העוזר ObjectInfo מציג את סוג הערך של כל אובייקט שאתה מעביר לו. אתה יכול להשתמש בו כדי להציג את הערך של המשתנים והאובייקטים בקוד שלך (כמו שעשית עם ביטויי הפלט בדוגמה הקודמת), ובנוסף אתה יכול לראות את המידע על סוג הנתונים של האובייקט.
1. פתח את הקובץ בשם OutputExpression.cshtml שיצרת קודם לכן.
2. החלף את כל הקוד של הדף עם הקוד הבא:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
@{
var weekday = DateTime.Now.DayOfWeek;
@ObjectInfo.Print(weekday)
var weekdayText = weekday.ToString();
var greeting = "";
switch (weekdayText)
{
case "Monday":
greeting = "Ok, it's a marvelous Monday.";
break;
case "Tuesday":
greeting = "It's a tremendous Tuesday.";
break;
case "Wednesday":
greeting = "Wild Wednesday is here!";
break;
case "Thursday":
greeting = "All right, it's thrifty Thursday.";
break;
case "Friday":
greeting = "It's finally Friday!";
break;
case "Saturday":
greeting = "Another slow Saturday is here.";
break;
case "Sunday":
greeting = "The best day of all: serene Sunday.";
break;
default:
break;
}
}
@ObjectInfo.Print(greeting)
<h2>@greeting</h2>
</body>
</html>
3. שמור והפעל את הדף בדפדפן.
בדוגמה זו, העוזר ObjectInfo מציג שני פריטים:
o הסוג (type) – עבור המשתנה הראשון, הסוג הוא DayOfWeek . עבור המשתנה השני, הסוג הוא String .
o הערך (value) – הערך של המשתנה (מה הוא מכיל בתוכו). המשתנה הראשון מכיל את היום בשבוע (לדוגמה, Friday), הערך השני מכיל את המחרוזת שמוצגת לאחר מכן (לדוגמה, "!It's finally Friday").
עבור אובייקטים מורכבים יותר, העוזר ObjectInfo יכול להציג מידע נוסף – הוא יכול להציג את סוגי הערכים של כל המאפיינים שבאובייקט.
שימוש בכלים לאיתור באגים
בנוסף להצגת מידע על הדף כדי לעזור לך למצוא באגים, אתה יכול להשתמש בכלים המספקים מידע על איך הדפים רצים בדפדפן. סעיף זה מראה לך כיצד להשתמש בכלי האבחון הפופולריים ביותר עבור דפי אינטרנט היכולים לעזור לך במציאת באגים באתר שלך.
Internet Explorer Developer Tools
Internet Explorer Developer Tools היא חבילה של כלי אינטרנט המובנים ב-Internet Explorer מגירסה 8 ואילך. (עבור גירסאות קודמות של IE ניתן להוריד ולהתקין את החבילה Internet Explorer Developer Tools מאתר ההורדות של מיקרוסופט). כלי זה אינו ספציפי למציאת באגים בקוד CSHTML, אבל יכול להיות מאוד שימושי עבור איתור באגים ב- HTML, CSS , ובקוד סקריפט, כולל תגיות וקוד הנוצרים באופן דינמי באמצעות CSHTML.
הליך זה נותן לך מושג איך לעבוד עם כלי המפתחים של Internet Explorer. ההנחה היא שאתה עובד עם Internet Explorer 8 ומעלה.
1. דפדף אל דף אינטרנט ציבורי, כגון http://www.microsoft.com.
2. הקש על מקש F12 (או בחר באפשרות כלי פיתוח מתפריט כלים).
3. לחץ על הכרטיסיה HTML, פתח את התגית <html>, ולאחר מכן את התגית <body>. החלון מציג את כל התגיות שבתוך התגית <body>.
4. בחלונית הימנית, לחץ על הכרטיסייה Attributes (תכונות) כדי לראות את התכונות של התגית <body> :
5. בחלונית הימנית, לחץ על Style (סגנון) כדי לראות את סגנונות ה CSS אשר חלים על תגית <body> של הדף.
כדי ללמוד עוד אודות כלי המפתחים של Internet Explorer, ראה את המאמר Discovering Internet Explorer Developer Tools ב-MSDN האתר.
Firebug
Firebug הוא תוספת עבור Mozilla Firefox המאפשר לך לבדוק את תגיות ה-HTML וקוד ה- CSS, ניפוי שגיאות קוד לקוח, הצגת עוגיות והצגת מידע נוסף על הדף. ניתן להתקין את Firebug מאתר http://getfirebug.com. כמו עם כלי המפתחים של Internet Explorer, גם כלי זה אינו ספציפי לאיתור באגים בקוד CSHTML, אבל יכול להיות מאוד שימושי עבור בחינת ה-HTML ורכיבי דף אחרים, כולל אלה ש- CSHTML מייצר באופן דינמי.
הליך זה מראה לך כמה דברים שאתה יכול לעשות עם Firebug לאחר שהתקנת אותו.
1. בדפדפן Firefox, גלוש לאתר אינטרנט ציבורי, כגון http://www.microsoft.com.
2. הקש על מקש F12 או מתפריט כלים, לחץ על Firebug, ולאחר מכן לחץ על Open Firebug.
3. בחלון הראשי של Firebug, לחץ על הכרטיסיה HTML ולאחר מכן הרחב את התגית <html> בחלונית השמאלית (בגירסה העברית של Firefox – בחלונית הימנית).
4. בחר את התגית <body>, ולאחר מכן לחץ על הכרטיסיה Style (סגנון) שבחלונית. Firebug מציג מידע על הסגנון באתר מיקרוסופט.
Firebug כולל אפשרויות רבות עבור עריכה ואימות של תגיות HTML וסגנונות CSS, איתור באגים ושיפור הקוד שלך. בכרטיסייה Net, אתה יכול לנתח את תעבורת הרשת בין שרת דף האינטרנט (בדומה לכרטיסיה Network הקיימת בכלי המפתחים של IE9). לדוגמה, תוכל לעקוב אחר הדף שלך ולראות כמה זמן לוקח להוריד את כל התוכן לדפדפן.
כדי ללמוד עוד על Firebug, ראה את התיעוד באתר getfirebug.com/wiki .
תגובות בפייסבוק