Come ispezionare i puntelli e lo stato di un elemento reattivo nella console?

Question

React Developer Tools fornisce molta potenza per ispezionare l'albero dei componenti di React, e guarda gli oggetti di scena, i gestori di eventi, ecc. Tuttavia, quello che mi piacerebbe davvero fare è essere in grado di ispezionare quelle strutture di dati nella console del browser.

In chrome, posso giocare con l'elemento DOM attualmente selezionato nella console utilizzando $0. C'è un modo per estrarre informazioni sui componenti React da $0, o è possibile fare qualcosa di simile con gli strumenti React Dev?

Answer 1

Una risposta alla tua domanda può essere trovato qui in una domanda simile ho chiesto: React - getting a component from a DOM element for debugging

sto fornendo una risposta qui perché non ho i punti reputazione necessari al fine di marcare come duplicato o per commentare sopra.

Fondamentalmente, questo è possibile se si sta utilizzando la build di sviluppo di reagire perché è possibile sfruttare i TestUtils per raggiungere il proprio obiettivo.

Hai bisogno di fare solo due cose:

• staticamente memorizzare la componente livello principale che hai da React.render().
• Creare una funzione di debug globale che è possibile utilizzare nella console con $ 0 che accede al componente statico.

Così il codice nella console potrebbe essere simile:

> getComponent($0).props 

L'attuazione di getComponent può utilizzare React.addons.TestUtils.findAllInRenderedTree per cercare partita chiamando getDOMNode su tutti i componenti presenti e il confronto con il passato in elemento .

Answer 2

Assegnare lo stato o l'oggetto puntello per l'oggetto window:

window.title = this.state.title 

E poi dalla console strumenti di sviluppo si possono provare diversi metodi per l'oggetto esposto, quali:

window.title.length