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

主要介紹

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

使用 Chrome Devtools 進(jìn)行調(diào)試時，可以查看應(yīng)用程序的 React 組件分層結(jié)構(gòu)，而不是更加神秘的瀏覽器 DOM 表示。

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

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

插件安裝方法

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

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

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

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

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

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

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

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

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

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

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

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

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

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

React Developer Tools使用說明 

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

（2）在“開發(fā)者工具”上方工具欄最右側(cè)會有個 react 標(biāo)簽。點擊這個標(biāo)簽就可以看到當(dāng)前應(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標(biāo)準(zhǔn)，對于這種情況，chrome引入了source-map文件，標(biāo)識es5代碼對應(yīng)的轉(zhuǎn)碼前的es6代碼哪一行，唯一要做的就是配置webpack自動生成source-map文件，這也很簡單，在webpack.config.js中增加一行配置即可（需要重新啟動webpack-dev-server使配置生效）

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