למד כיצד לאתר שגיאות בקובצי HTML, ‏CSS ו-JS ב-Adobe Dreamweaver. הצג את השגיאות והאזהרות בחלונית Output ודלג לשורות הקוד השגויות בלחיצה אחת.

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

ב-Dreamweaver, עם זאת, איתור שגיאות בקוד (Linting) מפשט מאוד את תהליך האיתור של שגיאות נפוצות. איתור שגיאות בקוד (Linting) הוא תהליך ניתוח קודים לסימון של שגיאות פוטנציאליות או שימוש חשוד בקוד. שגיאות תחביר של HTML, שגיאות ניתוח ב-CSS ואזהרות בקובצי JavaScript הן חלק מהפריטים שמסומנים כחשודים על-ידי איתור השגיאות בקוד של Dreamweaver.

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

Dreamweaver מאפשר איתור שגיאות בקובצי HTML ‏(‎.htm ו-‎.html), ‏CSS ו-JavaScript. בצע את השלבים הבאים כדי לאתר שגיאות בקוד בקבצים אלה:

  1. הגדר את איתור השגיאות בקוד באמצעות עריכת קובצי התצורה של HTML‏, CSS ו-JS. ראה הגדר את איתור השגיאות לקבלת מידע נוסף.

  2. הפעל או בטל את איתור השגיאות בקוד. ניתן לאתר שגיאות בקוד של קבצים בזמן הטעינה או השמירה שלהם. תוכל להפעיל/להשבית איתור שגיאות בקוד באמצעות האפשרות Preferences‏ > Linting. ראו אפשר את איתור השגיאות והגדר העדפות לקבלת מידע נוסף.

השגיאות והאזהרות שאותרו בקבצים מוצגות בחלונית Output. למידע נוסף, ראה תוצאות איתור שגיאות וחלונית Output.

אפשר איתור שגיאות ופרט את כללי איתור השגיאות

לחץ על Edit‏ > Preferences ‏(Win) או Dreamweaver‏ > Preferences ‏(Mac). בחר באפשרות Linting ברשימת Category ובחר ‏Enable Linting.

הגדרת כללים של איתור שגיאות בקוד (Linting)

ניתן לבצע איתור שגיאות בקוד בקובצי HTML‏, CSS ו-JS באמצעות עריכת הכללים של איתור השגיאות בקוד בקובצי התצורה התואמים:

  • HTML:‏ DW.htmlhintrc
  • CSS:‏ DW.csslintrc
  • ‏‏JS: .eslintrc

כדי לגשת לקבצים אלה ולערוך אותם, בצע את השלבים הבאים:

  1. לחץ על Edit‏ ‏> Preferences (‏Win) או על Dreamweaver‏ ‏> Preferences (‏Mac). 

  2. בחר Linting ברשימה Category.

  3. במקטע Edit Rule Set, לחץ על סוג הקובץ הדרוש ולאחר מכן לחץ על Edit & Apply Changes.

    קובץ התצורה התואם ייפתח ב-Dreamweaver.

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

    בנוסף, בקובצי תצורה אלה תוכל להגדיר את סוג השגיאות או האזהרות שיוצגו. 

הערה:

קובץ התצורה של כללי איתור השגיאות בקוד של גירסאות מוקדמות יותר של Dreamweaver CC 19.0 הוא JS: DW.jshintrc. תוכל לעיין ב-http://jshint.com/docs/options/

איתור שגיאות קוד של ECMAScript 6

Dreamweaver תומך בתחביר ECMAScript 6‎‎.‏ Dreamweaver תומך גם באיתור שגיאות בקוד ‏ECMAScript עם הגדרת ברירת מחדל של מאתר שגיאות הקוד של ESLint כמאתר שגיאות קוד של JavaScript.

  1. לחץ Site‏ > Manage Sites.

    תיבת דו-שיח Manage Sites
    בחר באתר האינטרנט מתוך תיבת הדו-של Manage Sites
  2. בחר Advanced Settings מהחלונית השמאלית של חלון תיבת הדו-שיח Site Setup. 

  3. בחר ‏‫איתור שגיאות בקוד JS‬ מתוך Advanced Settings בחלונית השמאלית. 

    ניתן ללחוץ על הרשימה נפתחת שסמוכה ל-ECMAScript Version ולבחור ב-3, 5 או 6. Dreamweaver משתמש בקבוצת הכללים עבור הגירסה שבחרת בה. 

    בחר בגירסת ECMAScript
    בחר בגירסת ECMAScript
  4. להתאמה אישית של קבוצת הכללים תוכל לבחור באפשרות Configuration File מהרשימה הנפתחת וללחוץ על Edit Configuration File

    עריכת קובץ תצורה של ‏‫איתור שגיאות בקוד JS‬
    עריכת קובץ תצורה של ‏‫איתור שגיאות בקוד JS‬

    השינויים שתבצע ב-Site Setup יישמרו וקובץ .eslintrc.js ייווצר בשורש האתר אם הוא לא קיים.

    קובץ .eslintrc.js יפתח בשורש האתר לעריכה. לקבלת מידע נוסף, ראה כללי ESLint

    קובץ תצורה של ‎.eslintrc.js
    קובץ תצורה של ‎.eslintrc.js

    הערה:

    • להגדרות ECMAScript Version שמוגדרות בדו-שיח של הגדרת האתר יש עדיפות על קובץ ‎.eslintrc.js שנעשה בו שימוש בשורש של האתר. 
    • אם לא תשתמש בקובץ ‎.eslintrc.js בהגדרות האתר, Dreamweaver יחפש אחר קובץ ‏‎.eslintrc.js בכל המיקומים שמובילים אל ספריית הבסיס. 

    לקבלת מידע נוסף על הגדרת התצורה של דירוג והיררכיית קבצים, ראה אתר ESLint.

תוצאות איתור השגיאות בקוד (Linting) והחלונית Output

תוצאות איתור השגיאות בקוד (Linting), שכוללות שגיאות ואזהרות, רשומות בחלונית Output. החלונית Output זמינה במצב מעוגן בתחתית כל סביבות העבודה שמוגדרות כברירת מחדל. אם החלונית Output סגורה, ניתן לפתוח אותה באמצעות אחת מהפעולות הבאות:

  • לחיצה על סמל המצב של איתור השגיאות בשורת המצב של חלון Document.
  • באמצעות קיצור המקשים Shift+F6
  • באמצעות Window‏ ‏> Results‏ ‏> Output
החלונית Output וסמל איתור השגיאות
החלונית Output וסמל איתור שגיאות בקוד (Linting)

סמל איתור השגיאות בקוד (Linting) שמופיע בשורת המצב מציין את תוצאות איתור השגיאות בקוד:

  • אדום - המסמך הנוכחי מכיל שגיאות ואזהרות
  • צהוב - המסמך הנוכחי מכיל אזהרות בלבד
  • ירוק - במסמך הנוכחי לא אותרו שגיאות

הערה:

בנוסף, ניתן להשתמש בסמל איתור שגיאות הקוד שבשורת המצב כדי לפתוח ולסגור את החלונית Output‏, אם הסמל מופיע באדום או בצהוב (ולא בירוק).

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

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

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת