既是安安

Web设计精确点滴

zenwink@gmail.com (季氏安安) — Wed, 15 Feb 2012 14:39:28 +0800

1)调整后的毛边
当对一个位图的大小进行调整后，正常情况下会留下1px的毛边（如果你注意的话），边界会变得模糊，如果继续调整模糊度会加大，这个问题太不起眼了，以至于你无法用肉眼来理绘，我们先用商品图片举例子：

也许单张小图还不够显注，下面对比一个列表图和大图，当然了除非你故意想要这种效果。

放大2倍后对比

另外不要试者调整带有边框的图片，最好是自己绘制，这个面两张对比图不用放大就能全面看到问题:

2)关于边框和背景
有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞，图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果，下面用几个例子来说一下：

文字边框背景：

因为区块加了边框后背景与边框之外的背景颜色相同，所以感觉空洞，所以最好是区块加上背景，而且背景色与边框最好是同一个基色。

白色背景下，背景不要比边框太深，再努力的调整区块内容的颜色能与背景融合也于事无补，边框成了毛边。

在深色背景下，才使用加亮边框。

关于图片边框，图片本身就有背景，而且色彩是多样的，在给图片加边框时也最好是与图片背景同一个基色的背景，而且最好是取与图片最边上的色彩的深基色，如果是边上有多种颜色，取最多的那颜色，例：

如果边框是用CSS定义的，而且是图列，比喻说是产品列表，而列表中的产品类别和背景色都不一致，就会出现边框与背景同色或不协调的情况，例如：

上图中间一排图片边框的色彩就不协调了，如果在图片是不确定的情况下，加边框时最好是给图片与边框之间加上边框距。

在看看在深色背景下的效果，深色背景下可以有两种方案，一是去掉外框，以白色间距边框，二是加亮外框，留出与背景相同颜色的间距。如下图：

3)关于边距与对齐
设计师寻找灵感时，偶尔会随意、自由的拖拉摆放区块、填色、绘制等，直到满意才会停下，在这个过程中会出现有与“经验”挂钩的细小漏洞，例如：

下图表面看上去没问题,细看之下有点小别扭,放大后就可以看清楚了,导航文字偏高,搜索框与导航没有对齐,搜索框中Button图标距离也有问题。

调整之后如下图：

在看下面的例子：

上图中区块上下间距与左右间距不匀称，和前几的列子一样，文字与区块上下垂直间距不协调，下图是修正后的结果。

在来看一组给图片加框的效果：

在来看图列间距：
下面这个列图看似没问题，其实有两个细节问题（其中一个应该算是用户体验的问题）。首先第一列与第二列的间距要比第二列与第三列的距离要小2px，对于这个问题，有人会说这个间距用CSS定义就统一了，不会存在差异！注意了，我们讨论的是视觉设计，不能把这个问题丢给前端，否则你后面丢过去的更多（相信我），其次纵间距太小排的过于紧密。

调整过后如下图:

4)关于阴影与质感：
在设计点缀版面时需要有深度和3D质感的时候，可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同，太强、太硬的质感只会让页面显得粗糙，web页面是个很细致的活，还是那句话，这里只说细节，先看图：

阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题，和前面讲的边框一样，如果图片是的投影颜色与图片颜色（或背景颜色）相同，效果会很尴尬，所以要边框一样给图片加一个间隔距离：

理论上讲，将一个没有质感的元素进行投影或加阴影是不现实的！前面讲的一些阴影效果，元素本身没有任何质感。看下面的例子：

上图Button和价格区块的投影没有质量,修改后如下图:

其实阴影和质感是随网站整体风格相关联的,某种情况下还不如不加上去。

关于深色背景下的质感，阴影和投影是不现实的，所以只能用发光或光线质感来实现。

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/web_design_precise_drip.html

继续阅读《Web设计精确点滴》的全文内容...

分类: 既是视觉 | Tags: 视觉设计精确细节质感 | 添加评论(0)

UI设计你需要自问的几个问题 (2010-11-14 15:5:18)
颜色运用概述 (2010-11-9 20:6:2)
情感化界面 (2010-10-28 11:25:5)
用色彩打造专业的视觉效果 (2010-10-26 10:0:16)
你好，button——小谈网页设计的按钮 (2010-9-20 14:55:36)

最短的IE判断

zenwink@gmail.com (季氏安安) — Wed, 14 Dec 2011 22:47:50 +0800

在写原生的Javascript的时候，因为IE的JS引擎与标准浏览器的JS引擎之间总有那么些差异，所以经常会去判断是否是IE浏览器，记得在网上Down的很多源码用的最多的一种方式就是：

 
var ie = document.all();
var ie = document.all();

这是因为IE浏览器的document下有all方法，而所谓的标准浏览器却没有，所以很长的一段时间，这个是一种非常普遍的方法。

在之后大家开始追求起简短，就像在这之后一度流行的一种方法：

 
var ie = ! + "\v1";
var ie = ! + "\v1";

这个是利用IE不支持垂直制表符的特性而判别的，仅仅7个字符已经很让人震惊了，可是这个记录被一个俄国人在今年早些的时候打破了，人家只需要6个字符就可以搞定了。

我们暂且不讨论这一个字符能够做什么，但把它看作是一种研究，或者你说他是闲的那啥痛也行（吐槽~）。

 
var ie = ! - [1,];
var ie = ! - [1,];

其实它的原理很简单，[1,]在标准浏览器会返回字符串"1"，相当于调用[1,].toString，IE则返回"1,"。但是这样IE与标准都会通过检测，因此使用负号强制转换为数字，标准能成功转换为1，1会在if中自动转换为true，而IE则转换为NaN，再自动转换为false！查看DEMO。

很简单对吧？肯定会有很多人跟我一样在想，我怎么就没想到呢？是啊，我怎么就没想到呢？（笑~）

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/IE_to_determine_the_shortest.html

继续阅读《最短的IE判断》的全文内容...

分类: 既是前端 | Tags: JavaScript IE 数组浏览器 JS引擎 | 添加评论(2)

自动完成实现 (2011-8-11 16:50:41)
CSS hack：针对浏览器显示不同样式 (2011-4-7 21:42:30)
IE新建选项卡报JS错误的解决方法 (2011-3-8 16:13:50)
JavaScript框架编程 (2010-12-30 15:55:14)
WebSockets基础 (2010-11-25 20:21:0)

不知道拍什么好？认识32个摄影方式

jsann@jsann.com (jsann) — Wed, 07 Dec 2011 10:56:31 +0800

有没有觉得拿起相机却不知道拍什么好？又或者想跟以往拍点不同的东西，但又没有概念？下面我们就为你介绍32种摄影方法，来丰富你的摄影方式。

1. 365摄影计划

这就是每天一张照片，为自己设定目标与限制，通过日复一日的累积，建立自己的摄影经验与风格，是个不错的方法。

2. 日常物件

生活很乏味？此言差矣，正好拿起你的相机，去拍摄你认为很平凡的日常物件，一堵墙、一个篮、一道门，仔细观察然后拍出最好的角度与作品，这个世界会从此不一样。

3. 每月蒙太奇

把每月拍下来的照片拼起来，是一件很有趣的事，例如制成一张多幅照片合成的桌布……

4. 一个景点，很多故事

找一个有很多人出入往来的地方，然后不停拍摄，可能是广场，可能是车站，又或者是某商店门口，你会在这里发现很多人情世事，很多值得拍摄的故事。

5. 盲拍

试试拿着相机，走在街上，不看LCD屏幕，不用取景器，就直接拿起相机拍摄，或者会得到意想不到的效果。

6. 三合一

有点像第3条的每月蒙太奇，但不同的是只限于三张︰可以是一件事物的三个不同角度、三件事物却有同一颜色、甚至三张完全不相干的照片，然后用PS把它们排列起来成为一张。

7. 新角度

用夸张全新角度去拍摄，例如趴在地上，这会令你的照片从此不一样，如果你有可调节角度的LCD屏幕，就更加轻松了。试着什么都用超低角度，很有趣的。

8. A-Z或1-2-3

拍摄带有字母或者数字的物体，也可以拍摄苹果、香蕉、猫或者一辆车、两棵树、三个人……

9. 图片说故事

相机只能拍摄这个世界的外壳，只有相机背后的人，才了解照片里的物体到底有什么故事，写下来吧，会很有趣的。

10. 随步拍摄

规则很简单，从家步行五分钟，看到什么就拍下来，把距离你家五分钟的东西都拍摄下来，可能是一株花、一只猫……这个地方从此于你又有不同意义了。甚至试着步行更长距离，不坐车，看到什么拍什么。

11. 手机摄影

可能很多人都做了，不用单反，用手机，目标就是拍出不下于高端相机的好照片，虽然不容易，试试吧。

12.家居

其实家里也有很多东西值得玩，排列一套茶杯、堆砌一排铅笔、叠起一袋硬币，就算天气再差，这些都是有趣的拍摄题材。

13. 烟的艺术

烟是一种很随意很特别的拍摄对象，也能构成很多不同的创意，当然就考验大家设定的耐心了。

14. 创意自拍

找不到模特？你自己不就是最佳的模特吗？自拍除了拿著iPhone，在厕所对着镜子之外，还有很多方式的，把相机放在不同位置，运用各种不同的灯光，自制你的人像作品吧。

15. 相同地点，不同时间

有些景色一年四季，或过时过节就会变成不同景观，又或如某些球场和公园，到了某些日子就用来作不同节目，纪录它们，会有意想不到的收获。

16. 单色

试着找一次拍摄全部都是单色或黑白的照片，也许你会爱上黑白照片，对摄影的认识从此变得不一样。

17. 陌生人

很简单，拍摄100个陌生人，无论你是如此街拍、纯粹旁观与记录，或是从此认识新朋友，100张照片之后，你的世界也会变了。

18. 光涂鸦

这个对很多人并不陌生，我们之前曾介绍过很多出色的光涂鸦作品，但事实上，这也是相当好的入门课题，让人重新认识曝光三角，也认识相机的基础操作，对于第一次接触单反的人绝对是必修课，而对于摄影老手来说，也是历久常新的创意平台。

19. 全景图

越来越多相机加入全景拍摄功能，甚至iPhone也有，以往运用脚架逐张拍摄再慢慢合并的历史，似乎越来越远了，无论如何，拍摄全景照片，依然是一种有趣的摄影方式。

20. 动态模糊

把相机设为慢门，就已经有非常多的摄影题材，不论是跟随拍摄、拉变焦、制造幻影，动态模糊不一定就是手震，随时可以变成充满想像空间的艺术作品。

21. 摄影寻宝团

组织两个人、三个人、一团人，去一个地方拍摄寻宝，是很有意思的活动，因为人多，大家可以分头去寻找有趣的拍摄对象，然后互相分享。

22. 摄影油画

其实也就是调一点点快门速度，在拍摄风景时运用少许动态模糊，这样拍出来的照片就有油画的感觉了。

23. 过度曝光

虽然很多相机里有测光表，我们也经常需要拍出曝光正常的照片，但其实故意过度曝光，也可以拍出非常有意思的作品。

24. 极简主义

制作页面超简约的作品，可能是纯白的背景，或是一幅纯粹的砖墙，甚至一望无际的沙漠，再加入一点点元素，就可变成极简照片，也是很有吸引力的。

25. 色彩

色彩是摄影里一个重要的元素，不去计较被摄物体的形状与本质，单纯寻找色彩的对比与冲突也是很好的摄影题材。

26. 找阴影

拍摄时最怕不够光，这个正好相反，找出没有光的地方，找个有趣的阴影图案，然后拍摄下来。

27. 扫描阴影

如果你家里有扫描仪，就可以用它代替你的相机，试着什么都放上去扫描一番，或许你会扫出不少艺术气息浓厚的照片。

28. 几何与图案

三角形、圆形、棱形、这些在数学教科书上的图案，在现实里比比皆是，可能是人工建筑，也可能是自然景物，把他们拍下来吧。

29. 垂直照片

很多人喜欢这种方式，因为垂直的照片在视觉上是不同的，试着一整天全拍摄垂直的照片，或许你会有新的发现。

30. 玩水

水、液体、墨汁，实在有太多太多的玩法了，例如拍摄水滴悬空、从杯中溅出、墨水化开、水花四散、流水瀑布，我们一开水龙头就有水可以用，这么方便怎么可能没有拍摄机会呢。

31. 家乡

你认识你的家乡吗？有没有为它留一个纪录？高速发展下这种变旧就要拆的新时代，有朝一日或许你会后悔，没有纪录过住了几十年的这个家，而且替它拍照，你可以重新认识这个你以为很了解的地方。

32. 制作相册

把你的作品制作成相册吧，然后你重新翻起你的照片，或许会激发你去拍出更出色的作品，毕竟在电脑屏幕看、跟拿在手里看是不一样的。

原文来自：http://www.nphoto.net/news/2011-12/05/323ae9a4426703216.shtml

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/32_way_of_understanding_photography.html

继续阅读《不知道拍什么好？认识32个摄影方式》的全文内容...

分类: 既是视觉 | Tags: 摄影照片盲拍蒙太奇马赛克 | 添加评论(0)

还没有相关文章，您来说两句？

25个浏览器开发工具的秘密

zenwink@gmail.com (季氏安安) — Thu, 01 Dec 2011 14:38:12 +0800

开发

过去几年来，浏览器开发工具一直是 Web 开发者最得力的工具。它能够与Web浏览器和谐相处，允许我们在当前窗口中实时地操作DOM元素、CSS样式和JavaScript，以及获取一些其他的有用信息。

以前开发者使用Firefox的一个名叫Firebug的扩展，来开发和调试他们的网站。但是最近，各个浏览器都开发了一套它们自己的工具，并且每一个都有自己的优势和劣势。如今很难想像没有这些方便的工具，如何来构建一个网站。

激活开发工具通常是按下“F12”键（ Mac 系统为 Cmd + Option + I ），或通过右键点击页面，选择弹出菜单中的“审查元素”。

浏览器	开发工具集	类型	文档
Chrome	Developer Tools	集成	http://code.google.com/chrome/devtools/docs/overview.html
Firefox	Firebug	扩展	Documentation
Internet Explorer	Developer Toolbar	集成	Documentation
Opera	Dragonfly	集成	Documentation
Safari	Developer Tools	集成 (默认关闭)	Overview

你充分发挥了这些工具的潜力吗？开发工具最大的特点就是很容易使用，但结果就是开发者们常常错过了它们所提供的大部分功能。受到 Paul Irish 和 Pavel Feldman 视频谈话的启发，我列出了一个有关开发控制台“秘密”的列表。我不指望它们中的每一个都对你来说是未知的，只希望它们中的某一些能够有助你成为一个更好的Web开发者。

如果你有更多的“秘密”，请自在地在文章末尾留言——一旦我确认了，我会及时更新这篇文章。我也很想知道你哪个开发控制台是你首要的开发工具，也可以直接在下面留言。

控制台选项卡

引用当前元素

Chrome, Firefox, Opera, Safari – 如果在“元素”选项卡中，你有一个元素正被选中的话，你可以通过引用“$0”来你的代码中调用它。比如，为了看到你选中元素的内容，你可以输入“$0.innerHTML”。在Chrome和Safari中，你可以通过按下“Esc”键，立即从其他选项卡切换到控制台（开发工具打开了的情况下）。在Firebug中，控制台通过点击选项卡左侧的图标，或按下 Ctrl + Shift + L 来切换（Mac 下是 Cmd + Shift + L ）。

在Opera中，你可以用“$1”往前引用元素。在Chrome和Safari中，你可以用“$1~$4”往前引用元素。

使用console.log同时输出多个值和对象

所有浏览器 - 我们都知道，console.log() 方法用来输出调试信息到控制台时非常有用，尤其是与alert相比。但是当你想要输出一个字符串紧跟着一个对象时，它输出的形式会让人生烦。比如使用 console.log('message:' + $('#message')) 将仅仅告诉你消息是一个对象（*译注：可能输出结果是“message:[object Object]”），并且如果这个过程在一个循环体中的话，对象的表示让人困惑。

console.log()实际上可以接收多个参数，所以你可以同时输出字符串和对象：console.log('message:', $('#message')); 或者其他你能想到的JavaScript类型组合。

你可以用 console.warn() 输出警告消息；用 console.error() 输出错误消息；用 console.info() 输出信息消息。你也可以使用 console.assert() 来检测表达式为 true 或 false。

(感谢Masklinn提供了此项信息)

重用JavaScript命令

所有浏览器 - 如果你输入过一条命令到JavaScript控制台，并且你又想重新运行它，只要简单地按下方向键“↑”来回滚你调用过的命令就可以了。

保持

Chrome, Firefox – Firebug 控制台上方有一个很明显的 “保持”（Persist）按钮，但 Chrome 中被稍微隐藏掉了——需要右键点击控制台，在弹出的右键菜单中选择 “Preserve Log upon Navigation” 选项。

* 译注：保持的作用是让控制台在刷新页面后仍然保留已输出的控制台信息。

查看对象源

Firefox – Firefox支持 toSource() 方法，这意味着在Firebug中可以直接调用这个方法来打印一个对象的字符串表示。

改变 frame

Firefox – 从控制台直接运行JavaScript命令是很有用的，但是如果你页面用了iframe内容的话，就变得麻烦了。幸运的是，用下面的“cd”命令能够进入到指定的iframe环境，得以重新运行你的命令：

cd(window.frames['frameName']);

* 译注：比如cd(window.frames[0])，它会进入第一个iframe的执行环境，并显示一条info消息：["Current window:", Window sample.com]；同时，返回上层可以使用：cd(parent)

Chrome – Chrome 允许你用一个不同的方式来改变 frame ，点击控制台底部的下拉菜单进行切换：

Opera – Opera中，控制台和文档选项卡都存在一个用来切换frame的下拉菜单——控制台中的那个下拉菜单仅在有 frame 可供选择时才显示：

（感谢Paul Irish 和Daniel提供此项信息）

直接复制你的代码到剪贴板

Chrome, Firefox, Safari – 在控制台中使用copy()命令，以内容作参数，将直接复制内容到剪贴板。

让浏览器做计算

所有浏览器 – 这个技巧很有意义，但令人惊讶的是会有多少人不这么去用它。当你想快速知道一个数学计算的答案（比如，一个456像素宽度的容器分三栏，每栏有多宽？），你不需要打开一个计算器，直接在控制台输入就能立即返回答案。顺便说一下，答案是152。

* 译注：这又不是Bot, O_O 作者应该是指直接在控制台输入表达式：456/3

脚本选项卡

页面所有运行脚本安身的地方，这个选项卡包含了一个下拉菜单，让你可以选择你想要调试的脚本。

处理压缩过的脚本

