Google ricostruisce Dart DevTools da zero in Flutter

Flutter è un quadro di programmazione multipiattaforma, con l'obiettivo di risolvere i problemi legati allo sviluppo di app multipiattaforma senza il caos del codice non nativo. Con la conoscenza del linguaggio di programmazione Dart, uno sviluppatore può creare app per Android, iOS, Web e desktop con un'interfaccia utente unificata. Svolazzare 1.9 ha portato il supporto per macOS e Catalina in uno stato alpha mentre il La versione v1.12 ha maturato il supporto oltre lo stato pre-alpha e il v1.17 di Flutter e v2.8 di Dart hanno segnato le loro prime versioni stabili nel 2020. Oggi Google rilascia una nuova versione di DevTools per il codice Dart e Flutter, che è stato ricostruito da zero in Flutter e presenta numerosi miglioramenti.

Nell'annuncio precedente, Google aveva menzionato l'intenzione di sostituire l'attuale versione di Dart DevTools con una nuova versione di Flutter. Ciò è ora accaduto poiché il nuovo DevTools è stato ricostruito da zero in Flutter. Questa nuova versione di DevTools aggiunge miglioramenti come modifiche alle pagine di prestazioni e memoria, nonché una pagina di rete completamente nuova.

Ma perché ricostruire qualcosa quando funziona ancora? Il team dietro Flutter sostiene che i vantaggi in termini di produttività sono importanti quando si costruiscono prodotti ad alte prestazioni UI e il modo migliore per dimostrare fiducia in queste affermazioni è adottare gli stessi strumenti per loro stessi. La ricostruzione in Flutter consente inoltre agli sviluppatori di selezionare un modello di distribuzione dopo aver scritto il codice, che è una deviazione dall'attuale diagramma di flusso decisionale in cui il modello di distribuzione detterebbe il codice.

DevTools viene fornito come applicazione Web che semplifica l'integrazione dello strumento nell'esperienza degli strumenti esistente in tutti i piattaforme di destinazione e IDE. DevTools è una suite autonoma di strumenti che viene eseguita nel browser e funziona per app mobili, app desktop e Web app.

DevTools incorpora le seguenti funzionalità:

• Ispettore delle fluttuazioni: uno strumento per visualizzare ed esplorare gli alberi dei widget. Puoi selezionare i widget nell'app in esecuzione, rallentare tutte le animazioni, visualizzare le linee di base del testo e altro ancora.
  • Una delle nuove funzionalità è Layout Explorer che puoi trovare nella scheda Flutter Inspector accanto all'albero dei dettagli. Layout Explorer ti consente di ispezionare il modello di layout flessibile di Flutter. Il team fornisce un esempio di come questo strumento può aiutare a eseguire il debug del motivo per cui una riga di widget non ha l'aspetto previsto dallo sviluppatore, ad esempio.

• Visualizzazione sequenza temporale: mostra i tempi di costruzione per ciascun fotogramma e un grafico a fiamma. Ciò semplifica l'identificazione dei frame problematici nel contesto.
  • Questo riquadro ora incorpora il nuovo pulsante Tieni traccia delle build dei widget che aggiunge i tempi di creazione di tutti i widget la tua app sulla sequenza temporale (a scapito delle prestazioni della creazione del tuo profilo, quindi non è attiva predefinito). Questo è utile quando stai cercando di scoprire quali widget, esattamente, si trovano dietro un fotogramma lento.

• Visualizzazione della memoria: mostra come la tua app utilizza la memoria in un dato momento.
  • Questa visualizzazione ora mostra una mappa termica della memoria allocata e consente anche di monitorare la memoria della piattaforma.

• Visualizzazione delle prestazioni: Questo è un profiler CPU tradizionale. Ti consente di registrare una sessione della tua app e vedere in quali funzioni la CPU ha trascorso la maggior parte del suo tempo. Puoi usarlo per decidere dove dedicare il tuo tempo all'ottimizzazione.
• DevTools include anche il proprio Debug. Ciò può essere utile se non stai utilizzando un IDE ma desideri comunque la possibilità di aggiungere punti di interruzione, scorrere il codice, dare un'occhiata ai valori delle variabili e così via.

• Vista di rete: questa è completamente nuova.
  • Come suggerisce il nome, ti consente di ispezionare il traffico di rete. Puoi visualizzare l'intera cronologia delle richieste effettuate dalla tua app da quando è stata avviata e ottenere informazioni dettagliate su ciascuna di esse. Ciò ti libera dalla necessità di registrare questi eventi da solo quando tenti di eseguire il debug di un problema di rete.
  • La scheda Rete attualmente mostra il traffico HTTP; i miglioramenti futuri includono la visualizzazione traffico I/O socket generale.
  • Le richieste di rete vengono mostrate anche nella visualizzazione Timeline in modo da poterle vedere nel contesto.
• Vista di registrazione: mostra gli eventi della tua app e del framework. Con esso, puoi filtrare facilmente i messaggi (ad esempio, puoi specificare "-gc" per filtrare gli eventi di Garbage Collector o "flutter.frame" per mostrare solo gli eventi frame). In Dart, registrazione dei messaggi può essere strutturatoe la visualizzazione Logging ne fa uso.

Per utilizzare in modo completo DevTools è possibile leggere il documentazione. Se trovi qualche bug o se vuoi votare su nuove funzionalità, puoi farlo GitHub.