Sono quel tipo di persona che appena inizia ad approfondire un nuovo argomento / framework / libreria, va a fare una ricerca su tutto quello che potrebbe rendere lo studio o la messa in pratica, piu’ facile.
Infatti non so nemmeno io le estensioni che mi ero scaricato i primi giorni in cui studiavo React, vi dico solo che erano piu’ estensioni per React Native che per ReactJS 😁.
Tra tutta questa molle di tool mi ero scaricato anche React Developer Tools. (Link per Chrome Web Store, Firefox Add-ons per Firefox, e Microsoft Edge Addons)
Ovviamente sono passati mesi senza che io la usassi minimamente, non capivo le potenzialità e l’utilità.
Ed è proprio per questo, che a distanza di 1 anno e mezzo ormai, ho deciso di portarvi alcune delle funzionalità davvero utili di questa estensione.
Funzionalità
Identificazione di un app sviluppata in React
Visitando una pagina web si ha la possibilità di vedere se essa è stata scritta in React o meno.
Prendiamo ad esempio una pagina sample che ho fatto: Google Keep Clone Basic.
Bastera guardare il colore per capire che l’app sia stata scritta in React e che usa una build di produzione.
Vediamo un esempio di una pagina che non fa uso di React invece.
La stessa identica cosa anche per le applicazioni in locale.
Come dal messaggino che ci viene presentato, vediamo che per quelle app che utilizzano React, abbiamo 2 nuove tab disponibili.
La tab Components
Aprendo l’estensione si ha la possibilità di vedere com’è strutturata effettivamente l’applicazione e identificare ad esempio, un item problematico su una lista.
Si possono passare proprietà per testare il funzionamento dei componenti con input diversi oppure modificare lo stato di hook come ad esempio useState().
Molto utile nel caso si abbiano valori non visibili come i parametri ‘isLoading’.
Uno step in avanti per il debugging sicuramente, basta con i console.log in ogni punto dell’applicazione 😁.
Ispezionando un componente si puo’ osservare anche quale parte dell’applicazione è stata a renderizzarlo, mostrando i componenti in cascata.
Oltre all’ispezione e alla manipolazione dei dati, la tab viene con delle impostazioni interessanti.
Ci da la possibilità di nascondere certi componenti dalla lista, nel caso l’app sia molto complessa e di grandi dimensioni, cambiare tema, fermarsi sui wraning oppure decidere di stampare tutte le informazioni relative ad un componente in console.
Quante volte non vi è capitato di dover stampare le props in input ad un componente e di scrivere e riscrivere console.log(props)?😁
La tab Profiler
Grazie a questa tab possiamo identificare e andare ad otimizzare le prestazioni dei nostri componenti, una volta startata lei sarà in ascolto su tutte le modifiche e cambiamenti all’interno dell’app.
Inizialmente il profiler si poteva attivare solamente una volta che l’applicazione era stata caricata, perdendosi quindi il render iniziale, che spesso è quello piu’ problematico.
La questione si è risolta in seguito, con l’introduzione del pulsante ‘Reload and start profiling’.
Che farà un refresh della pagina facendo partire il profiler in automatico.
Andiamo a vedere come funziona però.
Il profiler visualizzerà un elenco di tutti gli elementi insieme al tempo di caricamento di ognuno.
Saranno poi colorati diversamente in base al tempo impiegato e si avrà la possibilità di identificare quelli che ci mettono di piu’ a renderizzare i figli o loro stessi.
Si puo’ notare anche se un componente viene renderizzaro piu’ di una sola volta, molto utile per scoprire i render superflui.
Il debug delle applicazioni React può essere difficile, soprattutto quando gli utenti riscontrano problemi difficili da riprodurre, penso quindi che l’estensione possa essere molto utile per diversi casi d’uso.
Sia durante lo sviluppo, che in un secondo momento per l’ottimizzazione delle performance.
Nel caso il post vi sia piaciuto, fatemelo sapere nei commenti, e se vi piacerebbe approfondire di piu’ l’argomento ditemelo qui sotto, cosi da fare un video o un articolo in cui spiegare effettivamente come usare al meglio il profiler e la tab components in base ai diversi casi d’uso 😉.
Top comments (0)