Η Google ανακατασκευάζει το Dart DevTools από την αρχή στο Flutter

Το φτερούγισμα είναι α πλαίσιο προγραμματισμού πολλαπλών πλατφορμών, με στόχο να λύσει τα δεινά της ανάπτυξης εφαρμογών πολλαπλών πλατφορμών χωρίς το χάος του μη εγγενούς κώδικα. Με γνώση της γλώσσας προγραμματισμού Dart, ένας προγραμματιστής μπορεί να δημιουργήσει εφαρμογές για Android, iOS, web και επιτραπέζιους υπολογιστές με ενοποιημένη διεπαφή χρήστη σε όλα. Flutter 1.9 έφερε την υποστήριξη macOS και Catalina σε κατάσταση άλφα ενώ η Η έκδοση v1.12 ωρίμασε την υποστήριξή τους πέρα ​​από την προ-άλφα κατάσταση και το v1.17 του Flutter και v2.8 του Dart σημείωσαν τις πρώτες τους σταθερές κυκλοφορίες το 2020. Σήμερα, η Google κυκλοφορεί μια νέα έκδοση του DevTools για κώδικα Dart and Flutter, η οποία έχει ξαναδημιουργηθεί από την αρχή στο Flutter και συνοδεύεται από αρκετές βελτιώσεις.

Στην προηγούμενη ανακοίνωση, η Google είχε αναφέρει την πρόθεσή της να ανταλλάξει την τρέχουσα έκδοση του Dart DevTools με μια νέα έκδοση Flutter. Αυτό συνέβη τώρα καθώς το νέο DevTools έχει ξαναδημιουργηθεί από την αρχή στο Flutter. Αυτή η νέα έκδοση του DevTools προσθέτει βελτιώσεις όπως αλλαγές στις σελίδες απόδοσης και μνήμης, καθώς και μια εντελώς νέα σελίδα δικτύου.

Αλλά γιατί να ξαναφτιάξετε κάτι όταν εξακολουθεί να λειτουργεί; Η ομάδα πίσω από το Flutter ισχυρίζεται ότι τα οφέλη παραγωγικότητας είναι σημαντικά όταν χτίζετε υψηλές επιδόσεις Διεπαφές χρήστη και ο καλύτερος τρόπος για να δείξετε εμπιστοσύνη σε αυτούς τους ισχυρισμούς είναι να υιοθετήσετε τα ίδια εργαλεία τους εαυτούς τους. Η ανακατασκευή στο Flutter επιτρέπει επίσης στους προγραμματιστές να επιλέξουν ένα μοντέλο διανομής αφού γράψουν τον κώδικα, το οποίο είναι μια απόκλιση από το τρέχον διάγραμμα ροής λήψης αποφάσεων όπου το μοντέλο διανομής θα υπαγορεύει το κώδικας.

Το DevTools αποστέλλεται ως εφαρμογή Ιστού που διευκολύνει την ενσωμάτωση του εργαλείου στην υπάρχουσα εμπειρία εργαλείων σε όλα τα στοχευόμενες πλατφόρμες και IDE. Το DevTools είναι μια αυτόνομη σουίτα εργαλείων που εκτελείται στο πρόγραμμα περιήγησης και λειτουργεί για εφαρμογές για κινητά, για επιτραπέζιους υπολογιστές και για τον ιστό εφαρμογές.

Το DevTools ενσωματώνει τις ακόλουθες δυνατότητες:

• Flutter Inspector: ένα εργαλείο για την οπτικοποίηση και την εξερεύνηση των δέντρων γραφικών στοιχείων. Μπορείτε να επιλέξετε γραφικά στοιχεία στην εφαρμογή που εκτελείται, να επιβραδύνετε όλα τα κινούμενα σχέδια, να δείτε γραμμές βάσης κειμένου και πολλά άλλα.
  • Ένα από τα νέα χαρακτηριστικά είναι το Layout Explorer που μπορείτε να βρείτε στην καρτέλα Flutter Inspector δίπλα στο Details Tree. Το Layout Explorer σάς επιτρέπει να επιθεωρήσετε το μοντέλο ευέλικτης διάταξης του Flutter. Η ομάδα δίνει ένα παράδειγμα για το πώς αυτό το εργαλείο μπορεί να βοηθήσει στον εντοπισμό σφαλμάτων γιατί μια σειρά γραφικών στοιχείων δεν μοιάζει με τον τρόπο που περίμενε ο προγραμματιστής, για παράδειγμα.

• Προβολή χρονολογίου: δείχνει χρόνους κατασκευής για κάθε καρέ και ένα διάγραμμα φλόγας. Αυτό καθιστά εύκολο τον εντοπισμό προβληματικών πλαισίων στο πλαίσιο.
  • Αυτό το παράθυρο ενσωματώνει τώρα το νέο κουμπί Track Widget Builds το οποίο προσθέτει χρόνους κατασκευής όλων των γραφικών στοιχείων στο την εφαρμογή σας στο χρονοδιάγραμμα (σε βάρος της απόδοσης της κατασκευής του προφίλ σας—άρα δεν είναι σε εξέλιξη Προκαθορισμένο). Αυτό είναι βολικό όταν προσπαθείτε να μάθετε ποια widget ακριβώς βρίσκονται πίσω από ένα αργό καρέ.

• Προβολή μνήμης: σας δείχνει πώς η εφαρμογή σας χρησιμοποιεί τη μνήμη σε μια δεδομένη στιγμή.
  • Αυτή η προβολή εμφανίζει τώρα έναν χάρτη θερμότητας της εκχωρημένης μνήμης και επιτρέπει επίσης την παρακολούθηση της μνήμης της πλατφόρμας.

• Προβολή απόδοσης: Αυτό είναι ένα παραδοσιακό προφίλ CPU. Σας επιτρέπει να καταγράψετε μια περίοδο λειτουργίας της εφαρμογής σας και να δείτε σε ποιες λειτουργίες πέρασε η CPU τον περισσότερο χρόνο της. Μπορείτε να το χρησιμοποιήσετε για να αποφασίσετε πού θα ξοδέψετε τον χρόνο σας βελτιστοποιώντας.
• Το DevTools περιλαμβάνει ακόμη και το δικό του Εντοπιστής σφαλμάτων. Αυτό μπορεί να είναι χρήσιμο εάν δεν χρησιμοποιείτε IDE αλλά εξακολουθείτε να θέλετε να έχετε την επιλογή προσθήκης σημείων διακοπής, ενδιάμεσου κώδικα, εξέτασης τιμών μεταβλητών και ούτω καθεξής.

• Προβολή δικτύου: Αυτό είναι εντελώς νέο.
  • Όπως υποδηλώνει το όνομά του, σας επιτρέπει να επιθεωρείτε την κυκλοφορία του δικτύου. Μπορείτε να δείτε ολόκληρο το ιστορικό των αιτημάτων που έκανε η εφαρμογή σας από τότε που ξεκίνησε και να λάβετε λεπτομερείς πληροφορίες για το καθένα. Αυτό σας απαλλάσσει από το να χρειάζεται να καταγράφετε αυτά τα συμβάντα μόνοι σας όταν προσπαθείτε να διορθώσετε ένα πρόβλημα δικτύου.
  • Η καρτέλα Δίκτυο εμφανίζει αυτήν τη στιγμή την κυκλοφορία HTTP. Οι μελλοντικές βελτιώσεις περιλαμβάνουν την εμφάνιση γενική κίνηση εισόδου/εξόδου.
  • Τα αιτήματα δικτύου εμφανίζονται επίσης στην προβολή Χρονοδιάγραμμα, ώστε να μπορείτε να τα δείτε στο πλαίσιο.
• Προβολή καταγραφής: εμφανίζει συμβάντα από την εφαρμογή σας και το πλαίσιο. Με αυτό, μπορείτε εύκολα να φιλτράρετε μηνύματα (για παράδειγμα, μπορείτε να καθορίσετε "-gc" για να φιλτράρετε τα συμβάντα του Garbage Collector ή "flutter.frame" για να εμφανίζονται μόνο συμβάντα καρέ). Στο Dart, καταγραφή μηνυμάτων μπορεί να δομηθεί, και η προβολή καταγραφής το χρησιμοποιεί αυτό.

Για να κάνετε πλήρη χρήση του DevTools, μπορείτε να διαβάσετε το τεκμηρίωση. Εάν βρείτε σφάλματα ή εάν θέλετε να ψηφίσετε νέες δυνατότητες, μπορείτε να το κάνετε GitHub.