new "devtools" add-on

[sc0ttj]

New "devtools" add-on

• NOTE: includes fixes for logging state history

Added a new devtools add-on for debugging your components.

It's a bit like React devtools but simpler:

• Main Toolbar:
  • Choose component: click "Select component" button, then choose a component on the page
  • Choose layout: can switch between bottom (horizontal) view, and side (vertical) view
• Overview tab:check a components current state and HTML
• Details tab: view other info about the selected component
• History tab: cycle through a components state history
• Editor tab: edit a components view and styling

Contains modified versions of:

• Olical/EventEmitter
• luyuan/json-tree-view
• jakiestfu/Behave.js

There's a screenshot of the devtools at the end of this post.

Screenshots

Here's the devtools add-on, showing the "vertical" or "side view:

Here is the devtools (bottom), showing details of the "table2" component (top):