From 3e6aaebbd7b03b68b63de7f40612c98bbe7ec693 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 15 Jan 2018 23:21:32 +0000 Subject: [PATCH] Add a note about disabling extensions when profiling (#528) --- content/docs/optimizing-performance.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index 7c60dd5e..f93b1fa3 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -164,15 +164,17 @@ In the **development** mode, you can visualize how components mount, update, and To do this in Chrome: -1. Make sure you're running the application in the development mode. +1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results! -2. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**. +2. Make sure you're running the application in the development mode. -3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. +3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**. -4. Stop recording. +4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang. -5. React events will be grouped under the **User Timing** label. +5. Stop recording. + +6. React events will be grouped under the **User Timing** label. For a more detailed walkthrough, check out [this article by Ben Schwarz](https://building.calibreapp.com/debugging-react-performance-with-react-16-and-chrome-devtools-c90698a522ad).