Menu
According to this article:
Debugging React performance with React 16 and Chrome Devtools.
I want to inspect some performance things of my own website built by React as well. But I cannot see the User timing section in my DevTools. Chrome version with 62.0.3202.89 in my computer, am I missing something?
781
# Open the Issues tab Open DevTools. Click the Go to Issues button in the yellow warning bar. Alternatively, select Issues from the More tools menu. Once you're on the Issues tab, click the Reload page button if necessary.
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
Goto chrome://flags/#enable-devtools-experiments , and enable Developer Tools experiments . Select Relaunch Now at the bottom of the page. F12 to Open developer tools, go to Settings , select Experiments tab, and check Allow custom UI themes .
Chrome. To open the developer console window on Chrome, use the keyboard shortcut Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Alternatively, you can use the Chrome menu in the browser window, select the option "More Tools," and then select "Developer Tools."
I was able to make this work by appending ?react_perf to my url. Not sure why this was so difficult to find... hope it works for you.
https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline
55
The User Timing tab was removed from chrome in favour of the "Timings" tab which combines some well known timings, such as LCP, OnLoad Event and custom User Timing API marks/measures.
36
You need to add ?react_perf to the URL
It's required if you're using React 15 https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#profiling-components-with-chrome-timeline
Not required for React 16 though https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
