如何調試一個React應用程序

當你遇到問題時，可以使用一些工具來調試React應用程序

調試React應用程序的最佳工具是使用 React開發者工具。這是一個瀏覽器擴展，可以輕鬆地檢查和分析React應用程序。

我寫了一篇完全專門介紹React開發者工具的博客文章，請查看: React開發者工具。

除了React開發者工具之外，這對於構建Next.js應用程序至關重要，我還想強調兩種調試Next.js應用程序的方法。

首先當然是 console.log() 和其他 Console API 工具。Next應用程序的工作方式將使日誌語句在瀏覽器控制台或使用 npm run dev 啟動Next的終端中工作。

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

透過點擊鼠標導致的後續頁面轉換將使所有控制台日誌在瀏覽器內發生。

只要記住，如果你對於缺少日誌感到驚訝。

另一個不可或缺的工具是 debugger 語句。將此語句添加到組件中將暫停瀏覽器渲染頁面:

關於如何使用這些工具的最好建議在我的 JavaScript調試指南 中。真是太棒了，因為現在您可以使用瀏覽器調試器檢查值並逐行運行應用程序

如果您使用的是Next.js，您還可以使用 VS Code 調試器調試服務器端代碼。我在 此教程 中提到了這種技術和設置方法。