Vue-devtools: Potential Features to Implement

[yyx990803]

This is a meta issue trying to keep track of some features that are good to have (and open to contribution!).

Improvements

These are relatively isolated improvements that can be done separately in individual PRs.

• [x] Editable data fields in state inspector (related: #74 PR #484)
• [ ] Improve Vuex state inspector
  
  
  
  • [ ] Organize information based on modules? (related: #327)
  
  
  • [x] Move mutation to top, or split state/mutation/getters into tabs? (related: #301 PR #477)
  
  
• [x] Easier ways to inspect a component:
  
  
  
  • [x] Right click context menu (related: #242 PR #479)
  
  
  • [x] From code: this.$inspect()? (PR #479)
  
  
  • [ ] ~Auto inspect the component based on inspected DOM node in the Elements panel (PR #469)~
  
  
  • [x] Select component in page (picker-style) (PR #476)
  
  
• [x] Show component file location (and open it in editor on click? this might need build config support) (PR #483)
• [ ] Allow inspecting component render function code
• [ ] Show component extends hierarchy, could also include mixins applied? (related: #337)
• [x] Support ES6 native data structures Map, Set, WeakMap in data inspector (#349)
• [ ] iFrame support (related: #353)

New Panels

These are relatively bigger features that would require discussion, planning and dedicated time frames to implement.

• [ ] Route panel (related: #272)
• [ ] Perf panel that profiles component render/patch, computed properties, vuex getters etc...

[daekano]

Editable data fields in state inspector (related: #74)

I'm extremely interested in this. It would make our QA's life a whole lot easier. I see there's a fork but it looks abandoned. I'm going to analyze the work that was done and give it a shot.

[Alex-Sokolov]

Add possibility to copy component name to clipboard

[Akryum]

Created separate issues from this one.