I prefer docking DevTools to the bottom or the side, because then the DevTools stay with the tab I am looking at. For example, if I have DevTools open for multiple tabs, it will only show DevTools for the current tab. I sometimes get confused which DevTools window goes to which tab.
I often find that I want a lot of room for DevTools and the web page. In these cases I use DevTools in a separate window.
When I dock DevTools to the side, I like to make it about half the size of my browser. I usually have my browser maximized on a 1920 x 1080 monitor.
I’ll add screenshots of DevTools to the side and the bottom
It probably is small enough. It just looks ugly when it is as small as it can be because the content in the side panel is squished and cluttered.
If I could resize it smaller, that would be cool. If I could minimize, it would be even better.
When I am debugging CSS, I use the side panel all the time. When I am debugging JS, I want the side panel to get out of the way. I select an element in the inspector, then do s = angular.element($0).scope() in the split panel console. Sometimes I keep the inspector open to select a different element or if I need the console to be bigger I just switch to the console tab.