IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

Koubei UED 2010-01-11 12:17:51 累计浏览 2,229 次
本机暂存

    双屏不是什么新鲜事,不过相信国内前端工程师还是用单屏的多,前端开发需要同时开启的屏幕太多了…你有没有迷失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宽屏似乎当一个用多余,当两个用面积又不够点。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. Emacs安装配置 (累计阅读 8,377)
  2. 有道面试总结 (累计阅读 7,064)
  3. 使用scp在windows和Linux之间互传文件 (累计阅读 5,376)
  4. 为什么国内还有那么多网站使用.NET架构? (累计阅读 5,246)
  5. Git安装使用手记 (累计阅读 5,057)
  6. 如何在Windows下编译或调试MySQL (累计阅读 4,675)
  7. nodejs教程:配置nodejs.exe的windows目录结构 (累计阅读 4,673)
  8. windows命令行查看端口和进程信息,解决端口占用现象 (累计阅读 4,598)
  9. 编程珠玑番外篇之番外篇-N 答 UNIX 痛恨者王垠 (累计阅读 4,491)
  10. memcache的几点注意 (累计阅读 4,325)