React SightReact 組件層次可視化工具

React Sight 是 React 應(yīng)用的組件層次樹(shù)的實(shí)時(shí)視圖，以 Chrome 插件形式發(fā)布，支持 React Router 和 Redux，現(xiàn)在支持Firefox。

設(shè)置 | 從 Chrome 商店安裝

1. 確保您已將React Dev Tools添加到 Chrome。
2. 從 Chrome 網(wǎng)上商店安裝React Sight
3. 如果您正在運(yùn)行本地文件 URL，請(qǐng)確保在 React Dev Tools 和 React Sight 的擴(kuò)展設(shè)置中啟用“允許訪問(wèn)文件 URL”
4. 運(yùn)行你的 React 應(yīng)用程序，或者打開(kāi)任何運(yùn)行 React 的網(wǎng)站！
5. 打開(kāi) Chrome 開(kāi)發(fā)者工具 (cmd+opt+j) -> React Sight 面板

用法

將鼠標(biāo)懸停在節(jié)點(diǎn)上，在側(cè)面板中查看它們的狀態(tài)和道具。

使用內(nèi)置過(guò)濾器隱藏 DOM 元素、Redux 組件和路由器組件，可以只關(guān)注自己編寫(xiě)的組件

通過(guò)雙擊放大，通過(guò) shift + 雙擊縮?。ㄊ髽?biāo)滾輪縮放即將推出?。?/p>