React Context DevTool 是 React Context 和 useReducer API 的調(diào)試工具，專為React開(kāi)發(fā)者設(shè)計(jì)，這款插件極大地方便了開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中對(duì)狀態(tài)管理的調(diào)試和檢查。

您可以輕松地在不同視圖（如樹(shù)視圖、原始視圖和差異視圖）中顯示上下文值的變化。
現(xiàn)在Devtool支持使用Reducer API。輕松調(diào)試狀態(tài)更改并從 devtool 調(diào)度操作。

主要特性

直觀的用戶界面：React Context DevTool提供了一個(gè)簡(jiǎn)潔而易于使用的用戶界面，使你可以輕松地查看和追蹤上下文值的變化。

多視圖展示：它支持在不同的視圖（如樹(shù)視圖、原始視圖和差異視圖）之間切換，以便你能以最適合自己的方式查看和理解數(shù)據(jù)。

調(diào)試狀態(tài)更改：使用這款插件，你可以輕松地調(diào)試你的狀態(tài)更改，并觀察它們是如何影響到組件樹(shù)的。

調(diào)度操作：它還允許你調(diào)度操作并在不同的時(shí)間點(diǎn)查看上下文的狀態(tài)，這對(duì)于理解復(fù)雜的交互過(guò)程非常有幫助。

跨瀏覽器使用：React Context DevTool不僅可以在Chrome瀏覽器中使用，而且兼容其他主流瀏覽器。

開(kāi)源：作為一個(gè)開(kāi)源工具，它受到了社區(qū)的廣泛支持和貢獻(xiàn)，你可以自由地使用、修改和分發(fā)它。

 插件安裝方法

方法一：.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 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決