web开发生命周期中的各种工具:
- Development Environments(Code, Compile, Build & Reload):
- Sublime Text 2
- CodeKit
- Development Tools:
- Authoring Abstractions
- Frameworks & Libraries:
- 框架:Boiler Plates,jQuery Mobile,Bootstrap
- 类库:FT Fast Click,JSConsole,HammerJS,Lawn Chair,Font Awesome(icon font)
- 其他的建议:
- 不要用图片替换(Using image replacement is generally frowned upon)
- 尽量使用矢量图或CSS样式(Use vector images or CSS styles wherever possible)
- 图片压缩优于扩大(Heavily compressed 2x images often look better than enlarged 1x images)
- 手指不同于鼠标指针(Fingers != mouse pointer)
- 避免表格、相对和绝对定位、流(Avoid: tables, relative positioning, absolute positioning, floats)
- 头部和尾部用fixed定位(Headers and Footers? Use position: fixed;)
- 元素内部用滚动条(Scroll inside elements? Use overflow: scroll;)
- 启动惯性滚动条(Inertial scrolling? Use -webkit-overflow-scrolling: touch; (iOS 5+))
- 高分辨率处理方法
- Testing & Iteration Flow:
- 模拟测试:
- 网络连接调节器(Network Link Conditioner):
- Charles Proxy [Mac, PC, Linux]
- Network Link Conditioner [Mac]
- Chrome开发者工具
- 仿真器:
- 网络连接调节器(Network Link Conditioner):
- 真实测试:
- Chrome远程调试器
- Safari远程调试器
- Firefox远程调试器
- 世界各地的开放设备实验室(Open Device Lab)
- 模拟测试:
- Performance Tuning
- Build Optimization
- Deployment hi
第四篇文章:Secrets of the Chrome DevTools, Patrick Dubroy (Video)
这是一个视频文件,演讲者是来自Google的工程师,从事Chrome开发者工具的开发工作。他非常详尽周到地介绍了该工具的使用方法。
打开chrome开发者工具(简称为dev tools)的快捷键:ctrl+shift+I。
Elements标签是我们在开发中经常会用到的一个标签。在这个标签之下提供了很多功能。如上图所示,我们可以编辑HTML代码,鼠标三击待编辑的位置即可。使用下面的放大镜图标,然后在网页上可以选中任何元素,下面会相应显示对应的代码和样式等。
可以通过鼠标右键菜单选择要进行的操作。这些操作也可以用ctrl+Z来撤销。
右侧的是style样式列表。这些样式也是可以编辑的。
也可以查看盒模型。
Sources标签也是非常常用的标签。我们可以在这个标签下查看实际的代码源文件,对其中的css和js文件等进行修改和保存。也可以右键选择Local motifications来对应查看本地源文件的修改情况。
在Sources标签下的右侧列表可以进行debug。
在左侧对应位置的所在行号上单击,会出现如图所示的12行的蓝色箭头。右侧就会显示该断点。这样就可以对js文件进行调试。有时js文件里面的代码格式比较乱,可以点击左侧下方的大括号图标“{}”(pretty print),然后js代码就可以自动地用很漂亮规范的格式予以显示。
js的执行结果会显示在Console标签中。这里就是控制台,既可以输入命令,也可以显示执行结果。js执行有错误时也会出现提示信息。关于Console标签里面更多命令如$、$$、trace()等用法,可以查看Firebug Console API,里面的用法和Chrome中的很类似。
上面的内容和其他的很多工具其实大同小异,都可以举一反三、类比推理着进行学习。下面的内容是演讲者重磅推荐的部分,关于如何使用dev tools来提高web的性能。
首先介绍的是Timeline标签。
该标签默认是不开启的,所以我们看到上面的截图中是空白的。我们需要点击下方的第五个按钮来启动它,启动后的效果如下图。
Timeline又分为两部分。上面的部分相当于概况(Summary),是对整个网页运行情况的总结。我们可以通过选中某一部分来在下面看到具体的内容,如图所示。
Timeline标签中的Events其实并不是主要用来观察性能,而是帮助我们了解web中各个部分是如何部署的。Timeline标签中的Frames可以帮助我们分析哪些部分造成了web性能的降低。有时,下方的列表中会出现黄色三角警示符号,把鼠标移动到上面的时候会出现提示信息。Timeline标签中的Memory可以帮助我们分析web页面对内存的影响,同时也可以观察垃圾回收的工作。JavaScript中的内存泄露(leak)问题不像C那么容易出现,但仍然会发生,因此也值得重视。而Memory标签也可以帮助分析这一问题。
下面要介绍的是Profiles标签。
这一部分比较难理解,但是只要仔细分析,能够从中获取很多非常有价值的信息。
另外还有两个标签Resources和Network。这两个标签都比较容易理解。Resources中可以看到web网站所用到的各种资源,从图片到cookie等等,一应俱全。
而Network则可以帮助分析降低页面加载速度的原因。
到此,对Chrome开发者工具的介绍就结束了。最后演讲者介绍了Chrome发布版本的四种途径:Canary、Dev 25、Beta 24、Stable 23,并且推荐web开发人员在开发的时候优先选择针对Canary和Stable(稳定版)两种版本进行开发。
我在使用Chrome开发者工具的时候,一直苦于没有一篇文章或者书籍详细地介绍它的使用方法。因此看到这篇文章的时候非常高兴。更高兴的是,视频最后又推荐了一些资源,可以帮助我们更好地了解这一工具:
- Chrome Dev Tools Documentation
- Google IO 2012:Chrome Dev Tools Evolution
- Chrome Dev Tools Can Do THAT!?
一个链接:Improving Web App Performance With the Chrome DevTools Timeline and Profiles
原链接 【http://my.oschina.net/warmcafe/blog?disp=2&p=2&catalog=219302】