Chrome 开发工具 Workspace 使用

前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次,效率就低了不少。而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中。 方法也挺简单,下面以调试一个 CSS 文件为例:
Continue reading

响应式图片属性 srcset

srcset 属性是由 W3C 旗下的响应式图片社区提出的,目的是为不同分辨率的用户提供适合的图片大小的解决方案。之前只有 Safari 支持该属性,而现在刚刚发布的 Chrome 34 也开始支持。

srcset 设置起来很简单:

<h1><img alt="The Breakfast Combo"
    src="banner.jpeg"
    srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w">
</h1>

Continue reading

Chrome 开发工具 Javascript 调试技巧

一、Sources 面板介绍:

Sources 面板分为左中右 3 部分
左:Sources 当前页面加载的资源列表,Content scripts 是在 Web 页面内运行的 js 脚本资源列表,同常是开发调试插件时使用。
中:代码面板,这里展示选中的脚本代码。
右:执行控制面板,可以在这里查看、控制断点以及一些运行的详细信息。
Continue reading

Hybrid 应用开发选型

Hybrid App 是 Native App 和 Web App 混合开发的产物,它的原理是将 Web 页面嵌入到 Natvie App 的 WebView 中。因此它综合了 Native 和 Web 两种模式应用的优势,具有开发速度快,交互体验好,跨平台等优点。但它也有自己的软肋,就是性能受到系统浏览器内核的影响,因为 WebView 中的界面渲染及交互都是 Web 来实现,而 Web 渲染性能依赖系统内置浏览器,所以该技术的使用必须要有合适的场景。目前混合应用实现方案包括两种:
Continue reading