這篇文章主要介紹了谷歌如何調試react項目，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
谷歌調試react項目的方法：首先使用Chrome打開需要調試的React頁面，并打開“開發者工具”；然后點擊“開發者工具”上方工具欄最右側的react標簽；最后查看各個組件之間的嵌套關系以及每個組件的事件、屬性、狀態等信息即可。
谷歌瀏覽器怎么調試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項目內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
