Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A high-level overview of React DevTools new cross-browser extension

React DevTools Research


  • Shell - A view layer for the inspector
    • Shells included: Chrome, Firefox, and plain (iframe)
  • Front End - A react application that mimics the typical DevTools element panel (node tree)
    • Is always displayed inside a shell
    • Receives data from bridge
    • Fires the following events
      • setState
      • setProps
      • setContext
      • makeGlobal
      • highlight
      • hideHighlight
      • startInspecting
      • stopInspecting
  • Backend - Instruments the React application being inspected to fire events when anything useful happens
    • Runs in same JS context as page
    • Responsible for hooking React application
    • Fires the following events
      • root (new root)
      • mount (some component mounted)
      • unmount (some component unmounted)
      • update (some component updated)
  • Agent - Responsible for receiving app info through events from backend, and sending to front end
    • Runs in same JS context as page
    • Uses bridge when communicating with front end
    • Gives each React element an ID, and maintains a mapping of id >> element (haven't determined what the mapping is used for yet)
    • Handles messages from front end
    • Fires the following events
      • selected
      • hideHighlight
      • startInspecting
      • stopInspecting
      • shutdown
      • highlight
      • setSelection
      • root
      • mount
      • update
      • unmount
  • Bridge - Responsible for serializing requests between the agent(page) and the front end(devtools)
  • Wall - Sits on either side of the bridge and interprets received data

Component updated flow

  • React element updates
  • Backend sees update and fires event
  • Agent sees event, and sends it to the front end(inspector) using the bridge

Cool Features

  1. Can use "plain" shell to inspect the extension's front end itself (since the front end is a React application)
  2. Right click >> Select in Elements Pane
  3. Right click >> Execute function
  4. Search by component name
  5. Editing of state and props for a component
  6. Adds selected el as $r in JS context (similar to $0 in Chrome)
  7. Any element selected in the Elements panel will be selected in the React panel

Open Questions

  1. What is the necessity for the hydrate/dehydrate process on either side of the bridge
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment