Data di pubblicazione: 13 novembre 2024
Immagina di esaminare una traccia del rendimento e di voler evidenziare un'area specifica, ad esempio l'attività più lunga o un blocco di lavoro non necessario. Forse volevi prendere appunti per riferimento futuro o condividere i tuoi risultati con un collega. Qual è il modo migliore per farlo?
Ovviamente, devi stampare il tracciato su un enorme foglio di carta e disegnare e scrivere manualmente le note oppure utilizzare un software di terze parti per disegnare note su uno screenshot di un tracciato. (anche se finora era il modo migliore).
Nell'ambito dell'impegno del nostro team per semplificare i flussi di lavoro degli sviluppatori, siamo lieti di introdurre un'alternativa a queste opzioni: la possibilità di aggiungere annotazioni direttamente alla traccia nel riquadro Rendimento.
Ora puoi annotare le tracce in situ, spostarti facilmente tra le annotazioni e persino salvarle direttamente all'interno del file traccia. In questo modo, condividere gli approfondimenti in evidenza è semplice come inviare un file, eliminando al contempo la necessità di strumenti esterni o soluzioni alternative. Le annotazioni non solo possono aiutarti a eseguire il debug del rendimento, ma anche a metterti rapidamente sulla stessa lunghezza d'onda del tuo collega o a migliorare la sua comprensione di cosa sta succedendo senza troppi passaggi.
Esistono tre tipi di annotazioni:
Intervalli di tempo annotati: etichettare qualsiasi intervallo di tempo nella sequenza temporale
Voci annotate: aggiungi un'etichetta a qualsiasi voce della sequenza temporale
Connessioni tra voci: collega due voci con una freccia per mostrare la loro relazione.
Esaminiamo ogni tipo di annotazione e gli scenari in cui potresti trovarti quando sono utili.
Intervalli di tempo annotati
Un flusso di lavoro comune in DevTools è la registrazione di una traccia per eseguire il debug di un'interazione lenta. La visualizzazione della traccia può sembrare scoraggiante all'inizio, ma man mano che esamini gestori di eventi e stack di chiamate specifici, inizierà ad avere senso. Un modo per semplificare l'utilizzo della visualizzazione della traccia è creare un'annotazione per indicare in che modo viene generalmente speso un blocco di tempo. Ad esempio, potrebbe essere utile annotare l'intervallo di tempo per consentire all'interfaccia utente di aggiornarsi in modo significativo dopo un'interazione dell'utente.
Per aggiungere annotazioni a un intervallo di tempo: tieni premuto Maiusc e trascina dall'inizio dell'interazione all'aggiornamento dell'interfaccia utente. Dopodiché, digita un'etichetta per creare l'annotazione. Se l'intervallo selezionato non è corretto, annullalo facendo clic in un altro punto prima di iniziare a digitare. In alternativa, per modificare l'etichetta di un'annotazione, fai doppio clic su di essa. Al momento non è possibile modificare l'intervallo di tempo di un'annotazione esistente. Se l'intervallo di tempo non è corretto, elimina l'annotazione e creane una nuova.
Con questa annotazione, avrai una visione più chiara di tutto il lavoro che deve essere svolto prima della modifica visibile all'utente, in modo da poter concentrare il debug di conseguenza.
Voci con annotazioni
Per rendere più evidente la modifica visibile all'utente, puoi anche annotare l'attività responsabile della transizione con un'etichetta di voce.
Per creare un'etichetta per la voce: fai doppio clic sulla voce selezionata e digita l'etichetta oppure fai clic con il tasto destro del mouse sulla voce e seleziona "Etichetta voce" dal menu contestuale. Per modificare l'etichetta di un'annotazione, fai doppio clic sulla voce o sull'etichetta. In alternativa, seleziona l'opzione "Voce dell'etichetta" dal menu contestuale.
Con queste annotazioni delle voci, è più facile individuare il lavoro che è (o non è) fondamentale per l'interazione e il tempo necessario.
Connessioni delle voci
Il terzo modo in cui possiamo annotare la traccia è tracciare il collegamento tra l'interazione e l'attività lunga responsabile della transizione.
Per creare un collegamento tra le voci: fai doppio clic sulla voce che vuoi collegare a un'altra e fai clic sulla freccia visualizzata a destra della voce. Poi fai clic sulla voce a cui vuoi collegarlo. In alternativa, fai clic con il tasto destro del mouse sulla voce e seleziona "Collega voci" dal menu contestuale della voce.
Pertanto, anche se l'interazione stessa è terminata, puoi utilizzare questo tipo di annotazione per mostrare più chiaramente come è collegata alle attività lunghe successive che bloccano l'interfaccia utente.
Eliminare e nascondere le annotazioni
Tutte le annotazioni possono essere eliminate rapidamente dalla visualizzazione elenco delle annotazioni nella barra laterale. Se passi il mouse sopra un'annotazione, viene visualizzata un'icona del cestino . Fai clic su questa icona per eliminare l'annotazione.
In alternativa, per eliminare le etichette delle voci e le annotazioni di collegamento delle voci associate a un evento specifico, fai clic con il tasto destro del mouse sull'evento e seleziona "Elimina annotazioni". Le annotazioni con etichette possono essere eliminate anche rimuovendo l'etichetta e salvando le annotazioni.
Se vuoi nascondere le annotazioni senza eliminarle in modo che non ti disturbino durante l'esplorazione della traccia, seleziona la casella di controllo "Nascondi annotazioni" nella parte inferiore della barra laterale delle annotazioni. Questa preferenza verrà salvata. Quando carichi una traccia con annotazioni con questa impostazione attiva, le annotazioni rimarranno nascoste finché non deselezioni la casella di controllo.
Salvare o caricare le tracce annotate
Ottimo, hai aggiunto tutte queste annotazioni per aiutare te e gli altri a interpretare la traccia. Passaggi successivi
Non è necessario acquisire screenshot della traccia per inviarli a un collega come accadeva in passato, prima delle annotazioni. Salva il file annotato e invialo. È tutto: il cliente può caricare il file nel riquadro Rendimento e visualizzare tutte le annotazioni che hai apportato nel contesto della traccia oppure aggiungere altre annotazioni e inviartele.
DevTools salverà anche altri tipi di personalizzazioni nella visualizzazione della traccia. Ad esempio, puoi isolare un'area di interesse aumentando lo zoom e impostando un breadcrumb oppure nascondere le voci negli stack di chiamate irrilevanti. Tutte queste impostazioni verranno mantenute dal file di traccia, semplificando ulteriormente la collaborazione per il debug delle prestazioni. Con tutte queste personalizzazioni, puoi attirare l'attenzione su ciò che conta di più, fornendo al contempo il contesto dell'intera traccia interattiva, a differenza di uno screenshot.
Per conservare le annotazioni e altre personalizzazioni, fai clic sull'opzione Salva traccia sotto l'icona di download . Quando una traccia viene caricata, contiene tutte queste personalizzazioni. Il salvataggio con annotazioni è l'opzione predefinita, ma se vuoi salvare solo il file della traccia non elaborata, seleziona l'opzione Salva traccia senza annotazioni.
Conclusione
Potrebbero sembrare molte informazioni da assimilare, ma non preoccuparti. Le istruzioni per la creazione delle annotazioni sono sempre disponibili nella scheda delle annotazioni della barra laterale del riquadro Rendimento. Questa scheda fornisce istruzioni quando non esistono annotazioni e mostra una visualizzazione elenco delle annotazioni una volta create.
In questo modo, le annotazioni nel riquadro Rendimento consentono agli sviluppatori di individuare i momenti cruciali all'interno di una traccia, aggiungendo contesto e approfondimenti personalizzati. In questo modo, la procedura di analisi viene semplificata e diventa più facile condividere e collaborare alle ottimizzazioni del rendimento. Prova le annotazioni nel riquadro Rendimento e facci sapere cosa ne pensi. Se hai un feedback, ci farebbe piacere leggere i tuoi commenti nel problema pubblico.
Di' addio alla necessità di strumenti esterni e dai il benvenuto a un flusso di lavoro più efficiente.