inspectElement() — react Function Reference

Architecture documentation for the inspectElement() function in inspectedElementMutableSource.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ inspectElement() — react Function Reference

Dependency Diagram

graph TD
  6f727179_1a46_a4db_73d3_9db6700c0e30["inspectElement()"]
  44256a95_877f_4e93_61c4_25c0f9f35be5["inspectedElementMutableSource.js"]
  6f727179_1a46_a4db_73d3_9db6700c0e30 -->|defined in| 44256a95_877f_4e93_61c4_25c0f9f35be5
  style 6f727179_1a46_a4db_73d3_9db6700c0e30 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/inspectedElementMutableSource.js lines 54–178

export function inspectElement(
  bridge: FrontendBridge,
  element: Element,
  path: InspectedElementPath | null,
  rendererID: number,
  shouldListenToPauseEvents: boolean = false,
): Promise<InspectElementReturnType> {
  const {id, parentID} = element;

  // This could indicate that the DevTools UI has been closed and reopened.
  // The in-memory cache will be clear but the backend still thinks we have cached data.
  // In this case, we need to tell it to resend the full data.
  const forceFullData = !inspectedElementCache.has(id);
  const isRoot = parentID === 0;
  const promisedElement = isRoot
    ? inspectScreenAPI(
        bridge,
        forceFullData,
        id,
        path,
        shouldListenToPauseEvents,
      )
    : inspectElementAPI(
        bridge,
        forceFullData,
        id,
        path,
        rendererID,
        shouldListenToPauseEvents,
      );

  return promisedElement.then((data: any) => {
    const {type} = data;

    let inspectedElement;
    switch (type) {
      case 'error': {
        const {message, stack, errorType} = ((data: any): InspectElementError);

        // create a different error class for each error type
        // and keep useful information from backend.
        let error;
        if (errorType === 'user') {
          error = new UserError(message);
        } else if (errorType === 'unknown-hook') {
          error = new UnknownHookError(message);
        } else {
          error = new Error(message);
        }
        // The backend's stack (where the error originated) is more meaningful than this stack.
        error.stack = stack || error.stack;

        throw error;
      }

      case 'no-change':
        // This is a no-op for the purposes of our cache.
        inspectedElement = inspectedElementCache.get(id);
        if (inspectedElement != null) {
          return [inspectedElement, type];
        }

        // We should only encounter this case in the event of a bug.
        throw Error(`Cached data for element "${id}" not found`);

      case 'not-found':
        // This is effectively a no-op.
        // If the Element is still in the Store, we can eagerly remove it from the Map.
        inspectedElementCache.del(id);

        throw Error(`Element "${id}" not found`);

      case 'full-data':
        const fullData = ((data: any): InspectElementFullData);

        // New data has come in.
        // We should replace the data in our local mutable copy.
        inspectedElement = convertInspectedElementBackendToFrontend(
          fullData.value,
        );