diff --git a/_data/authors.yml b/_data/authors.yml index a1e93a15..6fced9f8 100644 --- a/_data/authors.yml +++ b/_data/authors.yml @@ -12,6 +12,9 @@ Daniel15: fisherwebdev: name: Bill Fisher url: https://twitter.com/fisherwebdev +jaredly: + name: Jared Forsyth + url: https://twitter.com/jaredforsyth jgebhardt: name: Jonas Gebhardt url: https://twitter.com/jonasgebhardt diff --git a/_posts/2015-08-03-new-react-devtools-beta.md b/_posts/2015-08-03-new-react-devtools-beta.md new file mode 100644 index 00000000..642eed64 --- /dev/null +++ b/_posts/2015-08-03-new-react-devtools-beta.md @@ -0,0 +1,85 @@ +--- +title: "New React Devtools Beta" +author: jaredly +--- + +We've made an entirely new version of the devtools, and we want you to try it +out! + +![The full devtools gif](/react/img/blog/devtools-full.gif) + +## Why entirely new? + +Perhaps the biggest reason was to create a defined API for dealing with +internals, so that other tools could benefit as well and not have to depend on +implementation details. This gives us more freedom to refactor things +internally without worrying about breaking tooling. + +The current version of the devtools is a fork of Blink's "Elements" pane, and +is imperative, mutation-driven, and tightly integrated with Chrome-specific +APIs. The new devtools are much less coupled to Chrome, and easier to reason +about thanks to React. + +## What are the benefits? + +- 100% React +- Firefox compatible +- React Native compatible +- more extensible & hackable + +## Are there any new features? + +Yeah! + +### The Tree View + +![The new tree view of the devtools](/react/img/blog/devtools-tree-view.png) + +- 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 + +### Searching + +Select the search bar (or press "/"), and start searching for a component by +name. + +![](/react/img/blog/devtools-search.gif) + +### The Side Pane + +- Now shows the `context` for a component +- Right-click to store a prop/state value as a global variable + +![](/react/img/blog/devtools-side-pane.gif) + +## How do I install it? + +First, disable the Chrome web store version, or it will break things. Then +[download the .crx](https://github.com/facebook/react-devtools/releases) and +drag it into your `chrome://extensions` page. If it's not working to drag it +from the downloads bar, try opening your downloads folder and drag it from +there. + +Once we've determined that there aren't any major regressions, we'll update +the official web store version, and everyone will be automatically upgraded. + +### Also Firefox! + +We also have an initial version of the devtools for Firefox, which you can +download from the same [release page](https://github.com/facebook/react-devtools/releases). + +## Feedback welcome + +Let us know what issues you run into +[on GitHub](https://github.com/facebook/react-devtools/issues), and check out +[the README](https://github.com/facebook/react-devtools/tree/devtools-next) +for more info. diff --git a/css/react.scss b/css/react.scss index e5906f1b..7a97f9e3 100644 --- a/css/react.scss +++ b/css/react.scss @@ -794,6 +794,10 @@ p code { margin-bottom: 30px; } +.post img { + max-width: 100%; +} + .pagination { margin-bottom: 30px; diff --git a/img/blog/devtools-full.gif b/img/blog/devtools-full.gif new file mode 100644 index 00000000..fd7ed949 Binary files /dev/null and b/img/blog/devtools-full.gif differ diff --git a/img/blog/devtools-search.gif b/img/blog/devtools-search.gif new file mode 100644 index 00000000..22d80051 Binary files /dev/null and b/img/blog/devtools-search.gif differ diff --git a/img/blog/devtools-side-pane.gif b/img/blog/devtools-side-pane.gif new file mode 100644 index 00000000..381e3554 Binary files /dev/null and b/img/blog/devtools-side-pane.gif differ diff --git a/img/blog/devtools-tree-view.png b/img/blog/devtools-tree-view.png new file mode 100644 index 00000000..a8add558 Binary files /dev/null and b/img/blog/devtools-tree-view.png differ