React Developer Tools（React開發(fā)者工具）是React必備的開發(fā)者工具擴展?？梢栽赾hrome開發(fā)者工具中得到一個名為React的新標簽，檢查React組件層次結構，在頁面上顯示React組件。

主要介紹

React Developer Tools是一款由facebook開發(fā)的有用的Chrome 瀏覽器擴展，可以通過 Chrome Web存儲獲取?？梢栽赾hrome開發(fā)者工具中得到一個名為React的新標簽，檢查React組件層次結構，在頁面上顯示React組件。

使用 Chrome Devtools 進行調試時，可以查看應用程序的 React 組件分層結構，而不是更加神秘的瀏覽器 DOM 表示。

添加react developer tools到chrome，是對chrome開發(fā)工具的React調試工具。React的開發(fā)工具是開源Chrome DevTools延伸反應的JavaScript庫。它允許你檢查React在Chrome開發(fā)者工具組件的層次結構（原名WebKit Web Inspector）。你會得到新的標簽要求在你的Chrome DevTools反應。這表明你的根反應組件在頁面渲染，以及他們最終渲染組件。

注意：該插件只對 ReactJS 開發(fā)有效。如果是 React Native 的話則無法使用這個插件調試。

插件安裝方法

方法一：.crx文件格式插件安裝

1.首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設置。

2.在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序或直接輸入：chrome://extensions/

3.找到自己已經下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動到Chrome的擴展管理界面中，這時候用戶會發(fā)現(xiàn)在擴展管理器的中央部分中會多出一個”拖動以安裝“的插件按鈕。

4.松開鼠標就可以把當前正在拖動的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標后還會給予用戶一個確認安裝的提示。

5.用戶這時候只需要點擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴展管理器找到已經安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設置。

2.在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序。

3.勾選開發(fā)者模式，點擊加載已解壓的擴展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決

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

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

React Developer Tools使用說明 

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

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

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

（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).修改某一處為錯誤，然后觀察結果