浏览器兼容性测试，跨平台浏览器测试 - Browsershots. Download Details - Microsoft Download Center - IE App Compat VHD. Console API - FirebugWiki. From FirebugWiki Firebug adds a global JavaScript variable named "console" to all web pages loaded in Firefox. This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts. [edit] Commands [edit] console.log(object[, object, ...]) Writes a message to the console. [edit] console.debug(object[, object, ...]) Writes a message to the console, including a hyperlink to the line where it was called. [edit] console.info(object[, object, ...]) Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.
[edit] console.warn(object[, object, ...]) Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called. [edit] console.error(object[, object, ...]) Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called. [edit] console.clear() Javascript development tools - resources. 前端观察 | 专注于网站前端设计与前端开发. 开发文档. 综述 当读完了这个综述和入门之后，就可以开始创建应用（扩展）和WebApp了。
注意：WebApp是通过应用（扩展）的方式实现的，所以除非特别声明，本页所有内容都适用于WebApp。 基本概念 一个应用（扩展）其实是压缩在一起的一组文件，包括HTML，CSS，Javascript脚本，图片文件，还有其它任何需要的文件。 应用（扩展）本质上来说就是web页面，它们可以使用所有的浏览器提供的API，从XMLHttpRequest到JSON到HTML5全都有。 应用（扩展）可以与Web页面交互，或者通过content script或cross-origin XMLHttpRequests与服务器交互。 应用（扩展）的界面 很多应用（不包括WebApp）会以browser action或page action的形式在浏览器界面上展现出来。 这个gmail提醒应用使用了browser action，它在工具栏上增加一个图标 这个新闻阅读应用也使用了browser action，当点击时会弹出一个气泡窗口 这个地图应用使用了page action和content script（注入到页面内执行的脚本） 应用也可以通过其它方式提供界面，比如加入到上下文菜单，提供一个选项页面或者用一个content script改变页面的显示等。
WebApp界面 一个WebApp通常会打包一个包含了主要功能的html页面进来。 更多信息，查看Packaged Apps. 文件 每个应用（扩展）都应该包含下面的文件： 一个manifest文件 一个或多个html文件（除非这个应用是一个皮肤） 可选的一个或多个javascript文件 可选的任何需要的其他文件，例如图片 在开发应用（扩展）时，需要把这些文件都放到同一个目录下。 引用文件 任何需要的文件都可以放到应用（扩展）中，但是怎么使用它们呢？ 如果使用360极速版内置的调试器（开发人员工具），可以看到每一个应用（扩展）中的文件也可以用一个绝对路径来表示：chrome- 在这个URL中， 详细信息，参考 Manifest Files. 基本架构 绝大多数应用（扩展）都包含一个背景页面(background page)，用来执行应用（扩展）的主要功能。 上图显示了安装了两个应用（扩展）的浏览器。 页面 背景页面并不是应用（扩展）中唯一的页面。 Content scripts. 高品质 HTML+CSS 制作服务 – SonicHTML. Smashing Magazine - For Professional Web Designers and Developers. 瀑布流布局浅析 - TaobaoUED. 简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。
这种布局适合于小数据块，每个数据块内容相近且没有侧重。 通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 几种实现方式 随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。 1) 传统多列浮动。 各列固定宽度，并且左浮动；一列中的数据块为一组，列中的每个数据块依次排列即可；更多数据加载时，需要分别插入到不同的列上；线上例子。 优点: 布局简单，应该说没啥特别的难点；不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。 缺点: 列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；滚动加载更多数据时，还要指定插入到第几列中，还是不方便。 2) CSS3 定义。 由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现； 直接 CSS 定义，最方便了；扩展方便，直接往容器里添加内容即可。 只有高级浏览器中才能使用；还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。 3) 绝对定位。 需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。 KISSY.Waterfall 实现思路 KISSY 的 Waterfall 组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置； 二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。
1) 数据块排列，算法步骤简述下: 2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤: KISSY.Waterfall 示例和文档.