Implement "view React component source"

[markerikson]

The React DevTools UI has support for "view component source". Provide an appropriate callback prop, and the RDT logic will give you the ID of the selected component. From there, you can talk to the RDT "backend" logic, send it a "viewElementSource" message, and it will save a reference to the component as window.$type. We can then evaluate code in the paused browser to retrieve that function reference, and do our usual "map the location and jump to the source" steps.

For function components, it jumps straight to the function. For class components, it jumps to render(). This behavior came straight from the extension:

https://github.com/facebook/react/blob/v18.0.0/packages/react-devtools-extensions/src/main.js#L194-L220

Results:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
devtools	✅ Ready (Inspect)	Visit Preview		Feb 9, 2023 at 4:53PM (UTC)

[qa-wolf]

✅ QA Wolf - Deploy PR

Echo here: 4 tests ran, see details here.

✅ 4 passed

• ✅ User role unable to: access billing, view api keys, delete team, edit team name

• ✅ View and search library

• ✅ View footer links: about

• ✅ Log in and out

[replay-io]

57 replays were recorded for 64b8080.

0 Failed

57 Passed

• cypress-01: Test basic cypress reporter functionality
• breakpoints-01: Test basic breakpoint functionality
• breakpoints-02: Test unhandled divergence while evaluating at a breakpoint
• breakpoints-03: Test stepping forward through breakpoints when rewound before the first one
• breakpoints-05: Test interaction of breakpoints with debugger statements
• breakpoints-06: Test log point in a sourcemapped file
breakpoints-07: rewind and seek using command bar and console messages

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• breakpoints-08: should be temporarily disabled
console_async: support console evaluations in async frames

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• console_dock_node: Should show the correct docking behavior for recordings without video
• console_dock: Should show the correct docking behavior for recordings with video
• console_errors: Test that errors and warnings from various sources are shown in the console
console_eval: support console evaluations

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

console_warp-01: should support warping to console messages

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

console_warp-02: support pausing, warping, stepping and evaluating console messages

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

console-expressions-01: should cache input eager eval and terminal expressions per instance

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• focus_mode-01: should filter messages as regions based on the active focus mode
highlighter: element highlighter works everywhere

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-01: Test that scopes are rerendered

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-02: element picker and iframe behavior

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-03: Test that styles for elements can be viewed

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-04: Test that styles for elements can be viewed

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-05: Test that styles for elements can be viewed

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-06: Test that styles for elements can be viewed

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

inspector-07: Test that styles for elements can be viewed

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

logpoints-01: log-points appear in the correct order and allow time warping

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• logpoints-02: conditional log-points
• logpoints-03: should display event properties in the console
logpoints-04: should display exceptions in the console

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

logpoints-05: should auto-complete based on log point location

expect(received).toContain(expected) // indexOf

Expected value: "arrayGlobal"
Received array: []

• logpoints-06: should be temporarily disabled
logpoints-07: should use the correct scope in auto-complete

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

node_console-01: Basic node console behavior

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

node_console-02: uncaught exceptions should show up

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

node_logpoint-01: Basic node logpoints

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

node_logpoint-02: Node exception logpoints

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

• node_object_preview: Showing console objects in node
node_spawn: Basic subprocess spawning

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

node_stepping-01: Test stepping in async frames and async call stacks

expect(received).toBe(expected) // Object.is equality

Expected: 5
Received: 2

node_worker-01: make sure node workers don't cause crashes

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

object_preview-01: expressions in the console after time warping

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

object_preview-02: should allow objects in scope to be inspected

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

object_preview-03: Test previews when switching between frames and stepping

expect(received).toBeGreaterThan(expected)

Expected: > 0
Received:   0

object_preview-04: Test scope mapping and switching between generated/original sources

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

object_preview-05: Should support logging objects as values

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

react_devtools: Test React DevTools.

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

repaint: repaints the screen screen when stepping over code that modifies the DOM

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

• resizable-panels-01: Left side Toolbar should be collapsible
scopes_rerender: Test that scopes are rerendered

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• sourcemap_stacktrace: Test that stacktraces are sourcemapped
stacking: Element highlighter selects the correct element when they overlap

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

• stepping-01: Test basic step-over/back functionality
stepping-02: Test fixes for some simple stepping bugs

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

stepping-03: Stepping past the beginning or end of a frame should act like a step-out

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

stepping-04: Test stepping in a frame other than the top frame

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

stepping-05: Test stepping in pretty-printed code

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

stepping-06: Test stepping in async frames and async call stacks

expect(received).toBe(expected) // Object.is equality

Expected: "true"
Received: "false"

View test run on Replay ↗︎

[jasonLaster]

💃

[bvaughn]

Awesome! This is great!

Looks like an RDT integration test is failing though. Didn't look at it but we should make sure it's not a regression before landing.

[markerikson]

Yeah, I'll review that one in the morning.

[markerikson]

Test definitely fails for me locally, so I broke something. Investigating...

[markerikson]

Apparently wrapping createReactDevTools() in a useMemo() is bad somehow 🤷‍♂️

[replay-delta]

4 of 370 changed

line-4-search-result-one-no-breakpoints.png

line-4-search-result-one-no-breakpoints.png

line-4-search-result-one-with-breakpoints.png

line-4-search-result-one-with-breakpoints.png