6.0.0-beta.12
Many improvements and bug fixing in this new release. BTW, I just became a dad 👶
Update on Firefox
Components
New highlighter
The component highlighter in the page got a brand new design and now displays the component size:
The label is now positioned on top of the component so you can view it unobstructed, and it will also stick to the screen edges in case the component isn't entirely visible.
Scroll to component
You can now use this new button to scroll in the page to the selected component:
Keyboard navigation
It's back! Use the Up and Down arrow keys to select the components. The Right key can expand a component's children and the Left key close the children. Also works in custom inspectors!
Render code
Use this new button to display the render function code of the selected component:
HTML elements
In the inspector, HTML elements display was improved with the attributes:
You can now also send the element to the console to interact with it:
Reworked More menu
The 'more' menu got some love for this patch with some settings being reorganized and with new icons:
API Changes
Custom state actions
When sending Custom state you can add buttons next to the field to trigger some actions.
{
_custom: {
// ...
actions: [
{
icon: 'input',
tooltip: 'Log to console',
action: () => console.log('current time:', time)
}
]
}
}
Actually, this is how the 'Log element info console' feature is implemented:
Custom inspector actions
You can now add custom buttons to the custom inspectors too!
api.addInspector({
// ...
actions: [
{
icon: 'star',
tooltip: 'Test custom action',
action: () => console.log('Meow! 🐱')
}
]
})
selectInspectorNode
It's now possible to programmatically select a node in a custom inspector with this new method (docs):
api.selectInspectorNode('test-inspector', 'some-node-id')
Read the full changelog here
