如何在React Native中正確調試？

Question

如何在React Native中正確調試？從我目前看到的情況來看，給出的調試信息對於縮小代碼中查找範圍的範圍並不太有用。我剛剛得到一個堆棧跟蹤，僅提到了node_modules 例如依賴關係：

Android emulator image（對不起，沒有足夠的信譽來證明這個帖子上圖片）

在上面的錯誤，我understsand在某個地方一個非Component對象被傳入，但我不知道如何追蹤它;整個堆棧跟蹤僅提及來自node_modules的文件。

我一直在使用Chrome開發者工具，以及嘗試：

Chrome Developer Tools image

我也試圖作出反應的開發工具和它要麼是沒有幫助的。

如何從調試中獲得輸出，這實際上是有用的，並且與我寫的代碼相關聯？

Answer 1

不幸的是，堆棧跟蹤並不總是有幫助，因爲在這種情況下，您必須通過橋接，並且沒有任何單一的全部答案來獲取您需要的信息。

在這種情況下，您是對的，您很可能在您的某個組件中返回適當的JSX對象時發生錯誤。如果你記得你最近添加到你的應用中的哪些組件，哪些組件構成導航問題的導航器路線等，你可以對一組可能有問題的組件進行有根據的猜測，並通過評論事物來縮小設置的範圍出。一旦這個集合是一個合理的大小，三重檢查你的渲染方法，並確保沒有任何奇怪的事情發生。

您可以使用if(__DEV__) console.log("Your message here")將自己的調試消息寫入chrome開發人員控制檯，以幫助自己瞭解您的應用正在做什麼（例如，呈現此組件，從共享存儲中獲取該數據等）。這將檢查應用程序是否在調試版本和發行版本中運行，並且只在運行調試版本時記錄消息。

對於android和iOS的XCode控制檯，您可以使用adb logcat來查看本地調試日誌，但我認爲他們不會在這種情況下提供幫助。

您可以繪製組件樹的圖片，在每個渲染方法的開始放置一個debugger語句，並逐個檢查組件，直到您的應用停止嘗試渲染事物並且您知道已經點擊一個有問題的組件（React將遞歸地呈現組件，從樹的同一層上的組件向上自上而下）。

我知道這很令人沮喪，當你無法立即通過查看堆棧跟蹤來判斷問題出在哪裏，但有時候這就是生活。