双屏显示提升前端开发10%工作效率

双屏不是什么新鲜事，不过相信国内前端工程师还是用单屏的多，前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中？利用双屏显示让你从中解脱出来！我也刚用上了双屏开发，效率提升感觉值能有10%，所以来鼓动下大伙都来用双屏吧。

windows的双屏显示有很多种模式，我用的模式是主屏辅屏模式，两个屏是独立的窗口，可以进行窗口全屏。桌面和任务栏之显示在主屏，可以把主屏的一个或几个窗口拖到辅屏上，并全屏显示。看下图，右边的显示器为主屏，拖了个FX到左边的辅屏在该屏幕中最大化。

screen

数数我们前端开发在工作流程中并行的全屏显示需求有多少个：

1、视觉稿（JPG图/PSD图）

2、编辑器（HTML文件/CSS文件/JS文件）

3、浏览器（FX/IE6/IE7/…）

这些窗口不需要同时都在打开状态。但在我们的工作过程中，总是有两到三个窗口需要同时打开着，并频繁的在两个窗口之间进行切换。

在完成对项目中一张或多张页面的规划后，具体到单张页面的开发，页面可以被分成若干个小模块，开发就一个一个的完成这些小模块，从编写代码到浏览器测试通过。当进入到对小模块的开发阶段，双屏显示就发挥出了它的显示优势。小模块的开发可以分为以下几个阶段：

1、看视觉稿，编写HTML结构。 - 这个阶段，主屏编辑器里编辑HTML文件，辅屏用FX的一个TAB来显示JPG视觉稿。

2、看视觉稿，编写CSS结构。 - 这个阶段，主屏编辑器里编辑CSS文件，辅屏用FX的一个TAB来显示JPG视觉稿，放一把屏幕尺子量取尺寸。（这里会发生少量第三屏的需求，比如需要配合主屏开一个PS,在PSD文件里取色，也会在编辑器里切换到HTML文件上进行结构调整）

3、看FX下的效果，修正HTML和CSS代码。 - 这个阶段，主屏仍然是编辑器，辅屏FX下开启第二个TAB，用于显示HTML页面效果。主屏编辑器显示CSS代码为主，偶尔切换到HTML代码调整。

4、对比视觉稿和FX下的效果，继续修正HTML和CSS代码的像素级细节或者BUG。 - 这个阶段，是个三屏的需求，，我们需要在辅屏的FX下两个TAB，视觉稿和HTML页面来回切换来对比差异，并在编辑器里调整CSS代码，偶尔需要切换到HTML代码进行调整。

5、看IE下的效果，继续修正HTML和CSS的细节和BUG。 - 这个阶段，我一般放在整张页面完成时，而不是单个页面完成时就去做。看大家的习惯了。这里也是多屏的需求，需要在视觉稿、FX、IE6、IE7、代码之间进行切换。

我用的两个17寸普屏，不知道有没有用大宽屏开发的，想像下22寸或者24寸的屏幕，一个当两个来用也是可行的。而市面上流行的几百块钱一个19宽屏似乎当一个用多余，当两个用面积又不够点。