New

v6.0.0-beta.10

This release includes many user experience improvements and a ton of source-code refactoring, including the migration of the frontend to Typescript.

Update on Firefox

New header user experience

The header at the top of the devtools was reworked for easier usage: the second menu was replaced with a Inspector/Timeline switch for quicker access!

The 'Plugins' and 'Settings' items were moved to the "more" menu on the right (with the 3 vertical dots).

Selectable Timeline Layers

The Timeline experience got improved too! You can now select layer directly:

By default it will automatically switch to the 'All' tab and select the most recent event on the layer:

It will remember the last inspected event on each layer, so you can switch between layers easily. Clicking on an already selected layer will select the most recent event instead for quick access! (Double clicking works too!)

API changes

Hooks app scoping

By default, hooks are now scoped to the application associated to the devtools plugin. This means you no longer need to check the current application in the hooks.

Before:

api.on.getInspectorTree(payload => {
  if (payload.app === app && payload.inspectorId === 'test-inspector') {
    // ...
  }
})

After:

api.on.getInspectorTree(payload => {
  if (payload.inspectorId === 'test-inspector') {
    // ...
  }
})

All the documented hooks are now automatically scoped to the application as well, including on.inspectComponent and on.visitComponentTree. 🎉

To disable this automatic scoping, put disableAppScope to false in the setupDevtoolsPlugin call.

setupDevtoolsPlugin({
  // ...
  disableAppScope: true
}, api => {
  // ...
})

Editable component custom fields

You can now handle the edition of custom component fields with the on.editComponentState hook:

api.on.editComponentState(payload => {
  if (payload.type === stateType) {
    payload.set(myState)
  }
})

Read full changelog