Chrome, Internet Explorer, Safari – 放置一个断点在代码中会让调试更简单。如果脚本是已经投入生产环境了的话，它就很可能已经被压缩过了。这时怎么你怎么调试压缩过的代码呢？幸好，部分浏览器有个选项可以解压你的JavaScript代码。

Chrome和Safari中，简单地选择脚本选项卡，通过下拉菜单选择相关的脚本，然后点击底部面板的"{}"（pretty print）图标：

在 IE9 中，点击选中脚本旁边的工具图标来格式化JavaScript代码：

监视变量

所有浏览器 – .NET开发中的一个常用工具，“监视”允许通过脚本选项卡右上栏的方便的区域来观察一组变量。要观察一个变量很简单，只要输入它的名字，“监视”将保持它最新的值。

实时编辑和执行JavaScript代码

Chrome – 在Chrome中，你可以直接在页面中进行编辑，并不需要使用单独的编辑器或者重新加载页面。简单地双击你想要改变代码，然后输入新的代码！按Ctrl + S （Mac，Cmd + S）保存。

当错误发生时创建一个断点

所有浏览器 – 当第一个脚本错误发生时，简单地点击脚本选项卡中的暂停图标，出错行将会高亮以便查看。

当DOM改变时创建一个断点

Chrome, Firefox – 如果你知道当某个特定部分的DOM改变时页面崩溃了，或者你仅仅想找出是哪段脚本改变了某个元素的属性，Chrome和Firefox都提供了有效设置断点的方式来找出这个元凶。简单地选中你要监视的元素，右键点击它，选择中断条件：

（感谢Jason Wilson提供此项信息）

元素选项卡

Firefox中叫做“HTML”选项卡，Opera中叫做“文档”（Documents）选项卡。元素（Elements）选项卡显示的是当前状态的DOM。在IE中，你需要点击“刷新”按钮才能查看当前的DOM。

获取一个容器尺寸的简易办法

Chrome, Safari – 我是个在包含浮动元素的容器上使用 overflow:auto 样式的大粉丝——旧版本的IE这样做会引起麻烦，除非你给元素指定了实际宽度（auto 和 100% 都不够）。虽然元素的实际尺寸可以在元素选项卡右上角的“Computed Style”栏看到，但仍然需要点击好几次。在Chrome 或 Safari中更好办法是，鼠标悬停到元素选项卡里HTML源代码的特定元素上，或者点击底部工具栏上的放大镜后再悬停到页面特定元素上：

Firebug, Internet Explorer, Opera – 你需要选择开发工具右手侧面板中的“布局”（Layout）选项卡，或在右侧边栏中的“计算样式”（computed styles）中查看。

（感谢Masklinn分享此项信息）

展开所有元素视图

Firefox, Opera – 在Firebug的HTML选项卡中，按下小键盘上的星号（*）键就可以展开选定的所有元素。默认不会展开脚本标记和样式标记，除非你同时按下 Shift + * 键。

Opera – Opera“文档”（Documents）选项卡下边直接有个按钮可以做这件事：

增加边距、间距、高度、宽度、边框——甚至是颜色

所有浏览器 – 如果你想改变某元素的边距、间距、高度或者，你可以用光标键（即方向键）来增加/减小大小：

按上（↑）或下（↓）键将增加或减小单位1。
在Chrome, Firebug 和 Safari中，按住Shift键的同时，再按上或下键将增加或减小单位10。（* 译注：Page-Up 和 Page-Down 键有同样的效果）
在Chrome 和 Safari中，按住 Alt 键的同时，再按上或下键将增加或减小单位0. 1。
在Chrome 和 Safari中，按住 Shift 键的同时，再按 Page-Up 或 Page-Down 键将增加或减小单位100。

这些快捷键在你不确定用哪种使用的尺寸做样式时特别有用。另外，Chrome, Firebug 和 Opera 中，你同时可以用这些快捷键来修改颜色值。

* 译注：需要双击元素选项卡右侧的具体样式，使其进入编辑状态。

（感谢mikkelrom分享此项信息）

为 :active, :hover, :focus, :visited 状态设置样式

Chrome, Firefox, Opera – 在控制台操作样式真的很棒，但测试悬停样式就麻烦了。庆幸的是，有个解决办法。

Chrome 有个内置按钮用来做这件事。在元素选项卡右侧有个带虚线框和光标的图标，它就是用来编辑状态样式的：

Firebug中，点击右侧的Style选项卡旁边的带箭头菜单，然后选择你想要编辑的状态。

在Opera中，样式选项卡下面有个看起来像列表的图标。

轮换颜色定义类型

Chrome, Safari – Web页面中的颜色能用多个方式定义——通过名称、16进制数字（3位或6位）、rgb或hsl（都有带alpha透明的版本）。在Chrome 或 Safari中，你可以通过点击颜色值旁边的方形图标来在这几个类型定义之间切换。

（感谢Masklinn分享此项信息）

* 译注：增加了这个截图，以前我仅仅以为那个方块是用来展示颜色的，囧，根本不知道它还能点击——又多了一个能省略掉计算器的功能。

颜色拾取器

Opera – 在 Opera 中，和上面一样，点击颜色值右边的方块图标可以弹出一个方便的拾取器：

* 译注：这里又有了个HSV颜色自动转换RGB颜色的工具。

资源选项卡

资源（resources）选项卡列表你的页面使用的所有样式表、JavaScript文件和图片。不幸的是，IE和Firebug中不存在这个选项卡，尽管在它们的其他选项卡中集成了这项功能的一些特征。

保存你的更改

Chrome, Internet Explorer, Safari – 在工具中即时编辑样式或JavaScript很爽。但当你高高兴兴地做了修改，然后又要在源代码中重新实现一遍就不那么爽了。

在IE中，每个选项卡提供了一个“保存”图标，它的功能就是保存修改到一个文件当中。

同时，Chrome 和 Safari的资源选项卡中提供了一项贴心的功能：它保存了你每次修改的版本（按 Ctrl + S 之后），还允许你往前或往后查看每个版本的变化。你修改过的文件名旁边会出现一个箭头图标，表示它可以展开/收起以查看修改过的版本列表。在Chrome中，右键点击文件名可以选择保存这个文件。不过在Safari中你只能悲剧地复制和粘贴了。

Cookie 和存储

Chrome, Opera, Safari –资源选项卡下半部分的资源列表表示了各种不同的数据存储选项。Opera 有一个单独的存储选项卡。

