dillon1000/react

Commit

feat[devtools]: symbolicate source for inspected element (#28471)

Stacked on https://github.com/facebook/react/pull/28351, please review
only the last commit.

Top-level description of the approach:
1. Once user selects an element from the tree, frontend asks backend to
return the inspected element, this is where we simulate an error
happening in `render` function of the component and then we parse the
error stack. As an improvement, we should probably migrate from custom
implementation of error stack parser to `error-stack-parser` from npm.
2. When frontend receives the inspected element and this object is being
propagated, we create a Promise for symbolicated source, which is then
passed down to all components, which are using `source`.
3. These components use `use` hook for this promise and are wrapped in
Suspense.

Caching:
1. For browser extension, we cache Promises based on requested resource
+ key + column, also added use of
`chrome.devtools.inspectedWindow.getResource` API.
2. For standalone case (RN), we cache based on requested resource url,
we cache the content of it.
Browse files
Changed paths24 files
First-parent comparison
M .eslintrc.js ModifiedM packages/react-debug-tools/package.json ModifiedM packages/react-devtools-core/src/standalone.js ModifiedM packages/react-devtools-extensions/src/main/fetchFileWithCaching.js ModifiedM packages/react-devtools-extensions/src/main/index.js ModifiedM packages/react-devtools-extensions/webpack.config.js ModifiedM packages/react-devtools-shared/package.json ModifiedM packages/react-devtools-shared/src/backendAPI.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js ModifiedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.css AddedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSourcePanel.js AddedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.css ModifiedM packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js ModifiedA packages/react-devtools-shared/src/devtools/views/Components/InspectedElementViewSourceButton.js AddedA packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js AddedA packages/react-devtools-shared/src/devtools/views/Components/Skeleton.css AddedA packages/react-devtools-shared/src/devtools/views/Components/Skeleton.js AddedD packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js DeletedM packages/react-devtools-shared/src/devtools/views/DevTools.js ModifiedM packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js ModifiedA packages/react-devtools-shared/src/symbolicateSource.js AddedM packages/react-devtools-shared/src/utils.js ModifiedM yarn.lock Modified
Patch

Files changed

Rendering syntax-highlighted changes…