谷歌怎麼調試react項目

Google調試react專案的方法：首先使用Chrome打開需要調試的React頁面，並打開“開發者工具”；然後點擊“開發者工具”上方工具列最右側的react標籤；最後查看各個組件之間的嵌套關係以及每個組件的事件、屬性、狀態等資訊即可。

本教學操作環境：windows7系統、react17.0.1&&chrome87.0版本、thinkpad t480電腦。

推薦：《react影片教學》

Google瀏覽器怎麼調試react專案？

（1）首先使用 Chrome 開啟需要偵錯的 React 頁面，並開啟「開發者工具」。

（2）在「開發者工具」上方工具列最右邊會有個 react 標籤。點擊這個標籤就可以看到目前應用的結構。

透過 React Developer Tools 我們可以很方便地看到各個元件之間的巢狀關係以及每個元件的事件、屬性、狀態等資訊。

（3）React Developer Tools會自動偵測React元件，但在webpack-dev-server模式下，webpack會自動將React元件放入到iframe下，導致React元件偵測失敗，變通方法是webpack -dev-server配置在--inline模式下即可:

webpack-dev-server --inline

（4）截止目前幾乎沒有瀏覽器原生支援es6標準，對於這種情況，chrome引入了source-map文件，標識es5程式碼對應的轉碼前的es6程式碼哪一行，唯一要做的就是配置webpack自動產生source-map文件，這也很簡單，在webpack.config.js中增加一行配置即可（需要重新啟動webpack-dev-server使組態生效）

（5）修改某一處為錯誤，然後觀察結果

更多React相關技術文章，請造訪React答疑欄位進行學習！

以上是谷歌怎麼調試react項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！