网络选项卡

网络（Network）选项卡显示你页面加载的所有文件资源。大多数情况，你打开它之后，要刷新一下页面才能显示出你想看的信息。在Firebug中，选项卡的名称是“Net”。对于IE，直到版本 9 以后才有它。

禁用浏览器缓存

所有浏览器 – 每个浏览器都可以禁用缓存，但禁用的方式不一致。

在Chrome中，点击开发工具右下角的齿轮图标进行设置。在Firebug中，设置位于网络选项卡旁边的箭头下拉菜单中。在IE中，设置位于菜单栏的存菜单项。

在Opera中，要清除缓存的话，点击网络选项卡，选择网络选项中的第二个选项卡，选择其中的第一个选项。在Safari中，在菜单栏中的“开发”菜单中禁用缓存。

Windows中，在浏览器中可以按下 Ctrl + Shift + Delete 键调用消除缓存对话框。

（感谢 Steven 和 karl 分享此项信息）

* 译注：Opera 中我根本没找到，只有设置/历史选项卡可供设置。

延迟

所有浏览器 – 网络选项卡允许你查看服务器响应一个请求花了多长时间。每个资源对应的浅色填充部分表示请求是何时发送，并且何时返回的。深色填充部分表示资源是何时下载的。在Chrome中，你可以用悬停在每条时间线上以获得消耗时间的具体信息。

在Opera中延迟表示的原则是一样的，除了它用的是灰色的线条，而Chrome是浅色填充。

在IE中，延迟被标记成黄色，并且悬停到时间线上也会取得更多信息。

在Firebug中，延迟被标记为紫色，并且用的术语是“Waiting”。悬停到时间线上同样能获得各方面时间消耗的详细信息。

DOMContentLoaded 和 load 事件触发

Chrome, Safari – Chrome和Safari中网络选项还展示了两项额外的信息，DOMContentLoaded 事件触发的时间用蓝线表示，load 事件触发的时间用红线表示。

DOMContentLoaded 代表的那条线表示当浏览器已经完成解析文档（但其他资源比如图片和样式表可以还没下载完成），而 load 事件代表的线表示所有资源都已经加载完成了。

如果这两个事件同时发生，这条线会显示为紫色。

（感谢Steven 和 Joey提供此项信息）

其他

崩溃

所有浏览器 – 有时我发现开发者工具会崩溃，或鼠标点击时会失去响应。我也经常发现使用键盘快捷键关闭再重新打开开发工具可以修复这个问题，而不需要去关闭整个浏览器再重新打开。

我希望这些特性和秘密对你有所帮助。我故意没有在这个列表中包含性能分析和远程调试的内容，那将是我后续文章要讲到的了。请自在地在下面反馈、挑错，或留下你的技巧。

原文来自：http://www.cnblogs.com/ambar/archive/2011/11/09/25-secrets-of-the-browser-developer-tools-in-chinese.html

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/25_secret_of_browser_development_tools.html

继续阅读《25个浏览器开发工具的秘密》的全文内容...

分类: 既是前端 | Tags: console HTML 前端 Firebug 调试 | 添加评论(0)

Firebug Console 与命令行全集 (2011-7-4 10:42:17)
疯狂的跨域技术 (2010-10-21 9:38:35)
前端开发优化总结 (2010-10-15 20:26:57)
内容溢出用(...)表示的数种方法 (2010-9-1 10:39:26)
Input and Img align (2010-8-19 14:38:50)

程序员：编程给你现实生活带来了哪些坏习惯

jsann@jsann.com (jsann) — Wed, 26 Oct 2011 10:16:54 +0800

　　导读：似乎任何职业都会给从业人员带来这样那样的习惯。Stack Overflow网站上有位朋友（应该也是程序员）想了解其他程序员在投身堆码事业后有什么样的坏习惯。结果一呼百应，很多程序员纷纷自爆自己的坏习惯和糗人糗事。编程无国界，相信国内堆码界的朋友，也会有同感。

　　1. 编程已给我带来很多坏习惯，编程也每天在继续给我新增更多的坏习惯。当然有些习惯和编程无关了。下面这些习惯尽管我也很想改掉，但已根深蒂固。

a. 在天地万物中，去发现多态、继承和模式；
b. 用十六进制代码中的像素和颜色来解释某东西的大小；
c. 在日常交谈中用代码相关的抽象术语。

2. 我现在认为256这个数字非常完美。但非程序员不明白这个，有时候让我措手不及。

　　编者评：1024呢？

　　3. 我在看纸质书时，我就非常沮丧。为什么我不能用Ctrl + F来找想看的东西呢？

　　编者评：我在看电视时，一到广告，我也非常沮丧。为什么我不能往后拖呢？

　　4. Q: Do you want tea OR coffee?
　　A: Yes
　　侍者：你喝茶还是咖啡？
　　客人：是

　　编者评：如果该服务生是个兼职打工的程序员，那就直接给你上茶和咖啡。因为，不管“上茶”还是“上咖啡”，都是满足“茶||咖啡”条件的。如果能多卖一样，何乐而不为呢？

　　5. 我Google一切。

　　编者评：忘了Google的地址怎么办？

　　6. 几年前，我去一家咖啡店吃午饭，柜台里边的MM问我吃哪种面包。我不假思索地说：“默认的。”

　　囧，她或许现在还在笑我……

　　编者评：如果该MM不懂编程，她应该不会发“酵”，只会发蒙。

　　7. 每天坐在屏幕面前，盯上10个小时，这样真的很难保持健康。如果你经常走神，编程可以帮你养成久坐的生活方式。

　　编者评：除吃饭、W.C.、开会和回家Sleep外，视线一般不离开屏幕

　　8. 在现实世界中，我真的很需要Ctrl + Z。

　　编者评：不仅你想要，我们也想要。除了不仅要这个，每次看到钱包的时候，都会想：“要说我能Ctrl+C和Ctlr+V多好啊！”。另外，某某说他的成功可以Ctrl + C，莫非他和我们同行？

　　9. 我是从零开始数数的，经常用“1”表示结束，而别人用“1”表示开始。

　　编者评：这个习惯的养成是一个艰难的过程。多少次的越界，多少次的循环次数错误让俺们深刻体会：万物始于0。

　　10. 我喜欢“是/不是”类型的问题，我对那种既不是“是”，也不是“不是”的回答非常不爽。

