Skip to content

Commit b42f6db

Browse files
blakefblakef
committed
[DevTools][Profile Event Parents] Added a stack of of component owners
You now get some idea of the context of a component that causes a state change, with a sidebar listing the component's hierarchy. This additionally allows user to click on components to link to their source code. resolves #24170
1 parent 229c86a commit b42f6db

File tree

16 files changed

+432
-91
lines changed

16 files changed

+432
-91
lines changed

‎packages/react-devtools-extensions/webpack.backend.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ module.exports = {
6969
new DefinePlugin({
7070
__DEV__: true,
7171
__PROFILE__: false,
72+
__EXPERIMENTAL__: true,
7273
__DEV____DEV__: true,
7374
'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
7475
'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,

‎packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1257,27 +1257,43 @@ describe('Timeline profiler', () => {
12571257
Object {
12581258
"componentName": "Example",
12591259
"lanes": "0b0000000000000000000000000000100",
1260+
"parents": Array [
1261+
2,
1262+
1,
1263+
],
12601264
"timestamp": 10,
12611265
"type": "schedule-state-update",
12621266
"warning": null,
12631267
},
12641268
Object {
12651269
"componentName": "Example",
12661270
"lanes": "0b0000000000000000000000001000000",
1271+
"parents": Array [
1272+
2,
1273+
1,
1274+
],
12671275
"timestamp": 10,
12681276
"type": "schedule-state-update",
12691277
"warning": null,
12701278
},
12711279
Object {
12721280
"componentName": "Example",
12731281
"lanes": "0b0000000000000000000000001000000",
1282+
"parents": Array [
1283+
2,
1284+
1,
1285+
],
12741286
"timestamp": 10,
12751287
"type": "schedule-state-update",
12761288
"warning": null,
12771289
},
12781290
Object {
12791291
"componentName": "Example",
12801292
"lanes": "0b0000000000000000000000000010000",
1293+
"parents": Array [
1294+
2,
1295+
1,
1296+
],
12811297
"timestamp": 10,
12821298
"type": "schedule-state-update",
12831299
"warning": null,
@@ -1615,6 +1631,10 @@ describe('Timeline profiler', () => {
16151631
Object {
16161632
"componentName": "Example",
16171633
"lanes": "0b0000000000000000000000000000001",
1634+
"parents": Array [
1635+
1,
1636+
2,
1637+
],
16181638
"timestamp": 20,
16191639
"type": "schedule-state-update",
16201640
"warning": null,
@@ -1742,6 +1762,10 @@ describe('Timeline profiler', () => {
17421762
Object {
17431763
"componentName": "Example",
17441764
"lanes": "0b0000000000000000000000000010000",
1765+
"parents": Array [
1766+
1,
1767+
2,
1768+
],
17451769
"timestamp": 10,
17461770
"type": "schedule-state-update",
17471771
"warning": null,
@@ -1873,6 +1897,10 @@ describe('Timeline profiler', () => {
18731897
Object {
18741898
"componentName": "Example",
18751899
"lanes": "0b0000000000000000000000000000001",
1900+
"parents": Array [
1901+
1,
1902+
2,
1903+
],
18761904
"timestamp": 21,
18771905
"type": "schedule-state-update",
18781906
"warning": null,
@@ -1935,6 +1963,10 @@ describe('Timeline profiler', () => {
19351963
Object {
19361964
"componentName": "Example",
19371965
"lanes": "0b0000000000000000000000000010000",
1966+
"parents": Array [
1967+
2,
1968+
1,
1969+
],
19381970
"timestamp": 21,
19391971
"type": "schedule-state-update",
19401972
"warning": null,
@@ -1983,6 +2015,10 @@ describe('Timeline profiler', () => {
19832015
Object {
19842016
"componentName": "Example",
19852017
"lanes": "0b0000000000000000000000000010000",
2018+
"parents": Array [
2019+
1,
2020+
2,
2021+
],
19862022
"timestamp": 20,
19872023
"type": "schedule-state-update",
19882024
"warning": null,
@@ -2066,6 +2102,10 @@ describe('Timeline profiler', () => {
20662102
Object {
20672103
"componentName": "ErrorBoundary",
20682104
"lanes": "0b0000000000000000000000000000001",
2105+
"parents": Array [
2106+
1,
2107+
2,
2108+
],
20692109
"timestamp": 20,
20702110
"type": "schedule-state-update",
20712111
"warning": null,
@@ -2178,6 +2218,10 @@ describe('Timeline profiler', () => {
21782218
Object {
21792219
"componentName": "ErrorBoundary",
21802220
"lanes": "0b0000000000000000000000000000001",
2221+
"parents": Array [
2222+
1,
2223+
2,
2224+
],
21812225
"timestamp": 30,
21822226
"type": "schedule-state-update",
21832227
"warning": null,

‎packages/react-devtools-shared/src/__tests__/preprocessData-test.js

Lines changed: 102 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -325,90 +325,91 @@ describe('Timeline profiler', () => {
325325
randomSample,
326326
]);
327327
expect(data).toMatchInlineSnapshot(`
328-
Object {
329-
"batchUIDToMeasuresMap": Map {},
330-
"componentMeasures": Array [],
331-
"duration": 0.005,
332-
"flamechart": Array [],
333-
"internalModuleSourceToRanges": Map {},
334-
"laneToLabelMap": Map {
335-
0 => "Sync",
336-
1 => "InputContinuousHydration",
337-
2 => "InputContinuous",
338-
3 => "DefaultHydration",
339-
4 => "Default",
340-
5 => "TransitionHydration",
341-
6 => "Transition",
342-
7 => "Transition",
343-
8 => "Transition",
344-
9 => "Transition",
345-
10 => "Transition",
346-
11 => "Transition",
347-
12 => "Transition",
348-
13 => "Transition",
349-
14 => "Transition",
350-
15 => "Transition",
351-
16 => "Transition",
352-
17 => "Transition",
353-
18 => "Transition",
354-
19 => "Transition",
355-
20 => "Transition",
356-
21 => "Transition",
357-
22 => "Retry",
358-
23 => "Retry",
359-
24 => "Retry",
360-
25 => "Retry",
361-
26 => "Retry",
362-
27 => "SelectiveHydration",
363-
28 => "IdleHydration",
364-
29 => "Idle",
365-
30 => "Offscreen",
366-
},
367-
"laneToReactMeasureMap": Map {
368-
0 => Array [],
369-
1 => Array [],
370-
2 => Array [],
371-
3 => Array [],
372-
4 => Array [],
373-
5 => Array [],
374-
6 => Array [],
375-
7 => Array [],
376-
8 => Array [],
377-
9 => Array [],
378-
10 => Array [],
379-
11 => Array [],
380-
12 => Array [],
381-
13 => Array [],
382-
14 => Array [],
383-
15 => Array [],
384-
16 => Array [],
385-
17 => Array [],
386-
18 => Array [],
387-
19 => Array [],
388-
20 => Array [],
389-
21 => Array [],
390-
22 => Array [],
391-
23 => Array [],
392-
24 => Array [],
393-
25 => Array [],
394-
26 => Array [],
395-
27 => Array [],
396-
28 => Array [],
397-
29 => Array [],
398-
30 => Array [],
399-
},
400-
"nativeEvents": Array [],
401-
"networkMeasures": Array [],
402-
"otherUserTimingMarks": Array [],
403-
"reactVersion": "<filtered-version>",
404-
"schedulingEvents": Array [],
405-
"snapshotHeight": 0,
406-
"snapshots": Array [],
407-
"startTime": 1,
408-
"suspenseEvents": Array [],
409-
"thrownErrors": Array [],
410-
}
411-
`);
328+
Object {
329+
"batchUIDToMeasuresMap": Map {},
330+
"componentDisplayNames": Map {},
331+
"componentMeasures": Array [],
332+
"duration": 0.005,
333+
"flamechart": Array [],
334+
"internalModuleSourceToRanges": Map {},
335+
"laneToLabelMap": Map {
336+
0 => "Sync",
337+
1 => "InputContinuousHydration",
338+
2 => "InputContinuous",
339+
3 => "DefaultHydration",
340+
4 => "Default",
341+
5 => "TransitionHydration",
342+
6 => "Transition",
343+
7 => "Transition",
344+
8 => "Transition",
345+
9 => "Transition",
346+
10 => "Transition",
347+
11 => "Transition",
348+
12 => "Transition",
349+
13 => "Transition",
350+
14 => "Transition",
351+
15 => "Transition",
352+
16 => "Transition",
353+
17 => "Transition",
354+
18 => "Transition",
355+
19 => "Transition",
356+
20 => "Transition",
357+
21 => "Transition",
358+
22 => "Retry",
359+
23 => "Retry",
360+
24 => "Retry",
361+
25 => "Retry",
362+
26 => "Retry",
363+
27 => "SelectiveHydration",
364+
28 => "IdleHydration",
365+
29 => "Idle",
366+
30 => "Offscreen",
367+
},
368+
"laneToReactMeasureMap": Map {
369+
0 => Array [],
370+
1 => Array [],
371+
2 => Array [],
372+
3 => Array [],
373+
4 => Array [],
374+
5 => Array [],
375+
6 => Array [],
376+
7 => Array [],
377+
8 => Array [],
378+
9 => Array [],
379+
10 => Array [],
380+
11 => Array [],
381+
12 => Array [],
382+
13 => Array [],
383+
14 => Array [],
384+
15 => Array [],
385+
16 => Array [],
386+
17 => Array [],
387+
18 => Array [],
388+
19 => Array [],
389+
20 => Array [],
390+
21 => Array [],
391+
22 => Array [],
392+
23 => Array [],
393+
24 => Array [],
394+
25 => Array [],
395+
26 => Array [],
396+
27 => Array [],
397+
28 => Array [],
398+
29 => Array [],
399+
30 => Array [],
400+
},
401+
"nativeEvents": Array [],
402+
"networkMeasures": Array [],
403+
"otherUserTimingMarks": Array [],
404+
"reactVersion": "<filtered-version>",
405+
"schedulingEvents": Array [],
406+
"snapshotHeight": 0,
407+
"snapshots": Array [],
408+
"startTime": 1,
409+
"suspenseEvents": Array [],
410+
"thrownErrors": Array [],
411+
}
412+
`);
412413
});
413414

414415
// @reactVersion >= 18.0
@@ -487,6 +488,7 @@ describe('Timeline profiler', () => {
487488
},
488489
],
489490
},
491+
"componentDisplayNames": Map {},
490492
"componentMeasures": Array [],
491493
"duration": 0.011,
492494
"flamechart": Array [],
@@ -657,6 +659,7 @@ describe('Timeline profiler', () => {
657659
},
658660
],
659661
},
662+
"componentDisplayNames": Map {},
660663
"componentMeasures": Array [],
661664
"duration": 0.016,
662665
"flamechart": Array [],
@@ -905,6 +908,7 @@ describe('Timeline profiler', () => {
905908
},
906909
],
907910
},
911+
"componentDisplayNames": Map {},
908912
"componentMeasures": Array [
909913
Object {
910914
"componentName": "App",
@@ -1116,6 +1120,7 @@ describe('Timeline profiler', () => {
11161120
Object {
11171121
"componentName": "App",
11181122
"lanes": "0b0000000000000000000000000000100",
1123+
"parents": null,
11191124
"timestamp": 0.021,
11201125
"type": "schedule-state-update",
11211126
"warning": null,
@@ -1991,6 +1996,9 @@ describe('Timeline profiler', () => {
19911996
},
19921997
],
19931998
},
1999+
"componentDisplayNames": Map {
2000+
Set {} => "Unknown",
2001+
},
19942002
"componentMeasures": Array [],
19952003
"duration": 20,
19962004
"flamechart": Array [],
@@ -2222,6 +2230,12 @@ describe('Timeline profiler', () => {
22222230
},
22232231
],
22242232
},
2233+
"componentDisplayNames": Map {
2234+
Set {
2235+
2,
2236+
1,
2237+
} => "Unknown",
2238+
},
22252239
"componentMeasures": Array [
22262240
Object {
22272241
"componentName": "App",
@@ -2416,6 +2430,10 @@ describe('Timeline profiler', () => {
24162430
Object {
24172431
"componentName": "App",
24182432
"lanes": "0b0000000000000000000000000010000",
2433+
"parents": Array [
2434+
2,
2435+
1,
2436+
],
24192437
"timestamp": 10,
24202438
"type": "schedule-state-update",
24212439
"warning": null,

0 commit comments

Comments
 (0)