
New React DevTools - bpierre
https://reactjs.org/blog/2019/08/15/new-react-devtools.html
======
erikpukinskis
React DevTools are very valuable.

But only because React, with transpiling and the shadow DOM and all that is so
inscrutable.

There’s no hope of understanding the DOM with React, no hope of understanding
styles with styled-components. There’s no hope of placing a breakpoint in your
code and tracing forward through events. No hope of understanding stack
traces.

The DevTools begin to address some of those deficiencies. It does help, but
still leaves me thinking the tradeoffs weren’t worth it. You can never reach
simplicity, only manageable complexity. In the long run it leaves an
opportunity for a new generation of tools that respect JavaScript and the DOM.

~~~
mieseratte
What’s wrong with the in-browser DOM inspector? I’ve never run into a problem
with React, it’s output, it’s error messages, or anything else such that I
couldn’t trivially dive in and fix. I’ve never once felt the need for React
DevTools in my 5 or so years of React.

I remember AngularJS well, that’s a framework I can do without.

~~~
DrJokepu
Inspecting the state or properties of components. Inspecting the component
hierarchy (not always possible to guess it from the DOM). Things like that.

------
acemarke
Brian has done some _fantastic_ work improving the DevTools! This is going to
benefit the whole React community for years to come.

Be sure to check out the complete changelog and the tutorial linked in the
announcement.

~~~
meetzaveri7
Yes he has put in great efforts for building this awesome tool

------
droidist2
One thing I like about having React DevTools installed is you can easily see
which sites use React because the little icon lights up. It's a surprising
amount these days; React is getting so popular.

~~~
tannhaeuser
From my PoV, React is already past its maximum in the hype cycle, and I see
customers choosing vue.js most of the time. I have no stake in this (haven't
worked with vue.js, nor with new React with hooks etc.), but presumably vue.js
is chosen for React-like MVw without the jsx/babel+webpack build step drama,
as a simple js lib.

~~~
danabramov
This sounds like a misunderstanding to me. “JSX/Babel/webpack” aren’t any more
required for React than for Vue. Here’s how to use React without them:
[https://reactjs.org/docs/add-react-to-a-
website.html](https://reactjs.org/docs/add-react-to-a-website.html)

Just drop it as a script on the page.

Ironically, my understanding is that it’s Vue that requires a compiler for
even basic component support. If you don’t use webpack or similar tools with
Vue, as far as I know, you can’t declare an idiomatic reusable Vue component.

With React, whether you use Babel/JSX/Webpack or not, components are always
available. They’re the whole point.

I think it’s fair to say that Vue is initially more familiar to and easier to
get started with for folks who are more comfortable with HTML. React is more
JS-centric. Even though in the end they render the same DOM elements.

~~~
tannhaeuser
Hm, then it's indeed a misunderstanding on my side. I definitely need to take
a look into vue, but I thought people were choosing it over React because they
didn't like JSX but would prefer straight HTML (though again, I don't know vue
and how it would be possible for vue to render components based on just HTML
syntax).

~~~
danabramov
Vue offers a more gradual learning curve coming from HTML. Because in the
beginning, you don't write components in JS at all. Instead, you can use Vue
"directives" like `v-if` right _inside_ your HTML. Later, when you're ready
for components, you have to add a compiler.

React takes a different approach. It doesn't "pretend" to be HTML by extending
it with custom directives. Instead, it forces you to start the journey in JS
land. That can be frustrating at first if you're unfamiliar with JS. But the
gap between "simple" and "complex" is smaller: you learn the idea of
components once, and can apply it with or without a toolchain.

------
JTenerife
As if the improvements of the dev tools weren't enough, they've created a
sweet interactive tutorial ([https://react-devtools-
tutorial.now.sh](https://react-devtools-tutorial.now.sh))! Don't know it it's
new, but I'am very impressed.

~~~
Vinnl
Where they=brianvaughn (I see he's also left a comment elsewhere on this
post), who did most of the work on both the tutorial and the dev tools.

~~~
brianvaughn
Glad the tutorial is helpful! :)

It was a last minute idea and I'm excited about how it turned out.

------
Waterluvian
Ooooh exciting.

I was impressed to see how well hooks worked when attaching Vscode to a chrome
instance in debug mode. They just show up in the list of closures at your
breakpoint. Maybe I need to try harder but I haven't been needing react dev
tools.

~~~
brianvaughn
You might still check out DevTools at some point :) They do a lot of small
things that can be nice.