　　比如：我问：“你不介意我换个台吧？” 别人答：“我正在和我妹妹IM聊天。”对我来说，这就好比：public bool canFlip( ) { return "I'm IMing my sister"; }

　　返回结果明显是个字符串，而不是布尔值。对别人来说，他们已明确告诉答案了；在我看来，他们的回答是“强制转换错误”。如果我再问那个问题，他们还有同样的回答话，那应该在catch语句块中抛出异常了。

　　编者评：有编译错误

　　11. 我教我们家小孩，三主色是：Red、Green和Blue。

　　 12. 侍者：嗨，我叫克里斯蒂，我是你的Server/侍者！（server除表示“侍者”之外，还指“服务器”。）
　　我：嗨，我叫麦克，我是你的Client/客户端！
　　（真实的故事）

　　编者评：不知道这个Server/侍者可以承受多少Client/客户的并发请求？

　　13. 我发现，有时候我明明说的非常精确，但某人（通常是我老婆）并不领会我的精确性，而是理解成类似的东西。这让我抓狂。比如，我在做菜的时候，我并没有说：“从冰箱里拿任何黄的东西，”我是说：“给我黄油。”
但她递给我人造黄油。

　　编者评：同学，这就是你的不对了！“人造黄油”是“黄油”的子类哦！（Update：从中文字面意思上。）

　　14. 当我收到如下留言后：

　　（去店里买个面包。如果他们有柴鸡蛋，买10个。）

　　结果我买了10个面包回家。

　　编者评：因为店里有柴鸡蛋。严格来说，这是个脑筋急转弯。

　　15. 我想用正则表达式来搜寻现实对象。

　　编者评：如果能做到，不知你在中文世界能搜到什么？
　　16. 在平常打字中，句子都是分号结尾；

　　编者评：幸亏没有编程语言是用问号结尾？否则谁能看懂你的文章？

　　17. 我在家做任何家务事都非常有条理。比如，在使用任何产品之前，我会仔细阅读附带的说明书，即使是使用非常简单的烤面包机也不例外。如果我要挂相框，我会Google一下“如何挂相框”，确定我所知道的是正确的（或者在亚马逊上找本悬挂相框相关的书）。

　　在每做任何一件事之前，我都会准备一切必备的工具。在实际操作之前（这些操作可不能撤销的），我会做大量的测量和试验。但这让我老婆彻底发狂。

　　编者评：阅读手册绝对是好习惯；动手操作之前做准备工作，也不能算坏习惯。顶多算是类职业病。你老婆不该抓狂的。但你挂相框，还要去Google一下，这个有点让我抓狂。

　　18. 把一段话称为“字符串”。这让非程序员们非常不解 - 嘛是“字符串”？

　　编者评：我看到蜘蛛，便说它是爬虫。这让程序员不解 - 嘛是“爬虫”？

　　19. 我发现我在写信的时候常常在侧边嵌套花括号，我老婆看到后以为我抽风了。收件人也应该差不多这样想。但这已经是习惯了。

　　编者评：他们也习惯了

　　20. 缺觉，我现在习惯了。

　　编者评：大熊猫应该不再是濒危动物了！缺觉有害健康。另外，正在看本文的朋友，不管你是否是程序员，都应该检测一下自己的睡眠是否达标了。如何检测，请参考伯乐在线的《你的睡眠时间和睡眠质量达标了么？》一文。

　　21. 我喜欢优化每天的事情，尽可能多采用并行处理。比如，在启动电脑后，跑到厨房打开水壶、准备咖啡，然后跑回来输入密码登录系统；在打开火狐时，去倒开水冲咖啡，然后端着咖啡回来浏览新闻；另外，坐在马桶上刷牙，每天也能节省几分钟。

　　编者评：哥端的不是咖啡，是下巴！

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/Programmer_programming_to_bring_you_what_life_bad_habits.html

继续阅读《程序员：编程给你现实生活带来了哪些坏习惯》的全文内容...

分类: 既是程记 | Tags: 程序员编程坏习惯职业生活 | 添加评论(0)

前端模板编程方式 (2010-8-6 15:7:4)
程序员特有的9个坏习惯 (2010-7-13 9:32:49)

瀑布流布局浅析

zenwink@gmail.com (季氏安安) — Mon, 24 Oct 2011 16:19:41 +0800

简介

如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？

类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“哇哦” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。

这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。所以，我们给这样的布局起了一个形象的名字 — 瀑布流式布局。

几种实现方式

随着越来越多设计师爱用这种布局，我们作为前端，要尽可能满足视觉/交互设计师的需求。所以，我们整理了下这种布局的几种实现方式，有三种:

1) 传统多列浮动。即蘑菇街和哇哦采用的方式，如下图所示:

各列固定宽度，并且左浮动；
一列中的数据块为一组，列中的每个数据块依次排列即可；
更多数据加载时，需要分别插入到不同的列上；
线上例子。

优点:

布局简单，应该说没啥特别的难点；
不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

缺点:

列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

2) CSS3 定义。W3C 中有讲述关于多列布局的文档，排列出来的样子:

由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现；

 
#container {
        -webkit-column-count: 5；
        /*-webkit-column-gap: 10px；
        -webkit-column-rule: 5px solid #333；
        -webkit-column-width: 210px；*/
 
        -moz-column-count: 5；
        /*-moz-column-gap: 20px；
        -moz-column-rule: 5px solid #333；
        -moz-column-width: 210px；*/
 
        column-count: 5；
        /*column-gap: 10px；
        column-rule: 5px solid #333；
        column-width: 210px；*/
 }
    #container {        -webkit-column-count: 5；        /*-webkit-column-gap: 10px；        -webkit-column-rule: 5px solid #333；        -webkit-column-width: 210px；*/        -moz-column-count: 5；        /*-moz-column-gap: 20px；        -moz-column-rule: 5px solid #333；        -moz-column-width: 210px；*/        column-count: 5；        /*column-gap: 10px；        column-rule: 5px solid #333；        column-width: 210px；*/ }    
    

column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度；当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏；当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏；都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参考https://developer.mozilla.org/en/CSS3_Columns 中的说明。
线上例子。

优点:

直接 CSS 定义，最方便了；
扩展方便，直接往容器里添加内容即可。

缺点:

只有高级浏览器中才能使用；
还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

