如何調試React應用程序

遇到問題時可以用來調試React應用的一些工具

您可以用來調試React應用程序的最佳工具是利用React開發人員工具。這是一個瀏覽器擴展，使檢查和分析React應用程序變得輕而易舉。

我寫了一篇專門針對他們的博客文章，請查看：React開發人員工具。

除了對構建Next.js應用程序必不可少的React Developer Tools之外，我還要強調兩種調試Next.js應用程序的方法。

首先很明顯console.log()和所有其他控制台API工具。 Next應用程序的工作方式將使日誌語句在瀏覽器控制台中或在您啟動Next的終端中使用以下方式工作：npm run dev。

特別是，如果頁面是從服務器加載的，則將URL指向服務器時，或者單擊刷新按鈕（cmd / ctrl-R），則任何控制台日誌記錄都會在終端中發生。

通過單擊鼠標進行的後續頁面轉換將使所有控制台日誌記錄都發生在瀏覽器內部。

請記住，如果您對丟失日誌感到驚訝。

另一個必不可少的工具是debugger陳述。將此語句添加到組件將使瀏覽器暫停呈現頁面：

我的最佳建議是學習如何使用這些工具。調試JavaScript的權威指南。

真的很棒，因為現在您可以使用瀏覽器調試器檢查值並一次一行運行您的應用程序。

如果使用的是Next.js，則還可以使用VS Code調試器來調試服務器端代碼。我提到了這項技術，本教程進行設置。

免費下載我的反應手冊