Impossibile impostare sempre i punti di interruzione React Native in Chrome

Question

Durante il debug della mia app React Native in Chrome, spesso non riesco a impostare i breakpoint nella scheda Sorgenti. Quando faccio clic su una riga di codice per aggiungere il punto di interruzione, viene aggiunto un punto di interruzione alla riga di dichiarazione della funzione successiva nel mio modulo.

Questo non accade in tutti i miei moduli sorgente, ma abbastanza spesso da impedirmi di eseguire il debug in modo efficiente.

Attualmente sto utilizzando RN 0,22 ma ciò è accaduto anche nelle versioni precedenti di RN (ad esempio RN 0,18).

Answer 1

Questo problema potrebbe essere causato da babele. Quando si usa la funzione normale e la funzione della freccia insieme, è successo.

Answer 2

ho sperimentato solo questo problema in presenza delle seguenti condizioni: 1) Il file .js contiene più funzioni, e 2) Il tentativo di impostare un punto di interruzione all'interno di una funzione che non è l'ultima funzione nel file .js

Quindi, una soluzione parziale consiste nello spostare una funzione in modo che sia l'ultima funzione nel file .js. Oppure, è possibile assegnare una singola funzione per file. In ogni caso, sarai in grado di impostare i breakpoint.

Questo è lontano dall'ideale, ma è l'unica "soluzione" che ho trovato finora.

Answer 3

"sourceMaps": "inline" in .babelrc ha risolto questo problema per me.