------
ralusek
Does anybody bother to go through this codebase? It's a great tool, but
Facebook is the last company I'd want to have the obscene privileges that
extensions have.

~~~
danabramov
If you saw the scary permission dialog upgrading, that was due to our mistake:
[https://twitter.com/reactjs/status/1162174507391574017](https://twitter.com/reactjs/status/1162174507391574017).

Commits with fixes:

* [https://github.com/bvaughn/react-devtools-experimental/commi...](https://github.com/bvaughn/react-devtools-experimental/commit/545de6f02e7d8905ba4e1cd358e68bb640a31a0a)

* [https://github.com/bvaughn/react-devtools-experimental/commi...](https://github.com/bvaughn/react-devtools-experimental/commit/527fc4a63f497db1f370a8312807c2a68147edec)

 __Both of these issues should be fixed in 4.0.2. __

Brian goes into more detail on why we originally added these permissions
during the rewrite, and why we were able to remove
them:[https://www.reddit.com/r/reactjs/comments/cqx554/introducing...](https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex0p0m1/).
(TLDR: some were for features we ended up cutting; others had easier
workarounds that didn't need these permissions.)

The source code is here ([https://github.com/bvaughn/react-devtools-
experimental/commi...](https://github.com/bvaughn/react-devtools-
experimental/commits/source)). We're currently moving it into React repo so
it's easier to find
([https://github.com/facebook/react/pull/16381](https://github.com/facebook/react/pull/16381))
but haven't managed to make the CI green so the source of truth for releases
is still in that branch. We plan to cut over to React repo as source of truth
next week.

~~~
ralusek
Yes, thanks for addressing.

------
mistyeyed
Only had a cursory glance at the new tools but looks awesome. Love the new
look and feel and the hooks inspector is working flawlessly. kudos folks!!

------
notus
Hooks still show up without variable names associated with them (I say still
because I was using this before release). I assumed they would try to find a
way around it. In the current state the hooks support is useless.

------
hswolff
Congrats on the release Brian!

------
SimeVidas
1.7 million users in Chrome? Wow, that’s a lot of React developers.

~~~
brianvaughn
It's a little scary to upload a completely new version, when you know there's
that many weekly active users that are going to be hammering away on it soon.

------
duxup
>It also offers full support for React Hooks, including inspecting nested
objects.

Thank goodness, that was killing me.

------
panzerklein
Does anybody else get "Unable to find React on the page" error in private mode
in Firefox?

------
dmitryminkovsky
Great news. Excited to try it out. Thanks a lot.

------
komali2
Is this the same program that, if a project has installed, tries to make a
bunch of websocket requests from the app to the browser plugin, which if non-
existent causes your console and network tab to be flooded with failed
websocket requests?

~~~
LinguaBrowse
I'm surprised that everyone's looking confused here. Yes: since 2016 (React
Native v0.32), at least on iOS, React Native apps in development mode try to
open WebSocket connections to standalone React DevTools at startup and indeed
flood your console with cryptic messages.

[https://github.com/facebook/react-
native/issues/10027](https://github.com/facebook/react-native/issues/10027)

The issue has been locked and is still open.

~~~
danabramov
Thanks for explaining. This is the first time I’m hearing about this issue.
I’ll pass it to the team so it can get fixed.

~~~
LinguaBrowse
Thanks, Dan! The incessant console-flooding was actually one of the things
that made me give up on React Native. Great to hear that this is being
addressed.

~~~
danabramov
>The incessant console-flooding was actually one of the things that made me
give up on React Native.

Doesn't this particular issue include a workaround?

~~~
komali2
> But unfortunate it's not enough. Especially because other websocket created
> in RCTPackagerConnection (funcition socketForLocation) and as I can see it
> can't be disabled from AppDelegate :-(

