גוגל בונה מחדש את Dart DevTools מאפס ב-Flutter

רפרוף הוא א מסגרת תכנות חוצת פלטפורמות, במטרה לפתור את הצרות של פיתוח אפליקציות חוצות פלטפורמות ללא הבלגן של קוד לא מקורי. עם ידע בשפת התכנות Dart, מפתח יכול לבנות אפליקציות עבור אנדרואיד, iOS, אינטרנט ושולחן עבודה עם ממשק משתמש אחיד בכל. רפרוף 1.9 הביא תמיכה ב-macOS ו-Catalina במצב אלפא בעוד מהדורת v1.12 הבשילה את תמיכתם מעבר למצב הקדם-אלפא וה v1.17 של Flutter ו-v2.8 של Dart סימנו את המהדורות היציבות הראשונות שלהם ב-2020. היום, גוגל משחררת גרסה חדשה של DevTools לקוד Dart ו-Flutter, שנבנתה מחדש מאפס ב-Flutter ומגיעה עם מספר שיפורים.

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

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

DevTools נשלח כיישום אינטרנט המקל על שילוב הכלי בחוויית הכלים הקיימת בכל פלטפורמות יעד ו-IDEs. DevTools היא חבילת כלים עצמאית הפועלת בדפדפן, והיא פועלת עבור אפליקציות לנייד, אפליקציות שולחן עבודה ואינטרנט אפליקציות.

DevTools משלבת את התכונות הבאות:

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

• תצוגת קו זמן: מציג זמני בנייה עבור כל פריים ותרשים להבה. זה מקל על זיהוי מסגרות בעייתיות בהקשר.
  • חלונית זו משלבת כעת את הלחצן החדש של Track Widget Builds אשר מוסיף זמני בנייה של כל הווידג'טים ב האפליקציה שלך לציר הזמן (על חשבון הביצועים של בניית הפרופיל שלך - כך שהיא לא נמצאת בהישג יד בְּרִירַת מֶחדָל). זה שימושי כאשר אתה מנסה לגלות אילו ווידג'טים, בדיוק, נמצאים מאחורי מסגרת איטית.

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

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

• תצוגת רשת: זה חדש לגמרי.
  • כפי ששמו מרמז, הוא מאפשר לך לבדוק את תעבורת הרשת. אתה יכול לראות את כל ההיסטוריה של בקשות שהאפליקציה שלך ביצעה מאז התחילה ולקבל מידע מפורט על כל אחת מהן. זה משחרר אותך מהצורך לרשום אירועים אלה בעצמך כאשר אתה מנסה לנפות באגים בבעיית רשת.
  • הכרטיסייה רשת מציגה כעת תעבורת HTTP; שיפורים עתידיים כוללים הצגה תעבורת קלט/פלט כללית של שקעים.
  • בקשות רשת מוצגות גם בתצוגת ציר הזמן, כך שתוכל לראות אותן בהקשר.
• תצוגת רישום: מציג אירועים מהאפליקציה שלך ומהמסגרת. בעזרתו תוכלו לסנן הודעות בקלות (לדוגמה, תוכלו לציין "-gc" כדי לסנן אירועי Garbage Collector או "flutter.frame" כדי להציג רק אירועי מסגרת). בדארט, רישום הודעות ניתן לבנות, ותצוגת Logging עושה בזה שימוש.

כדי לעשות שימוש מלא ב-DevTools, אתה יכול לקרוא את תיעוד. אם אתה מוצא באגים, או אם אתה רוצה להצביע על תכונות חדשות, אתה יכול לעשות זאת הלאה GitHub.