Rax Developer Tools lets you inspect the Rax component's structure, props and state.
Go to Chrome extension store to install this extension.
The official extensions represent the current stable release.
- Install the Chrome Rax Developer Tools extension
- Import the "rax/lib/devtools" module in your app
import 'rax/lib/devtools';- Set
process.env.NODE_ENVto 'development' - Reload and go to the 'Rax' tab in the browser's development tools
- Arrow keys or hjkl for navigation
- Right click a component to show in elements pane, scroll into view, show source, etc.
- Differently-colored collapser means the component has state/context
- Right-click to store as global variable
- Updates are highlighted
- Use the search bar to find components by name
If you inspect a Rax element on the page using the regular Elements tab, then switch over to the Rax tab, that element will be automatically selected in the Rax tree.
You can right-click any Rax element in the Rax tab, and choose "Find the DOM node". This will bring you to the corresponding DOM node in the Elements tab.