React 的浏览器插件，React Devtools Beta 发布

npde 9年前

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

  • Firefox 兼容

  • React Native 兼容

  • 更容易扩展和使用 

其他改进

树视图

The new tree view of the devtools

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

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

  • Stateful components have a red collapser

  • Improved keyboard navigation (hjkl or arrow keys)

  • Selected component is available in the console as $r

  • Props that change highlight in green

  • Right-click menu

    • Scroll node into view

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

    • Show the element in the "Elements" pane

    </ul>

    搜索

    选择搜索栏(or press "/")，使用组件名字搜索

    侧边栏面板

    • 显示组件的 context

    • 右击保存 prop/state 值作为全局变量

    下载：

    来自：http://www.oschina.net/news/64864/react-devtools-beta