אתה לא צריך כלי ניפוי באגים חיצוני. אתה יכול לנפות באגים ביישומי Node.js שלך ישירות בעורך VS Code באמצעות הכלי המובנה שלו.

איתור באגים ביישום Node.js שלך ב-Visual Studio Code עצמו אפשרי ופשוט. עורך VS Code מגיע עם מאתר באגים מובנה המסוגל לנפות כל יישום המכוון לזמן הריצה של Node.js. משמעות הדבר היא שאתה יכול לנפות באגים ב-JavaScript או כל שפה אחרת שמתחברת אליו (למשל TypeScript).

מאמר זה ידריך אותך לאורך השלבים לניפוי באגים ביישום Node.js שלך בקוד VS. תלמד כיצד להתחיל הפעלת ניפוי באגים, להוסיף נקודות שבירה, לצרף תהליך חיצוני ולאפות באגים בקוד TypeScript באמצעות מפות מקור.

מה אתה צריך כדי להתחיל

לפני שתתחיל, התקן גם את Node.js וגם את קוד VS על המחשב המקומי שלך. הגרסה האחרונה של Node.js זמינה ב- Node.js אתר רשמי. באופן דומה, עבור Visual Studio Code, הורד את הגרסה העדכנית ביותר מה- קוד VS אתר אינטרנט. להנחיות בנושא כיצד להגדיר VS Code ב-Windows, קרא את מדריך ההתקנה שלנו.

אתה צריך גם פרויקט Node.js. אתה יכול ליצור יישום פשוט של Node.js מאפס או להשתמש באפליקציה קיימת.

תהליך איתור הבאגים בקוד VS

התחלת פגישת ניפוי באגים בעורך VS Code היא די פשוטה. פתח את הקובץ עם קוד VS ולחץ על

instagram viewer
הרץ וניפוי באגים סמל בסרגל הצד (או לחץ על Ctrl + Shift + D במקלדת שלך). לאחר מכן, לחץ על הרץ וניפוי באגים כפתור כדי להתחיל את התהליך.

כברירת מחדל, Node.js ינסה להבין את סביבת ניפוי הבאגים של הפרויקט שלך. אבל אם הזיהוי האוטומטי לא מצליח, הוא ינחה אותך לבחור את הסביבה הנכונה. עבור הדרכה זו, הסביבה הזו היא Node.js.

לאחר שבחרתם את הסביבה, VS Code מפעיל את באגים ומצרף אותו לתהליך. אתה יכול לראות את הפלט שלך ב- קונסולת ניפוי באגים. באמצעות סרגל הכלים של ניפוי באגים בחלק העליון, אתה יכול לחזור על הקוד, להשהות את הביצוע או לסיים את ההפעלה.

יש לך גם אפשרות ליצור קובץ תצורה. ה launch.json הקובץ מאפשר לך להגדיר ולהגדיר פרטי ניפוי באגים. אם הסקריפט שלך דורש ארגומנט, ספק ארגומנטים אלה ב- launch.json קוֹבֶץ. ניתן להגדיר אפשרויות מרובות בכל תצורה:

{ 
"גִרְסָה": "0.2.0", 
"תצורות": [ 
 { "סוּג": "צוֹמֶת", 
"בַּקָשָׁה": "לְהַשִׁיק", 
"שֵׁם": "השקת תוכנית", 
"דלג על קבצים": [ "/**" ], 
"תכנית": "${workspaceFolder}\\index.js"
 } 
 ]
}

תבחין גם בחמישה פאנלים בצד שמאל של העורך. לוחות אלה הם משתנים, שעון, CALL STACK, סקריפטים טעונים, ו נקודות שבירה:

כשתסיים להגדיר את התצורה, בחר והפעל את התוכנית דרך תפריט התצורה.

צרף תהליך חיצוני

שיטה נוספת להגדרת סשן איתור באגים של Node.js היא על ידי צירוף תהליך חיצוני. הפעל את התוכנית עם הפקודה הבאה:

node --inspect index.js

הכנס את ה -brk דגל אחרי --לִבדוֹק אם ברצונך לצרף אותו לפני שהתוכנית מתחילה לפעול.

לאחר מכן, פתח את בורר התהליך בקוד VS. זה מפרט את כל התהליכים הזמינים בסביבת Node.js. כדי לפתוח את הבורר, הקש Ctrl + Shift + P ולמצוא את ניפוי באגים: צרף לפקודה Node.js.

