React 的瀏覽器插件，React Devtools Beta 發布

npde 9年前發布 | 41K 次閱讀 React

React Devtools Beta 發布，React Devtools 可以在 Chrome 和 Firefox 開發者工具審查 React 組件的瀏覽器擴展。

The full devtools gif

此版本是全新的 React Devtools 版本。此版本最大的改進是創建了一個定義的 API 來進行內部處理，所以其他工具可以受益，也不用強制要求依賴其實現細節。開發者可以自由的進行重構，而不用擔心破壞工具的內部實現。

當前版本是從 Blink 的 "Elements" pane fork 而來的，跟 Chrome 特定 APIs 緊密繼承。新版本的 devtools 將會與 Chrome 降低耦合。

主要特性

  • 100% React

    </li>

  • Firefox 兼容

    </li>

  • React Native 兼容

    </li>

  • 更容易擴展和使用 

    </li> </ul>

    其他改進

    樹視圖

    The new tree view of the devtools

    • Much richer view of your props, including the contents of objects and arrays

      </li>

    • Custom components are emphasized, native components are de-emphasized

      </li>

    • Stateful components have a red collapser

      </li>

    • Improved keyboard navigation (hjkl or arrow keys)

      </li>

    • Selected component is available in the console as $r

      </li>

    • Props that change highlight in green

      </li>

    • Right-click menu

      </li>

      • Scroll node into view

        </li>

      • Show the source for a component in the "Sources" pane

        </li>

      • Show the element in the "Elements" pane

        </li> </ul> </ul>

        搜索

        選擇搜索欄(or press "/")，使用組件名字搜索

        側邊欄面板