דיבאגינג בכרום - Client Debugging using Chrome
index.js ולוחצים על מספר השורה. בלחיצה על הכפתור הריצה נעצרת והדף מוצג כ-"paused in debugger".n לא מופיע ב-scope החיצוני כי הוא מקומי לפונקציה, ומערך שעוד לא אותחל מופיע כ-undefined.n שווה 12 ואז החזקה 144). step over מריץ את הפונקציה בלי להיכנס אליה.i, או בדיקה אם i קטן מאורך המערך. הערכים מתעדכנים תוך כדי הריצה.פרקי ההרצאה: דיבאגינג בכרום - Client Debugging using Chrome
תמלול ההרצאה: דיבאגינג בכרום - Client Debugging using Chrome
הטקסט המלא של הדקות הראשונות בהרצאה «דיבאגינג בכרום - Client Debugging using Chrome» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לנושא הדיבאגינג. כאן אנחנו הולכים לראות איך אנחנו יכולים לדבג פרויקט שאנחנו בונים ב-JavaScript. אנחנו הולכים לראות איך אפשר לדבג גם צד לקוח וגם צד שרת, כמובן Node.js.
ראשית, יש לנו פה תוכנית פשוטה. יש לנו כאן איזשהו לחצן שבלחיצה עליו מפעיל פונקציה כאן ב-JavaScript. זה בעצם תוכנית של צד לקוח html מפעיל JavaScript שרצה בקליינט סייד ואנחנו רוצים לדבק את זה.
מה לחצה הנושא? יש לנו פה איזשהו מערך ויש לנו סכום, הוא רץ על המערך ומחשב את הסכום של החזקות של ערכי המערך. הנה פונקציה, אנחנו קוראים לה, שולחים את ערך המערך, היא מחשבת את החזקה, מחזירה ואנחנו סוכמים את זה.
בסוף אנחנו מציגים אותו באלרט. למה יש לנו את הקטע קוד הזה? רק בכדי להדגים את הדיבאגר. יש לנו כאן גם מערך, אנחנו רוצים לראות איך הוא נראה בדיבאגר, יש לנו גם קריאה לפונקציה, איך בדיוק הקריאה מתבצעת וכדומה.
דבר ראשון, אנחנו הולכים לראות בסרטון הזה איך אנחנו יכולים לדבק את זה עם הדפדפן חרום. אנחנו מריצים את הדף html רק בכדי שהוא ירוץ.
יש לנו, אם אנחנו לוחצים על הלחצן אנחנו רואים שהוא נותן לנו פה את הסכום, הכל עובד פרפקט. עכשיו, בואו רגע נפתח את F12 ונסתכל בדפדפן על Source, Sources.
כאן ניכנס לאינדקס JS ואנחנו רואים את הקוד עצמו. פה אנחנו גם רואים את השורות ואנחנו יכולים לגשת לשורה ולהקליק עליה, על המספר שלה.
ברגע שאנחנו מקליטים נוצרת לנו ברייק פוינט וזה אומר שאם אנחנו עכשיו נריץ כאן את הדפדפן את האתר שלנו לחיצה על הלחצה נניח אז ברגע שאנחנו נגיע לברייק פוינט המערכת תעצור ותיכנס למצב דיבאג ופה בצד אנחנו רואים את החלוניות של הדיבאג בואו נעשה את זה אנחנו לוחצים על Calculate
הופה עצרנו כאן ושימו לב שהאתר כרגע paused in דיבאגר הוא כופה ואנחנו יכולים עכשיו להשתמש בדיבאגר בכדי להריץ את המערכת פקודה-פקודה ולדבק אותה.
בשביל מה אנחנו עושים את זה? בשביל למצוא לעצמנו באגים, אם כמובן יש. חלוניות חשובות שיש פה, ראשית זה ה-local. אילו משתנים מוכרים בסקופ הנוכחי? שימו לב שהוא לא מכיר כאן משתנה n, מפני ש-n הוא לוקאלי לפונקציה power.
הוא כן מכיר את המערך, אבל הוא עוד לא הגדיר אותו עדיין. ברגע שאנחנו מסמנים שורה היא עדיין לא רצה אז הוא אומר לנו שהמערך הזה הוא משתנה לוקאלי של הפונקציה אז הוא מכיר אותה את המערך אבל עדיין הוא undefined.
שימו לב שהוא undefined כמובן שהוא מכיר את ה-window כי בקליינט סייד זה האובייקט הגלובלי. זה ה-locals אנחנו יכולים להתחיל לרוץ ולדבק את זה.
יש לנו כאן את הלחצן הזה step over ויש לנו את הלחצן הזה step into שתי לחצנים נפוצים. סטפ אאוט וסטפ אם אני זוכר נכון ועד לברייק פוינט הבא אני חושב ואני לא ממש בטוח צריך