谷歌如何調(diào)試react項目

這篇文章主要介紹了谷歌如何調(diào)試react項目，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

谷歌調(diào)試react項目的方法：首先使用Chrome打開需要調(diào)試的React頁面，并打開“開發(fā)者工具”；然后點擊“開發(fā)者工具”上方工具欄最右側(cè)的react標簽；最后查看各個組件之間的嵌套關(guān)系以及每個組件的事件、屬性、狀態(tài)等信息即可。

谷歌瀏覽器怎么調(diào)試react項目？

（1）首先使用 Chrome 打開需要調(diào)試的 React 頁面，并打開“開發(fā)者工具”。

（2）在“開發(fā)者工具”上方工具欄最右側(cè)會有個 react 標簽。點擊這個標簽就可以看到當前應(yīng)用的結(jié)構(gòu)。

通過 React Developer Tools 我們可以很方便地看到各個組件之間的嵌套關(guān)系以及每個組件的事件、屬性、狀態(tài)等信息。

（3）React Developer Tools會自動檢測React組件，不過在webpack-dev-server模式下，webpack會自動將React組件放入到iframe下，導(dǎo)致React組件檢測失敗，變通方法是webpack-dev-server配置在--inline模式下即可:

webpack-dev-server --inline

（4）截止目前幾乎沒有瀏覽器原生支持es6標準，對于這種情況，chrome引入了source-map文件，標識es5代碼對應(yīng)的轉(zhuǎn)碼前的es6代碼哪一行，唯一要做的就是配置webpack自動生成source-map文件，這也很簡單，在webpack.config.js中增加一行配置即可（需要重新啟動webpack-dev-server使配置生效）

（5）修改某一處為錯誤，然后觀察結(jié)果

感謝你能夠認真閱讀完這篇文章，希望小編分享谷歌如何調(diào)試react項目內(nèi)容對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學(xué)習(xí)!