I found a place to park the new Debug Window so it isn't in the way

This really only works if you have an ultrawide monitor.

When you maximize the browser width, you end up with blank space to the left and right of the canvas. Well, what if you could slide the canvas to the left and put all of the whitespace to the right? Then you have a place to park the debug window.

You need to add some CSS to your page:

.EditorPageLayout__widthConstrained {
    margin: 0px 0px 0px 0px;
}

This is a hack and could break whenever the class name changes.

4 Likes

That is a pretty good hack!

Honestly I feel like the debug window should be able to pop out into it's own separate window just like chrome debug tools.

3 Likes

:wave: Hi folks, Retool designer here. Thank you for the feedback! We are definitely considering either 1) allowing users to pop out the debug modal in a new window or 2) making the debug modal a fixed positioned panel somewhere in the editor that doesn't obscure the UI.

For now it may also make sense to position this modal on top of the left hand side panel. Since the State tab in the debug modal has exactly the same content as the State tab in the left hand side panel. The new State tab also has additional dependency information and added search functionality.

1 Like

Oh, that's good! I have been finding myself migrating to using the Debug Window's State tab more often than the left panel version anyway, partly because of the additional dependency data and partly I like the two column layout better than the tree layout in most situations.

1 Like