TypeScript - האם יש דרך טובה לדבג תכונות מחושבות של Vue.js ותבניות?

יש לי כמה בעיות בדיבוג ב-vuejs, כמו בדיבוג של תכונות מחושבות, או ערכי נתונים בתבניות, וכו'...

כרגע אני משתמש בשיטת IIFE כדי לדבג את זה, כפי שמוזכר ב-https://vuedose.tips/tips/debugging-templates-in-vue-js/ :

<h2 dir="auto">
  {{(function(){debugger;let temp = headerMessage})()  ||  headerMessage}}
</h2>

והבעיה הגדולה שיש לי היא לגבי מפת המקור בכרום עבור ניפוי שגיאות בקבצי Vue, כמו בתמונה למטה, יש יותר מדי כפולים עם קודים שונים מאותו קובץ (ה- panel.vue שמוצג למטה הוא לא זה שיש לי בפרויקט, זה אולי גרסה מופקדת או משהו אחר, שאני לא רוצה לראות, אני פשוט רוצה לראות את קובץ ה-panel.vue האמיתי כדי לעבוד עליו טוב יותר):

איך לתקן את הבעיה הזאת והאם יש דרך לנפות באגים בצורה נכונה בחלקים כאלה ב-vuejs, כמו להגדיר נקודת עצירה?

תשובה #1

אני מציע לך להשתמש ב-vue-dev-tools. הרחבת דפדפן שמאפשרת לך לבדוק רכיב אחר רכיב data, computed ועוד הרבה.

אתה יכול להוריד ולהתקין את זה מכל חנות תוספי דפדפן: כרום, מוזילה, וכו׳.

מאגר כלי הפיתוח של Vue.

תשובה #2

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

בעיות עם computed ב-Vue בדרך כלל מתחלקות לאחד משלושה מחנות:

1. אתה מבצע ניפוי באגים של לוגיקה מורכבת בחישובים

במקרה הזה נסה להעביר את המורכבות למתודה ולקרוא לה רק מתוך computed. ואז תוכל להשתמש ב-debugger, console.log ונקודות עצירה, כל מה שאתה מעדיף.

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

2. ההיגיון שלך די פשוט אך הוא לא מתפקד כפי שציפית

במקרים אלה אני בדרך כלל פותח את כלי הפיתוח של Vue, בוחר את הקומפוננטה שה-computed שייך לה ואז משתמש ב-$vm כדי לבדוק את מצב הקומפוננטה ולהריץ קטעי קוד ביניים של הלוגיקה של ה-computed עד שאמצא את הבעיה.

אתה יכול לגשת לכל נתון/מאפיין/חישוב ישירות על $vm, לדוגמה $vm.myProp.

שים לב שעליך לבחור רכיב ב-devtools כדי ש-$vm יוגדר.

3. המחשוב תלוי בריאקטיביות אבל אינו משתנה

כאן הגישה שלי לעיתים קרובות דומה לזו של #2.

האם יש שגיאות כתיב בשמות של הרכיבים הריאקטיביים שעליהם אתה מסתמך? אם משהו תמיד מתקבל כלא נכון, זה עשוי להיות בגלל ששגיאת כתיב מתייחסת לתכונה שאינה קיימת ומחזירה undefined (שקרי).

גם אם אתה תלוי בשינוי במצב מקונן עבור נתונים או פרופ, ודא שאתה משתמש ב-Vue.set/this.$set כפי שנדרש.