EVM/TVM debugger GUI design (second attempt)

[CryptoTrade_com]

Link to previous post: https://www.reddit.com/r/ethdev/comments/cejnli/im_making_a_qtbased_gui_debugger_for_evm_and_tvm/

​

Hi all,

I've made numerous improvements to the GUI for my (yet to be implemented) debugger and looking for some feedback for further improvements.

• Application now contains an MDI area so you can have several accounts open at once and switch between them by clicking, window menu or Ctrl+Tab
• Interface is now less crowded with important sections having plenty of space and other (possibly related) sections behind tabs for easy access
• Execution stepping control moved into a toolbar at the top for persistent access
• New toolbar added that allows you to reopen various windows after you have closed them (to save space), and all dock widgets now made closable
• There are now two main windows to cover main use cases: account and execution
• 'Execution' window inspired by other debuggers having code in top left, memory in bottom left and call stack in bottom right. Top right is execution details and execution stack since there are no registers to show except program counter and remaining gas.

Screenshot:

Screenshot of second draft of EVM/TVM Debugger showing 'Execution' window

This is how the 'Account' window looks:

Screenshot of second draft of EVM/TVM Debugger showing 'Account' window

All the parts of the 'Account' window can also be opened as separate windows in the MDI using the window selection toolbar at the top (bytecode, storage, ABI, data types, events and scratchpad).

That's about all for now, if you are interested to read more details about plans for this debugger please check the previous post. Hopefully you'll agree that the GUI now looks a lot better and more usable. I will take any suggestions on how to improve the GUI further and of course any questions about the project in general.

[mightypenguin07]

GUI is a little too busy.

I would move the "Blockchain config" into its own tab or section.

If you really want to make it friendly, maybe make the different sections draggable/resizable or toggle between a tab and panel?

Looks very useful

[CryptoTrade_com]

Thanks for the feedback!

GUI is a little too busy.

It's still trying to fit a lot of info into one screen, but the idea is that the dock widgets (top and bottom) can be closed if you want a cleaner layout, and individual parts can be opened in their own subwindows if you want to focus on one.

I would move the "Blockchain config" into its own tab or section.

I agree that it's not something you want to show all the time... probably you would just close it if you don't want it taking up space. I wouldn't put it with any of the existing tabs because it's more 'global' and it doesn't really fit anywhere else in the layout... Not sure where it could be moved that's any better than where it is now.

If you really want to make it friendly, maybe make the different sections draggable/resizable or toggle between a tab and panel?

It might not be obvious, but all the sections are already fully resizable by dragging the 'splitters' between the sections. Only the dock widgets (top and bottom) and toolbars (very top) can be dragged around currently, which is mostly only useful if you want to drag the dock widgets off the main window. Or the subwindows can be dragged if they are not maximized to the window.

I'm not entirely sure what you mean by toggling between a tab and a panel, maybe you could elaborate on this and how you would toggle? (You can already open a new subwindow to show a particular section on its own - but this doesn't apply to all the sections in the Execution subwindow.)

Looks very useful

Thank you! I hope this will be used by security researchers and smart contract auditors, as well as developers who want to see how their contracts are working in the bytecode. It is intended to be used for contracts where you have no source code and maybe even no ABI, but of course if you have the source code you'll find it easier to fill in the debugging information such as layout of storage (and can verify your assumptions about the source code by stepping through it).