3) 绝对定位。即 Pinterest ，Mark之，KISSY 采用的方式:

可谓是最优的一种方案，方便添加数据内容，窗口变化，列数/数据块都会自动调整；
线上例子。

缺点:

需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

KISSY.Waterfall 实现思路

KISSY 的 Waterfall 组件主要包含两个部分，一个是对现有数据块进行排列计算各自所在的位置；二是下拉滚动时，触发加载数据操作，并把数据添加到目标容器中。

1) 数据块排列，算法步骤简述下:

初始化时，对容器中已有数据块元素进行第一次计算，需要用户给定: a，容器元素 — 以此获取容器总宽度； b，列宽度； c，最小列数；最终列数取的是容器宽度/列宽度和最小列数的最大值，这样保证了，当窗口很小时，仍然出现最小列数的数据；
获得列数后，需要保存每个列的当前高度，这样在添加每个数据块时，才知道起始高度是多少；
依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束；
当所有元素插入完毕后，调整容器的高度为各列最大的高度值，结束依次调整；
性能效率上的注意点: a，如果当前正在调整中，又触发了 resize 事件，需要将上次调整暂停后执行这次调整(见 timedChunk 函数)； b，resize 触发会很频繁，可以将回调函数缓存一段时候后执行，即当这段时间内多次触发了resize事件，但回调函数只会执行一次(见 S.buffer 函数)
感兴趣的可以参见源码。

2) 异步加载数据，前面讲的是如何对容器中已有元素进行排列，但很多情况下，还需要不断加载新数据块，为此专门设计了一个独立的模块 KISSY.Waterfall.Loader，其实这个功能就更简单了，仅包含两个步骤:

绑定滚动事件，并确定预加载线高度值，即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；
加载数据，为了不对数据源做太多限制，完全由使用者自己决定数据源从哪边获取和其格式，这样更好的方便用户使用。为此，该组件只提供一个load(success，end) 接口，怎样load 由用户自己去定义，而其中的 success/end，分别给出如何添加新数据(suceess 即同 addItems)/如何停止加载的接口。这样真是太方便了~~
感兴趣的可以参见源码。

KISSY.Waterfall 示例和文档

看到这边，是不是很想试用一下~~ 嗯嗯，这里给出一些相关学习资料和示例，以供参考:

Waterfall API 文档，相关构造器，配置项，方法都在这里；
示例，包含静态和动态两种。

原文来自：http://ued.taobao.com/blog/2011/09/14/waterfall/

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/waterfall_flow_layout_analysis.html

继续阅读《瀑布流布局浅析》的全文内容...

分类: 既是前端 | Tags: 瀑布布局 KISSY CSS3 列布局 | 添加评论(1)

拥有布局 IE haslayout (2010-10-20 14:22:33)
IE layout详解 (2010-10-18 17:33:20)

自动完成实现

zenwink@gmail.com (季氏安安) — Thu, 11 Aug 2011 16:50:41 +0800

最近这段时间啥也不想写，也不想做什么，今闲来无事就分享一篇源码好了，无意间发现的一篇源码，我也不知道它是从哪里来的。这里测试的时候使用的是数组，实际使用的时候，我们换成Ajax从服务器端获取的方式就OK了。点击这里可以查看本地DEMO。

 
"javascript"> 
 
"center">自动完成函数(Autocomplete Function) 
    "center">"text" style="width:300px;height:20px;font-size:14pt;" id="o" onkeyup="autoComplete.start(event)">
    class="auto_hidden" id="auto">

自动完成函数(Autocomplete Function)

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/automatically_to_achieve.html

继续阅读《自动完成实现》的全文内容...

分类: 既是前端 | Tags: 自动完成体验 AJAX 服务器 JavaScript | 添加评论(1)

最短的IE判断 (2011-12-14 22:47:50)
Apache配置虚拟机 (2011-4-13 22:34:5)
JavaScript框架编程 (2010-12-30 15:55:14)
WebSockets基础 (2010-11-25 20:21:0)
JavaScript中的ActiveXObject对象 (2010-11-5 13:21:2)

IE7 下 IFRAME 滚动条无法滚动

zenwink@gmail.com (季氏安安) — Tue, 05 Jul 2011 15:33:36 +0800

很多时候，我们都会让 IFRAME 隐藏滚动条，通常的做法就是在嵌入 IFRAME 的页面的 CSS 中指定以下规则：

html, body {overflow: hidden}

如果只是想隐藏横向滚动条，则使用以下代码：

html, body {overflow-x: hidden}

以上代码在 IE、Firefox、Opera、Chrome 下均能正常工作。但是唯有在 IE7 下隐藏横向滚动条时，虽然有显示纵向滚动条，但鼠标滚轮无法使用。

似乎 IE7 把 overflow-y 也当成了 hidden。

这种情况其实我们只需要显式指定一下 overflow-y 即可，如：

html, body {overflow-x: hidden; overflow-y: auto;}

问题即可解决。

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/IE7_can_not_scroll_the_scroll_bar_under_the_IFRAME.html

继续阅读《IE7 下 IFRAME 滚动条无法滚动》的全文内容...

分类: 既是前端 | Tags: IE7 滚动条无法滚动 IFRAME 隐藏 | 添加评论(2)

还没有相关文章，您来说两句？

Firebug Console 与命令行全集

zenwink@gmail.com (季氏安安) — Mon, 04 Jul 2011 10:42:17 +0800

Console API

当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。

console.log(object[, object, ...])

使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的：

console.log("The %s jumped over %d tall buildings", animal, count);console.log("The", animal, "jumped over", count, "tall buildings");
console.log("The %s jumped over %d tall buildings", animal, count);console.log("The", animal, "jumped over", count, "tall buildings");

console.debug(object[, object, ...])

向控制台输出一条信息，它包括一个指向该行代码位置的超链接。

console.info(object[, object, ...])

向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。

console.warn(object[, object, ...])

同 info。区别是图标与样式不同。

console.error(object[, object, ...])

同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同，使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, ...])

断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。

console.dir(object)

输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。

console.dirxml(node)

输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。

console.trace()

输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, ...])

输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()

同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)

计时器，当调用 console.timeEnd(name);并传递相同的 name 为参数时，计时停止，并输出执行两条语句之间代码所消耗的时间（毫秒）。

console.profile([title])

与 profileEnd() 结合使用，用来做性能测试，与 console 面板上 profile 按钮的功能完全相同。

