Learn about the new React DevTools

[orballo]

Link to video: https://www.youtube.com/watch?v=vfm4018YBEY&feature=youtu.be Article: https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/

How to get it working:

Install React:

1. Clone the repo: git clone git@github.com:facebook/react.git
2. Install dependencies: yarn
3. Build for node: yarn build core,dom,interaction-tracking --type=NODE
4. Link builds with frontity:
   • cd build/node_modules/react && yarn link && cd ../../..
   • cd build/node_modules/react-dom && yarn link && cd ../../..
   • cd build/node_modules/interaction-tracking && yarn link && cd ../../..
   • Go to frontity and run yarn link react react-dom interaction-tracking

Known issues:

Rollup might complain about Java. Install this version: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Install React Devtools:

1. Clone the repo: git clone git@github.com:facebook/react-devtools.git
2. Install dependencies: yarn
3. Build extension for Chrome: yarn build:extension:chrome
4. In Chrome go to: chrome://extension
5. Deactivate the release version of react-devtools.
6. Activate developer mode on the top-right corner:
7. Click on load unpacked on the top-left corner:
8. Select the react-devtools/shells/chrome/build/unpacked folder.

Known issues:

You need to use Node v8.4.11 LTS: https://nodejs.org/dist/v8.11.4/node-v8.11.4.pkg

Finally:

Now open a new tab in Chrome (https://demo.worona.org) and react's tab in Chrome devtools should be working.

This makes Profiler and track to work by themselves, but the integration between both is in another branch (https://github.com/bvaughn/react/tree/interaction-tracking-profiler-integration), and when we change to that branch, react-devtools stops working.

[orballo]

I wouldn't spend more time on this until the feature is at least in beta.