A few months ago I decided that my Eclipse setup was far from optimal. I was using slightly customized versions of the default Flex Development and Debugging perspectives that ship with Flex Builder. I had customized them to suit my personal preferences (things like making the Variables pane take up the full screen height). But the biggest problem I had was the debugging perspective. When you have all the panes you need open on the same screen (code editor, debug panel for stepping through lines, variables pane for inspecting variables, console for reading log statements, navigator for selecting different files) you end up with a tiny area for actually reading the code in the code editor.

The old single-screen perspective
Here’s a screenshot showing how bad my debugging perspective could become:

I’d usually try to edit code within a maximized code editing window by double clicking the code editor I was working in, then restoring it back to the small size when I was stepping through debugging. And often I’d hide the console view or move it around so I could get more vertical space. But in the end it was always a struggle to have access to all the pieces I needed and still be able to edit code.

The new dual-screen perspective
So I finally decided that having Eclipse within a single monitor just wasn’t going to cut it. For most of my development work, I plug my laptop into an external 22-inch monitor, which gives me a resolution of 1680×1050 on my external monitor and 1440×900 on my laptop monitor. When I was using Eclipse on a single screen I would always put it on the larger screen to maximize space. But now I decided to move all the panels other than the code editor and file navigator to my laptop screen instead (which sits just to the left of my external monitor).

My current setup looks like this (this image is small, but full res images of each screen follow):

My main external monitor screen is the one on the right and is dedicated to viewing and editing code. I’ve stripped everything else out, and even stripped down the default Eclipse toolbar items to only those that I actually use on a daily basis.

Right screen (external monitor):

Left screen (laptop):

Now I always have a code editor that takes up the maximum amount of space I have. I originally tried moving the File Navigator to the left screen as well, but found that a) it was a bit of a pain visually to have to move my eyes to the left and then to the right after selecting a file, and b) it’s the vertical space that counts the most in the code editor, not maximizing all possible horizontal space.

So when I debug I use the debugger and variable inspector on the left screen to step through line by line, while viewing the actual code on the right.

I’ve setup 4 main perspectives that include a Debug and a Development perspective for both a single-screen setup (when I unplug) and a dual-screen setup. I have all those shown at the same time in the perspective switcher toolbar, so I can easily jump back and forth between them. Also shown in this screenshot are the Team Synchronization and SVN Repo Exploring perspectives and single and dual screen versions of the Flex Profiling perspective. These 8 perspectives are pretty much the only ones I ever use, and are always a single click away.

Drawbacks
The most annoying issue I’ve run into has to do with the popped out Debug window and how Eclipse manages window focus. Usually when debugging it works great, I click the step-over or step-into buttons in the Debug panel and it works just like I want. But sometimes (and I can’t figure out why) Eclipse decides that when I step over a line of code (or maybe it’s only when hitting a breakpoint) that the main code window should get the focus, which means that it takes a click on the Debug panel just to bring it back into focus, then a second click to step over the next line. It doesn’t sound like a big deal, but when you’re used to a single click always making the Debugger do the next step, and then that turns into two clicks, it gets really annoying and frustrating.

The only other drawback is that Eclipse isn’t smart enough to know that I have one perspective for my dual monitor setup and one perspective for when I unplug my laptop from the external monitor. So the default behavior when I unplug is to end up with something horrendous like this:

That’s easy enough to fix though, by simply right clicking on the perspective icon the toolbar and selecting “Reset”:

It also took a little getting used to to be able to share my attention between both screens and quickly scan my eyes back and forth. Usually I’m used to keeping my laptop screen for certain tasks (email, chat, RSS reading, etc), so I have a bit of a mental block against using both monitors for the same task. But I’ve gotten pretty used to that by now.

What about you?
I’m curious what other Flex developers do in terms of laying out their IDE. I’d love to see screenshots of what other people have figured out. I haven’t experimented with too many different dual-monitor layouts, the one I’m using now was sort of the first one I made on the fly and have stuck with. But if you have a better system then I’d love to see it!