- 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
- React element updates
- Backend sees update and fires event
- Agent sees event, and sends it to the front end(inspector) using the bridge
- Can use "plain" shell to inspect the extension's front end itself (since the front end is a React application)
- Right click >> Select in Elements Pane
- Right click >> Execute function
- Search by component name
- Editing of state and props for a component
- Adds selected el as $r in JS context (similar to $0 in Chrome)
- Any element selected in the Elements panel will be selected in the React panel
- What is the necessity for the hydrate/dehydrate process on either side of the bridge