React.js的任何良好的調試教程

Question

我想知道是否有人可以建議一步一步的初學者教程關於如何調試React.js應用程序？我對React非常陌生，現在最煩人的是控制檯中出現了很多錯誤，但我不知道如何跟蹤它們。

Answer 1

這是很難描述調試，所以我會引導你完成進程進行調試組件級別的錯誤「顯示了許多錯誤」總戰略：

1. 安裝陣營開發工具擴展您的瀏覽器選擇：

   • Chrome
   • Firefox

2. 查找組件

   我建議這兩種路徑：

   2.A.從您的瀏覽器開發工具打開React tab，然後鍵入底部搜索欄以按名稱查找組件。

   2.b.打開Elements tab，選擇一些元素，然後切換回React。組件層次結構將展開，直到與您在Elements中選擇的DOM節點相匹配的React組件。

3. 檢查組件行爲不正確的狀態和道具。

如果由於某種原因，你不喜歡安裝瀏覽器擴展，可以拋出一個或多個debugger;語句設置斷點，將「暫停」您的應用程序的執行，讓您檢查調用堆棧，範圍，以及這些點的錯誤。

Answer 2

React在chrome開發工具中安裝了自己的調試工具。這是目前調試反應應用程序時最合適的工具。它允許您添加中斷點，在開發工具中編輯您的道具並查看即時結果。一個很好的教程是https://facebook.github.io/react/blog/2014/01/02/react-chrome-developer-tools.html，這是用於調試React的官方教程。您還可以下載擴展名爲「React Developer Tools」的擴展程序，該擴展程序將在Chrome中將開發人員工具的反應依賴關係安裝在該程序中。

您也可以使用沒有React依賴關係的標準chrome調試器，這也很適用。在Chrome中進行調試的一個很好的教程是：https://developers.google.com/web/tools/javascript/index?hl=en

主要問題是要學習如何通過開發工具在代碼中添加一個斷點，並學習如何通過從它們獲得的響應來識別問題。上一篇教程很好地展示瞭如何做到這一點。

我希望能幫助一點點快樂的編碼！