Add React and Redux DevTools by whymarrh · Pull Request #6793 · MetaMask/metamask-extension

whymarrh · 2019-07-03T20:23:54Z

This PR adds the React DevTools and Redux DevTools to the project. This allows us to more easily debug React components, their state and props, as well as the history of redux actions.

(New: there's now a single command, npm run start:dev that'll run these concurrently. See 19613ba for context. The following instructions also work.)

You can test this setup by:

$ npm start # And load the extension as you normally would

And in another terminal:

$ npm run devtools:react

> metamask-crx@0.0.0 devtools:react
> react-devtools

And in another terminal:

$ npm run devtools:redux

> metamask-crx@0.0.0 devtools:redux
> remotedev --hostname=localhost --port=8000

[RemoteDev] Start server...
--------------------------------------------------------------------------------

   [Busy] Launching SocketCluster
   [Active] SocketCluster started
            Version: 14.3.5
            Environment: dev
            WebSocket engine: ws
            Port: 8000
            Master PID: 23877
            Worker count: 1
            Broker count: 1

   [Done] Migrations are finished

Important pending tasks

Figure out how to make this not affect our bundle size (global.METAMASK_DEBUG is always falsy?)

Bundle size

	Before	After
`npm start`	44M	46M
`npm run dist`	3.6M	3.8M

Screenshots and videos

React DevTools:

Opening the Redux DevTools (first installing the extension):

Inspecting Redux state:

whymarrh · 2019-07-03T20:25:16Z

ui/index.js

I think this should be behind some condition but I'm not sure what it is:

if (global.METAMASK_DEBUG) { require('react-devtools') }

Here global.METAMASK_DEBUG is always falsy for some reason

But maybe this doesn't matter as it's not a huge increase to our bundle?

I think it should be excluded from production builds. It's big enough.

Using METAMASK_DEBUG like you suggested seems perfectly fine to me. Another option would be adding it to the entries array in the gulpfile. Using a conditional is probably simpler though - easier to ensure it's only included in the ui bundle this way.

Ah sorry, I missed the part about it being undefined. That's because it should be process.env.METAMASK_DEBUG.

Good catch, I was confused by the use of global. a few lines below (which only works because it's after require('./app/store/store') which sets it 🤦‍♂

ui/app/store/store.js

package.json

danjm · 2019-07-08T13:37:44Z

Can we easily update the gulp file to remove the additional bundle size
Documentation regarding workflow changes

whymarrh · 2019-07-08T15:24:16Z

I can confirm that this does still affect our bundle size. More detailed numbers:

	Before	After
`npm run dist`	3740918 (3.6M)	3937709 bytes (3.8M)

Gudahtt · 2019-07-08T17:20:00Z

I've just updated this branch to conditionally load devtools. It was a bit more challenging than I had expected - using require from Browserify didn't seem to work as I had hoped. I had to make a separate file to act as a second entrypoint for importing the dev tools.

whymarrh · 2019-07-10T18:00:10Z

Documentation regarding workflow changes

I've updated the README with some new notes, see 19613ba

MarkOSullivan94 · 2019-07-17T22:37:41Z

Delighted to see this merged! 🎉 Definitely will make it easier to inspect what is going on and debug 👍

Might be worthwhile adding to the documentation that for Redux Devtools to work, the checkbox Use custom (local) server has to be ticked.

Was trying to figure out why I couldn't see anything and then eventually figured out I had to tick that option in the settings 😅

Granted it was my first time using it, so perhaps that's why I wasn't sure what to do.

Gudahtt · 2019-07-17T23:03:13Z

We ran into the same problem! 😅
Definitely worth documenting that step, I agree.

Gudahtt · 2019-07-18T16:39:19Z

@MarkOSullivan94 I've just put up a PR to improve the documentation: #6882

Feel free to take a look, and let us know if it could be improved further! Thanks for the feedback.

whymarrh requested a review from danjm as a code owner July 3, 2019 20:23

whymarrh commented Jul 3, 2019

View reviewed changes

whymarrh requested a review from Gudahtt July 3, 2019 20:26

Gudahtt reviewed Jul 3, 2019

View reviewed changes

ui/app/store/store.js Outdated Show resolved Hide resolved

Gudahtt requested changes Jul 3, 2019

View reviewed changes

package.json Outdated Show resolved Hide resolved

whymarrh mentioned this pull request Jul 4, 2019

React Devtools functionality #6455

Closed

whymarrh force-pushed the devtools2 branch from 307c48c to bd49a26 Compare July 5, 2019 19:20

Gudahtt previously approved these changes Jul 7, 2019

View reviewed changes

whymarrh requested a review from Gudahtt July 8, 2019 15:23

Gudahtt dismissed their stale review via 01cb093 July 8, 2019 17:18

Gudahtt force-pushed the devtools2 branch from bd49a26 to 01cb093 Compare July 8, 2019 17:18

whymarrh added 3 commits July 10, 2019 14:49

Add React and Redux DevTools

d34351c

Conditionally load react-devtools

6c20e8d

Add start:dev npm script to run the app with devtools

19613ba

whymarrh force-pushed the devtools2 branch from 01cb093 to 19613ba Compare July 10, 2019 17:49

Gudahtt approved these changes Jul 10, 2019

View reviewed changes

danjm approved these changes Jul 11, 2019

View reviewed changes

whymarrh merged commit 830c801 into MetaMask:develop Jul 11, 2019

whymarrh deleted the devtools2 branch July 11, 2019 14:57

whymarrh mentioned this pull request Jan 29, 2020

Remove redux-logger from mock-store #7930

Merged

Conversation

whymarrh commented Jul 3, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

whymarrh Jul 3, 2019

Choose a reason for hiding this comment

Uh oh!

whymarrh Jul 3, 2019

Choose a reason for hiding this comment

Uh oh!

Gudahtt Jul 3, 2019

Choose a reason for hiding this comment

Uh oh!

Gudahtt Jul 5, 2019

Choose a reason for hiding this comment

Uh oh!

whymarrh Jul 5, 2019

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

danjm commented Jul 8, 2019 • edited by whymarrh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

whymarrh commented Jul 8, 2019

Uh oh!

Gudahtt commented Jul 8, 2019

Uh oh!

whymarrh commented Jul 10, 2019

Uh oh!

MarkOSullivan94 commented Jul 17, 2019

Uh oh!

Gudahtt commented Jul 17, 2019

Uh oh!

Gudahtt commented Jul 18, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

whymarrh commented Jul 3, 2019 •

edited

Loading

danjm commented Jul 8, 2019 •

edited by whymarrh

Loading