v6.0.0-beta.16

New

• Plugin Settings (docs)
• Plugins can now add timeline events before the devtools are opened and loaded
• Support api.on.visitComponentTree for Vue 2 (#1524)
• timeline: allow disable component events, closes #1545
• timeline: hide button on layer item
• timeline: event tooltip
• timeline: addTimelineEvent warns if layer not found
• timeline: markers support (internal for now)
• timeline: Vue Devtools connected marker
• components: inspector more resilient to rendering errors (circular arrays, etc.)
• vue 2: vuex deep copy state for each mutation + add early mutations
• some icon changes

Fixed

• from.options can be undefined, closes #1491
• window is undefined cause an error (#1284)
• wait for app record in plugin
• vue 2: async tree traversal
• vue 2: skip individual component tree updates
• vue 2: debounce flush
• vue 3: 'effect.raw' has been unavailable (#1542)
• components: setup state: now computed source
• components: wrong id for root instances, closes #1500
• components: change suspense tag to 's' + tooltip, related to #1529
• components: display component loading when switching app
• components: don't request instance if pending
• components: flatten not working, crashing search
• components: order follows dom order, closes #1503
• electron: build using NODE_ENV=production + silence bridge logs in production, closes #1151
• define vue build flags
• add str.replace checks, closes #1531
• timeline: hoverEvent.container can be null when destroyed
• timeline: couldn't inspect first event
• timeline: chrome screenshots issues
• timeline: round event positions
• timeline: no loading animation for first event
• looping shared-date init
• AppRecord.id => string + stabilize app ids between page refresh

v6.0.0-beta.15

I'm waiting for a few external validations to be completed before releasing v6 in the stable channel. So in the meantime, I published it in the beta channel.

New

• components: force refresh button
• components: separate setup state and other setup variables
• components: support displayName, closes #1494
• timeline: queue events until layer is available
• timeline: display 1ms grid near max zoom
• plugins: no devtools plugin found
• api: on.timelineCleared

Fixed

• silence iframe errors, closes #1483
• catch getAppRecord error, closes #1480
• use normal 'f' for functions
• reuse context, don't crash on devtools close/open
• components: send 0 depth tree update on component updated
• components: use correct app record in hooks
• components: remove force refresh disabled state
• components: don't use instance.name to filter, closes #1470
• components: scrollIntoView might not be available
• components: mergeOptions from not defined, closes #1491
• api: notifyComponentUpdate(instance)
• perf: skip updates for non current apps

v6.0.0-beta.14

New

• Implemented iframe support for Vue2 too

Fixed

• Component highlighter should have a correct position now, taking the iframe position into account

v6.0.0-beta.13

New

• iframe support, closes #353
• components: loading indicator
• components: multiple console bindings, closes #1416
• highlighter: auto update position/size (30fps)
• api: add type to edit custom inspector state
• timeline: new colors and selected styles
• timeline: compute group overlap based on visible positions
• timeline: event list keyboard nav
• timeline: zoom buttons
• timeline: scroll move buttons

Fixed

• scroll to top on inspector selection change
• timeline: mouse selection when scrolled down
• async getAppRecord, closes #1459
• better root instance, closes #1376
• check for root instance, fixes #1464

v6.0.0-beta.12

New

• vue2: devtools.hide option support, closes #1444
• backend: on page config with support for VUE_DEVTOOLS_CONFIG.openInEditorHost, closes #1440
• highlighter: new style + size display
• highlighter: improved label position and overflow handling
• components: scroll into component button
• components: improved name settings
• components: keyboard navigation, closes #1430
• components: basic render code view, closes #535
• components: log HTMLELement to console
• inspector: 'Go home' button on the inspector not found page
• inspector: improved HTMLElement display + attributes
• header: link to docs
• header: improved 'more' menu with new style and icons
• reorganized settings
• custom inspector: keybord navigation
• api: custom state actions
• api: custom inspector actions
• api: selectInspectorNode

Fixed

• inspector: tree horitonal scroll, related to #1126
• inspector: display tooltip on abstract field key
• instanceMap of null, fixes #1446
• highlighter: prevent label overflow, fixes #1361
• components: guess vue3 anonymous components name, fixes #1311
• components: better tag colors
• components: state keys order
• vue2: vuex getters state grouped by module, fixes #1413
• plugin: dark bg
• header: more menu overflow on small viewport height
• remove app on unmount, fixes #1455
• vue3: computed/inject from mixins/extends (vue-next#3566)

v6.0.0-beta.11

New

• Performance monitoring
  • Component tree tag
  • Performance Timeline layer with flamechart
  • Option to disable it in the Global Settings
• Inspector: display error stack trace
• 'log error to console' button
• timeline: group info in inspector
• timeline: vertical mouse wheel scroll on canvas
• inspector api: tree node tag tooltip support
• timeline api: new timeline layer options

Fixed

• components: only attempt standard edit if type is data, props, setup or computed
• components: wrong app context in some hooks
• vue2: handling un-namespaced vuex module (#1442)
• vue2: handle error in getters
• vue2: improved error handling in computed
• vue3: handle errors in component fields
• vue3: component instance serialization
• timeline: colors if hexa starts with 0x00
• timeline: update layers positions issues
• timeline: event not found
• timeline: early events should not be cleared
• timeline: overlapping groups
• timeline: overhauled group collision checks
• timeline: infinite loop if no groups on layer
• timeline: improve scrollbar when small
• timeline: layers resetting too much causing glitches
• timeline: leak when clearing events
• timeline: error on event without PIXI container yet
• timeline: batch event position updates in microtask
• timeline: overhauled event mouse selection
• timeline: camera not updating on mounted
• timeline: leak on unmount

v6.0.0-beta.10

The devtools frontend is now almost entirely migrated to Typescript 🔥

New

• header: new Inspector/Timeline switch ('Plugins' moved to the 'more' menu on the right)
• timeline: selectable layers
• api: scope plugin hooks to associated app by default (disable with disableAppScope in plugin setup)
• api: add app to payload to hooks
• api: edit custom component fields

Fixed

• improved dark theme border colors
• other small fixes (thanks Typescript!)

Maintenance

• Migrated the frontend to Typescript
• Upgraded to ESLint 7

v6.0.0-beta.9

Fixed

• remove warnings in production, closes #1415
• EmptyPane: align text center
• components tree flashing
• component: edit comp with no setup, closes #1427
• switch to for...of, closes #1422
• autoscroll only when selected changes, closes #1429
• don't use localStorage, closes #1424
• check if event has bounds, closes #1398
• components: sort by position
• electron: no scrollbars, closes #1336

Improved

• timeline: disable screenshots if not supported
• components: support multi prop type, closes #1414

v6.0.0-beta.8

New

• Plugin permissions
• Vue 2 support (with vue-router and vuex)
• implements copy path method (#1378)
• api: add utilities API (#1379)
• api: custom inspector noSelectionText option
• custom inspector: filter state
• devtools: { hide: true } component option

Improved

• UX refinements
• Selected component auto expand parents (even between page refreshes)
• Vue3: edit computed with setters
• improved inspector autoscroll
• inspector: auto expand with 12 subfields from 6

Fixed

• api: editable should be optional
• api: missing app in inspectTimelineEvent hook payload
• api: omit type prop for CustomInspectorState
• components: scroll into selected node
• components: unhighlight when switching tab
• components: filter for updates
• components: nested data edit
• green colors reworked
• plugins: dark background
• plugins: colors & rounded consistency
• timeline: error when no appRecord found (#1345)
• timeline: select dropdown max width
• timeline: move plugin icon next after the label
• custom inspector: tag height
• custom inspector: losing selection on filter tree
• custom inspector: save/restore selected node
• vue3: utils backend injections error
• vue3: improved keep-alive support

Contributing

• Migrated to tailwind JIT
• Migrated to Webpack 5

v6.0.0-beta.7

Fixed

• timeline: screenshots on Firefox
• api: notifyComponentUpdate arg is optional

New

• api: new visitComponentTree hook called for each node in the tree
• api: plugin custom logo