[DevTools] Make function inspection instant

[sebmarkbage]

I noticed that there is a delay due to the inspection being split into one part that gets the attribute and another eval that does the inspection. This is a bit hacky and uses temporary global names that are leaky. The timeout was presumably to ensure that the first step had fully propagated but it's slow. As we've learned, it can be throttled, and it isn't a guarantee either way.

Instead, we can just consolidate these into a single operation that by-passes the bridge and goes straight to the renderer interface from the eval.

I did the same for the viewElementSource helper even though that's not currently in use since #28471 but I think we probably should return to that technique when it's available since it's more reliable than the throw - at least in Chrome. I'm not sure about the status of React Native here. In Firefox, inspecting a function with source maps doesn't seem to work. It doesn't jump to original code.

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2024 2:51am

[hoxyq]

I'm not sure about the status of React Native here

Your changes should not affect React Native, since you are making changes in react-devtools-extensions. For React Native, we are doing the same, viewElementSourceFunction prop is passed where RDT Frontend is initialized: https://github.com/facebookexperimental/rn-chrome-devtools-frontend/blob/7b143e5d05a102c8c9cc7e282bab7b0751f75d61/front_end/panels/react_devtools/ReactDevToolsView.ts#L67-L74

In Firefox, inspecting a function with source maps doesn't seem to work

Thats probably Chromium-only feature - https://developer.chrome.com/docs/devtools/console/utilities#inspect-function and not standardized. We should probably gate this function under __IS_CHROME__ || __IS_EDGE__, so that all features that are using this API are disabled in Firefox.