console.count([title])

输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。

console.clear()

清空控制台

命令行

控制台的输出面板右边，是控制台的输入面板（Chrome 调试工具对应为下方），在这里除了可以运行常规的 javascript 代码，还内置了相当数量的命令行可以辅助我们的调试工作，下面是一些常用命令行的简单介绍：

$(id)

返回一个给定 id 的元素。

$$(selector)

返回给定的 css 选择器匹配到的一组元素。

$x(xpath)

返回给定的 XPath 表达式匹配到的一组元素。

在 HTML 面板中选中的元素。

上一次在 HTML 面板中选中的元素。

$n(index)

访问最近 5 个被选中过的元素，index 的范围： 0 - 4。

dir(object)

同 console.dir(object)。

dirxml(node)

同 console.dirxml(node)。

clear()

同 console.clear()。

inspect(object[, tabName])()

在合适的（或一个指定的） tab 中检视一个对象。

keys(object)

返回一个对象的所有属性的键。

values(object)

返回一个对象的所有属性的值。

debug(fn)

在函数第一行添加一个断点，使用 undebug(fn) 移除断点。

monitor(fn)

开启一个函数的调用日志，使用 unmonitor(fn) 关闭该功能。非常有用的一个命令，但是它似乎并没有很好地工作。

monitorEvents(object[, types])

开启一个元素的某个事件（或所有事件）被触发时的日志记录。用例如下：

 
monitorEvents($0,['click'])
monitorEvents($0,['click'])

上面的命令行被执行后，将开启当前在 HTML 面板中被选中元素的 click 事件监控，一旦这个元素的 click 事件被触发，事件对象将会在控制台输出。如果不指定第二个参数，将对所有事件进行记录。

profile([title])

同 console.profile([title])

参考资料

原文来自：http://www.jsmix.com/tools/firebug-console-api-and-command-line-api.html

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/Firebug_Console_and_command-line_Collection.html

继续阅读《Firebug Console 与命令行全集》的全文内容...

分类: 既是前端 | Tags: Firebug console 调试命令 API | 添加评论(0)

25个浏览器开发工具的秘密 (2011-12-1 14:38:12)

Apache配置虚拟机

zenwink@gmail.com (季氏安安) — Wed, 13 Apr 2011 22:34:05 +0800

新浪微博虚拟机开发配置步骤及介绍。

1、由于后面虚拟机中需要用到Rewrite所以先编辑Apache的conf目录下的httpd.conf文件。（可根据实际需要操作）

添加mod_rewrite.so模块支持。去掉下列行中前面的#号。

LoadModule rewrite_module modules/mod_rewrite.so

2、配置apache支持虚拟机。这一步很重要。

# Virtual hosts
#Include conf/extra/httpd-vhosts.conf

找到上面相关文本，去掉#Include conf/extra/httpd-vhosts.conf前的#。

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

保存退出。

3、编辑conf目录下extra文件夹下的httpd-vhosts.conf。

去掉实例配置，添加新有配置。以新浪微博为例，配置文件如下：

#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
#
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

#
# Use name-based virtual hosting.
#
NameVirtualHost *:80

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any block.
#

#管理员邮箱
ServerAdmin jiangfeng3@staff.sina.com.cn

#项目根目录
DocumentRoot "D:/htdocs/frame_export"

#域名

ServerName test.t.sina.com.cn

    #别名
    ServerAlias test.t.sina.com.cn
    #错误日志路径

    ErrorLog "logs/test.t.sins.com.cn-error.log"
    CustomLog "logs/test.t.sins.com.cn-access.log" common
    RewriteEngine on

#重写规则，可根据实际需要添加
RewriteRule ^/(.*)$ /apps/index.php [L]

4、编辑本地host文件，以windows为例

进入C:\Windows\System32\drivers\etc

记事本打开hosts文件

最后添加

127.0.0.1 localhost
127.0.0.1 test.t.sina.com.cn

例子：

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

# localhost name resolution is handled within DNS itself.
127.0.0.1       localhost
# ::1             localhost
127.0.0.1       test.t.sina.com.cn

保存退出

5、重启apache，浏览器输入http://test.t.sina.com.cn

原文来自：http://blog.csdn.net/jiangfeng08/archive/2010/07/26/5766932.aspx

本文作者：季氏安安（[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接，谢谢。）

原文链接：http://www.jsann.com/post/Apache_configure_a_virtual_machine.html

继续阅读《Apache配置虚拟机》的全文内容...

分类: 既是后端 | Tags: Apache 虚拟机服务器 HTTP config | 添加评论(0)

自动完成实现 (2011-8-11 16:50:41)
前端开发优化总结 (2010-10-15 20:26:57)
Gravatar控件是如何炼成的？ (2010-9-6 11:18:40)
CSS实现山顶角的原理 (2010-8-9 13:29:48)
HTTP：超文本传输协议 (2010-7-26 17:46:41)

既是安安

Web设计精确点滴

相关文章:

最短的IE判断

相关文章:

不知道拍什么好？认识32个摄影方式

25个浏览器开发工具的秘密

开发

控制台选项卡

引用当前元素

使用console.log同时输出多个值和对象

重用JavaScript命令

保持

查看对象源

改变 frame

直接复制你的代码到剪贴板

让浏览器做计算

脚本选项卡

处理压缩过的脚本

监视变量

实时编辑和执行JavaScript代码

当错误发生时创建一个断点

当DOM改变时创建一个断点

元素选项卡

获取一个容器尺寸的简易办法

展开所有元素视图

增加边距、间距、高度、宽度、边框——甚至是颜色

为 :active, :hover, :focus, :visited 状态设置样式

轮换颜色定义类型

颜色拾取器

资源选项卡

保存你的更改

Cookie 和 存储

网络选项卡

禁用浏览器缓存

延迟

DOMContentLoaded 和 load 事件触发

其他

崩溃

相关文章:

程序员：编程给你现实生活带来了哪些坏习惯

相关文章:

瀑布流布局浅析

简介

几种实现方式

KISSY.Waterfall 实现思路

KISSY.Waterfall 示例和文档

相关文章:

自动完成实现

自动完成函数(Autocomplete Function)

相关文章:

IE7 下 IFRAME 滚动条无法滚动

Firebug Console 与命令行全集

相关文章:

Apache配置虚拟机

相关文章:

Cookie 和存储