React Academy · Lezione

Installazione e apertura di React DevTools

Configurare React DevTools in Chrome/Firefox e navigare nel pannello Components.

Installazione e apertura di React DevTools è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione installerà l'estensione del browser React DevTools e imparerà a navigare nel pannello Components per ispezionare l'app React in esecuzione.

Che cosa sono i React DevTools?

React DevTools è un'estensione del browser che aggiunge due nuovi pannelli agli strumenti per sviluppatori di Chrome/Firefox: **Components** (per ispezionare l'albero) e **Profiler** (per misurare le prestazioni). Funziona con qualsiasi app React in modalità di sviluppo.

Installazione dell'estensione

Acceda al Chrome Web Store (o agli Add-ons di Firefox) e cerchi **React Developer Tools**. Faccia clic su **Add to Chrome** (o su Firefox). L'icona di React nella barra degli strumenti si illuminerà nelle pagine che utilizzano React.

Apertura degli strumenti per sviluppatori

Prema **F12** (oppure Cmd+Option+I su Mac) per aprire gli strumenti per sviluppatori del browser. Vedrà nuove schede chiamate **Components** e **Profiler**, accanto a Elements e Console.

Il pannello Components

La scheda Components mostra l'intero albero dei componenti React della pagina corrente. Può fare clic su qualsiasi componente per ispezionarne le props, lo stato, gli hook e il file sorgente che lo ha sottoposto a rendering.

Navigazione nell'albero

Utilizzi la casella di ricerca nella parte superiore del pannello Components per filtrare in base al nome del componente. Faccia clic su un componente nell'albero per visualizzarne i dettagli sul lato destro. Utilizzi le frecce per espandere o comprimere i componenti figli.

Ispezione delle props in tempo reale

Quando fa clic su un componente, le sue **props** correnti vengono visualizzate nel riquadro a destra. Può persino modificare direttamente i valori delle props negli strumenti per sviluppatori per visualizzare in anteprima le modifiche all'interfaccia senza modificare il codice sorgente.

Ispezione dello stato e degli hook

Sotto le props vedrà **hook** come State, Effect, Memo e Ref. Espandendo State vengono visualizzati i valori correnti di ogni chiamata a useState in quel componente.

Requisito della modalità di sviluppo

React DevTools mostra i nomi dei componenti solo quando l'app viene eseguita in **development mode**. Nelle build di produzione React rimuove i nomi dei componenti per creare bundle più piccoli, quindi esegua sempre il debug localmente con npm start o npm run dev.

Evidenziazione degli aggiornamenti

Attivi **Highlight updates when components render** nelle impostazioni degli strumenti per sviluppatori (icona a forma di ingranaggio). I componenti che eseguono nuovamente il rendering lampeggiano con una sovrapposizione colorata, rendendo immediatamente visibili i rendering non necessari.

Verifica rapida

Quali sono le due schede che l'estensione React DevTools aggiunge agli strumenti per sviluppatori del browser?

Riepilogo

Ha installato React DevTools ed esplorato il pannello Components. Ora può ispezionare l'albero dei componenti, leggere props e stato in tempo reale, modificare i valori direttamente ed evidenziare i nuovi rendering, il tutto senza toccare il codice sorgente.

Prossima lezione

Prossima lezione: **Ispezione degli alberi dei componenti e delle props** — analizzerà in profondità le gerarchie nidificate e imparerà a leggere strutture complesse di props e stato nella barra laterale degli strumenti per sviluppatori.

Domande Frequenti

La lezione «Installazione e apertura di React DevTools» è gratuita?

Sì — il testo completo di «Installazione e apertura di React DevTools» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Installazione e apertura di React DevTools»?

Configurare React DevTools in Chrome/Firefox e navigare nel pannello Components. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Installazione e apertura di React DevTools»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Installazione e apertura di React DevTools
Ispezione degli alberi dei componenti e delle props
Uso della scheda Profiler
Debug degli errori comuni di React

← Torna a React Academy