New issue
Advanced search Search tips

Issue 901418 link

Starred by 2 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Not "Bottom-Up" or "Call Tree" results appear when debugging React app

Reported by max.sh...@apollo.io, Nov 2

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36

Steps to reproduce the problem:
1. Clone https://github.com/larkintuckerllc/react-patterns (The repo contains several examples. The User Timings Bottom-Up and Call Tree information do not show up on the lifecycle app. Interestingly, the User Timings showed up correctly on the jsx example app).

2. After navigating to the lifecycle app folder, run npm install
3. npm start
4. Add ?react_perf to the URL
5. Open Chrome Performance tools. Press the "Start Profiling and Reload page"
6. Open the User Timing section
7. Select a specific component. The Summary tab shows up as expected. There's nothing in the Bottom-Up or Call Tree tabs.

What is the expected behavior?
The Bottom-Up and Call Tree tabs show sub call information to provide a further breakdown.

What went wrong?
There's nothing in the Bottom-Up or Call Tree tabs.

Did this work before? N/A 

Chrome version: 70.0.3538.77  Channel: stable
OS Version: OS X 10.13.1
Flash Version: 

Others have recently reported the same issue on StackOverflow:

- https://stackoverflow.com/questions/52364829/no-timing-breakdown-in-user-timing-section-in-performance-tab-in-chrome-dev-tool
- https://stackoverflow.com/questions/52315796/stats-for-child-components-are-not-always-available-in-user-timing-section-of-ch
 
Try opening devtools-on-devtools and see if there are errors:
1. undock devtools into a floating window in its three-dot menu
2. focus this devtools window 
3. press ⌘ + Option + i which should open a second devtools window
4. in that new window switch to Console panel, and copypaste the output here
Ha. Didn't know about devtools-on-devtools. 

Unfortunately, nothing looks created from the Console:

shell.js:3123 [Deprecation] document.registerElement is deprecated and will be removed in M73, around March 2019. Please use window.customElements.define instead. See https://www.chromestatus.com/features/4642138092470272 for more details.
UI.registerCustomElement @ shell.js:3123
shell.js:3081 [Deprecation] Element.createShadowRoot is deprecated and will be removed in M73, around March 2019. Please use Element.attachShadow instead. See https://www.chromestatus.com/features/4507242028072960 for more details.
UI.createShadowRootWithCoreStyles @ shell.js:3081
shell.js:7924 Main._createAppUI: 26.5888671875ms
shell.js:7924 Main._showAppUI: 62.254150390625ms
shell.js:7924 Main._initializeTarget: 13.822998046875ms
shell.js:7924 Main._lateInitialization: 0.988037109375ms
Bisected to r562109 = 1eda4c22b63a714e90ca8594ca796598eb1307c7 = https://crrev.com/c/1073612 by alph@chromium.org
"DevTools: Do not sort async events by endTime."
Landed in 69.0.3442.0
Labels: Needs-Triage-M70
Owner: alph@chromium.org
Labels: -Type-Bug Triaged-ET Target-70 Target-71 Target-72 RegressedIn-69 M-72 FoundIn-71 FoundIn-70 FoundIn-72 hasbisect Type-Bug-Regression
Status: Assigned (was: Unconfirmed)
Tried testing the issue on mac 10.13.6 using chrome reported version #70.0.3538.77, but got the same results as the reporter in comment #2.
As per comment #3, the bisect information is as follows:
change log:
https://chromium.googlesource.com/chromium/src/+/1eda4c22b63a714e90ca8594ca796598eb1307c7
From the above change log suspecting below change
Change-Id: I6068da8f8c9d2b7a0730003b19bf37fb2d3af590
Reviewed-on: https://chromium-review.googlesource.com/1073612

alph@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner.
Note: Unable to update other OS behaviour as the issue is not triagible from TE-end.

Thanks...!!

Sign in to add a comment