mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Ruslan Lesiutin
e5287287aa
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.
26 lines
455 B
CSS
26 lines
455 B
CSS
.Source {
|
|
padding: 0.25rem;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.SourceHeaderRow {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.SourceHeader {
|
|
flex: 1 1;
|
|
font-family: var(--font-family-sans);
|
|
}
|
|
|
|
.SourceOneLiner {
|
|
font-family: var(--font-family-monospace);
|
|
font-size: var(--font-size-monospace-normal);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 100%;
|
|
margin-left: 1rem;
|
|
}
|