React - React Developer Tools開發者工具的安裝與使用（Chrome調試插件）

原文地址：http://www.cnplugins.com/zhuanti/how-to-use-react-tools.html

雖然我們曾經在React開發者工具的基礎介紹里面有概括性的介紹過React Developer Tools的基本使用方法，但是由於使用的頻率比較高，所以今天就專門整理的一篇文章來仔細介紹React Developer Tools的安裝和使用。在React Developer Tools使用過程常遇到的問題及解決辦法我們也會介紹。

1，React Developer Tools介紹

React Developer Tools 是一款由 facebook 開發的有用的 Chrome瀏覽器擴展。通過它我們可以查看應用程序的 React 組件分層結構，而不是更加神秘的瀏覽器 DOM 表示。
注意：該插件只對 ReactJS 開發有效。如果是 React Native 的話則無法使用這個插件調試。 

2，安裝步驟

（1）點擊 Chrome 的“菜單”->“更多工具”->“擴展程序”。
2.在打開的“擴展程序”頁面中，點擊最下方的“獲取更多擴展程序”打開谷歌在線商店。 （vpn、番羽牆，大家懂得。【傳送門】）

3.最后搜索“ React Developer Tools”並安裝即可。當然本站提供其下載地址，所以大家可以自行離線下載安裝。  

4.安裝完畢后打開擴展程序管理頁面。將 React Developer Tools 的“允許訪問文件網址”勾選。

通過以上4步我們就安裝好React Developer Tools了。

3，React Developer Tools使用說明 

（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 Developer Tools的使用方法就介紹到這里，如果有問題大家可以給我留言哦