Add blog post about the new devtools beta
Jared Forsyth committed
Jul 23, 2015 at 11:15 UTC
1343cc0c9b543b37b73f9ed2861f389cca414f03
7 files changed
+92
docs/_data/authors.yml
+3
@@ -12,6 +12,9 @@ Daniel15:
12
fisherwebdev:
13
name: Bill Fisher
14
url: https://twitter.com/fisherwebdev
15
+jaredly:
16
+ name: Jared Forsyth
17
+ url: https://twitter.com/jaredforsyth
18
jgebhardt:
19
name: Jonas Gebhardt
20
url: https://twitter.com/jonasgebhardt
docs/_posts/2015-08-03-new-react-devtools-beta.md
new
+85
@@ -0,0 +1,85 @@
1
+---
2
+title: "New React Devtools Beta"
3
+author: jaredly
4
+---
5
+
6
+We've made an entirely new version of the devtools, and we want you to try it
7
+out!
8
+
9
+
10
+
11
+## Why entirely new?
12
+
13
+Perhaps the biggest reason was to create a defined API for dealing with
14
+internals, so that other tools could benefit as well and not have to depend on
15
+implementation details. This gives us more freedom to refactor things
16
+internally without worrying about breaking tooling.
17
+
18
+The current version of the devtools is a fork of Blink's "Elements" pane, and
19
+is imperative, mutation-driven, and tightly integrated with Chrome-specific
20
+APIs. The new devtools are much less coupled to Chrome, and easier to reason
21
+about thanks to React.
22
+
23
+## What are the benefits?
24
+
25
+- 100% React
26
+- Firefox compatible
27
+- React Native compatible
28
+- more extensible & hackable
29
+
30
+## Are there any new features?
31
+
32
+Yeah!
33
+
34
+### The Tree View
35
+
36
+
37
+
38
+- Much richer view of your props, including the contents of objects and arrays
39
+- Custom components are emphasized, native components are de-emphasized
40
+- Stateful components have a red collapser
41
+- Improved keyboard navigation (hjkl or arrow keys)
42
+- Selected component is available in the console as `$r`
43
+- Props that change highlight in green
44
+- Right-click menu
45
+
46
+ - Scroll node into view
47
+ - Show the source for a component in the "Sources" pane
48
+ - Show the element in the "Elements" pane
49
+
50
+### Searching
51
+
52
+Select the search bar (or press "/"), and start searching for a component by
53
+name.
54
+
55
+
56
+
57
+### The Side Pane
58
+
59
+- Now shows the `context` for a component
60
+- Right-click to store a prop/state value as a global variable
61
+
62
+
63
+
64
+## How do I install it?
65
+
66
+First, disable the Chrome web store version, or it will break things. Then
67
+[download the .crx](https://github.com/facebook/react-devtools/releases) and
68
+drag it into your `chrome://extensions` page. If it's not working to drag it
69
+from the downloads bar, try opening your downloads folder and drag it from
70
+there.
71
+
72
+Once we've determined that there aren't any major regressions, we'll update
73
+the official web store version, and everyone will be automatically upgraded.
74
+
75
+### Also Firefox!
76
+
77
+We also have an initial version of the devtools for Firefox, which you can
78
+download from the same [release page](https://github.com/facebook/react-devtools/releases).
79
+
80
+## Feedback welcome
81
+
82
+Let us know what issues you run into
83
+[on GitHub](https://github.com/facebook/react-devtools/issues), and check out
84
+[the README](https://github.com/facebook/react-devtools/tree/devtools-next)
85
+for more info.
docs/css/react.scss
+4
@@ -794,6 +794,10 @@ p code {
794
margin-bottom: 30px;
795
}
796
797
+.post img {
798
+ max-width: 100%;
799
+}
800
+
801
.pagination {
802
margin-bottom: 30px;
803
docs/img/blog/devtools-full.gif
Binary files /dev/null and b/docs/img/blog/devtools-full.gif differ
docs/img/blog/devtools-search.gif
Binary files /dev/null and b/docs/img/blog/devtools-search.gif differ
docs/img/blog/devtools-side-pane.gif
Binary files /dev/null and b/docs/img/blog/devtools-side-pane.gif differ
docs/img/blog/devtools-tree-view.png
Binary files /dev/null and b/docs/img/blog/devtools-tree-view.png differ