לחץ על הפקודה ובחר באפשרות הנכונה כדי להתחיל את תהליך ניפוי הבאגים.

יצירת נקודת שבירה

אם אתה רוצה להשהות בנקודות ספציפיות בתוכנית שלך כדי לבדוק את הקוד, הגדר שם נקודות שבירה. אתה יכול להגדיר נקודות שבירה כמעט בכל מקום בקוד שלך. זה כולל הצהרות משתנים, ביטויים והערות. אבל אתה לא יכול להגדיר נקודות שבירה בהצהרות פונקציות.

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

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

בואו נראה נקודות שבירה בפעולה. לחץ על לְהַשִׁיק סמל כדי להתחיל את הפעלת ניפוי הבאגים. התוכנית תשהה בנקודת השבירה הראשונה ותניב את הערך לבדיקה:

אתה יכול ללחוץ על לְהַמשִׁיך סמל (או הקש F5) כדי להעביר את התוכנית לנקודת הפסקה הבאה. זה יימשך עד שתגיע לסיום התוכנית.

איתור באגים ב-TypeScript עם מפות מקור

ככל ש-Typescript ממשיך לגדול יותר פופולרי, כמות הפרויקטים של Node.js שנכתבו ב-TypeScript צפויה לגדול. למרבה המזל, אתה יכול גם לנפות באגים בפרויקטים מבוססי TypeScript עם VS Code.

ראשית, צור א tsconfig.json קובץ בספריית השורש של הפרויקט שלך (אם הוא עדיין לא נוצר) והפעל מפות מקור:

{ "אפשרויות מהדר": { "מקור מפות": נָכוֹן }}

לאחר מכן, צרף את תהליך הריצה והגדר את נקודות השבירה בקובץ TypeScript שלך. Visual Studio Code ימצא את מפות המקור וישתמש בהן.

אתה יכול לומר במפורש לקוד VS היכן למצוא את מפות המקור. כדי לעשות זאת, הוסף outFiles תכונה בקובץ תצורת ההשקה שלך והפנה אותו למיקום המדויק של מפות המקור שלך:

{ 
"גִרְסָה": "0.2.0", 
"תצורות": [ { 
"סוּג": "צוֹמֶת", 
"בַּקָשָׁה": "לְהַשִׁיק", 
"שֵׁם": "השקת תוכנית", 
"דלג על קבצים": [ "/**" ], 
"תכנית": "${workspaceFolder}\\index.js", 
"outFiles": "${workspaceFolder}\\index.js", 
 } 
 ]
}

אם אתה משתמש ts-node כדי להפעיל את הפרויקט שלך ללא שלב בנייה, השתמש בזה במקום בתצורה שלמעלה:

{ 
"גִרְסָה": "0.2.0", 
"תצורות": [ { 
"סוּג": "pwa-node", 
"בַּקָשָׁה": "לְהַשִׁיק", 
"שֵׁם": "הפעל שרת", 
"דלג על קבצים": [ "/**" ], 
"runtimeArgs": [ "-ר", "ts-node/register" ], 
"ארגס": [ "${workspaceFolder}/src/server.ts" ] 
 }]
}

מכיוון שאין תכונת תוכנית, זמן ריצה args רושמת ts-node בתור המטפל עבור קבצי TypeScript. הטיעון הראשון ל args הוא קובץ הכניסה לתוכנית. עכשיו אתה יכול להתחיל את סשן איתור הבאגים שלך. אם אתה מפתח עם וניל JavaScript או מסגרת חזיתית, אתה יכול גם נפה באגים בקוד JavaScript בדפדפן.

תכונות אחרות בקוד Visual Studio

Visual Studio Code הוא עורך קוד מקור רב עוצמה עמוס בתכונות מדהימות. כיסינו את כלי ניפוי הבאגים המובנה של VS Code. הדגמנו גם כיצד אתה יכול להשתמש בו כדי לנפות באגים ביישום Node.js שלך.

אבל יש הרבה תכונות שימושיות אחרות בקוד VS. אמנם אתה אולי מכיר כמה מהם, אבל חלקם עשויים להיות חדשים לגמרי עבורך. במקרה כזה, זה עשוי לעניין אותך ללמוד על התכונות הללו וכיצד להשתמש בהן.