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

主要介紹

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

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

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

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

插件安裝方法

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

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

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

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

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

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

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

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

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

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

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

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

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

通過(guò)以上我們就安裝好React Developer Tools了。

React Developer Tools使用說(shuō)明 

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

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

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

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

webpack-dev-server --inline 

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

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