wms / casium-devtools

Dev Tools for Casium — An application architecture for React

Dev Tools for Casium – An application architecture for React

Installation & Development

• yarn
• yarn build, or yarn watch, to auto-reload on saved changes

Chrome

• Open chrome://extensions

• Make sure [✔] Developer Mode is ✔'d

• Click Load unpacked extension...

• Select the dist directory

• If DevTools is open, close and reopen it

• Open DevTools in separate window, navigate to Casium tab

• ⌘ + Opt + I to initiate DevTools-ception

• With Meta-DevTools window selected, ⌘ + R to reload

• You may need to also reload the inspected page

Firefox

• Open about:debugging

• Make sure [✔] Enable add-on debugging is ✔'d

• Click Load Temporary Add-on

• Select the dist directory

• If the Inspector is open, close and reopen it

• In the entry that appears for 'Casium Developer Tools', click the Debug button

• Accept the remote debugging request

Roadmap

• Control bar
• Clear button
• Make unit test view slide down from the top
• Time travel
• Export
• Diff view
• Toggle next state / prev state / diff view
• Message timestamps, toggle relative / absolute
• Clear on reload / preserve log button
• Replay last / replay selected
• Import / replay log
• Compare runs
• Tab isolation
• Preserve state across reloads
• Do a better job surfacing errors
• Better formatting for object output in generated unit tests
• Resizable panels
• Remote pairing
• Remote control
• Command-line interface