<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PROSPEROUS WORLD</title>
	<atom:link href="http://www.lensee.net/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.lensee.net</link>
	<description>繁华世界 － 推荐使用 Safari 浏览本站</description>
	<lastBuildDate>Thu, 15 Oct 2009 08:37:31 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Mad Summer</title>
		<link>http://www.lensee.net/2009/10/mad-summer/</link>
		<comments>http://www.lensee.net/2009/10/mad-summer/#comments</comments>
		<pubDate>Mon, 12 Oct 2009 07:24:56 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[绘声绘影]]></category>
		<category><![CDATA[Mad Summer]]></category>
		<category><![CDATA[Maria Arredondo]]></category>
		<category><![CDATA[Music]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=363</guid>
		<description><![CDATA[持续好些天的小雨了，不愧是秋天⋯⋯
Maria Arredondo 的 burning相信很多人都听过了，其实同张专辑 Not Going Under 里的 Mad Summer 和 Some Hearts 也都很不错的。Some Hearts其实更喜欢一些，不过这首好像是翻唱的。
听听Mad Summer，权当是调剂下心情。
]]></description>
			<content:encoded><![CDATA[<p><object class="alignright" width="150" height="50" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="wmode" value="transparent" /><embed src="http://muzicons.com/musicon_v_srv_new.swf" width="150" height="50" menu="false" quality="high"  align="middle" type="application/x-shockwave-flash" flashvars="&#038;nomuz=muzicon%20unavailablesite=http://muzicons.com/&#038;icon_pic=59.png&#038;music_file=http://home.no/frankjohan/Maria%20Arredondo%20-%20Mad%20summer.mp3&#038;bg_color=999999&#038;type_of_clip=simple_text&#038;text_color=FFFFFF&#038;text_message=Mad+Summer&#038;buy_link=http%3A%2F%2Fwww.amazon.com%2Fgp%2Fsearch%3Fie%3DUTF8%26tag%3Dmuzicocommusi-20%26index%3Ddigital-music%26linkCode%3Dur2%26camp%3D1789%26creative%3D9325" wmode="transparent" menu="false" quality="high"></embed></object>持续好些天的小雨了，不愧是秋天⋯⋯<br />
Maria Arredondo 的 burning相信很多人都听过了，其实同张专辑 Not Going Under 里的 Mad Summer 和 Some Hearts 也都很不错的。Some Hearts其实更喜欢一些，不过这首好像是翻唱的。<br />
听听Mad Summer，权当是调剂下心情。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/10/mad-summer/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>国庆</title>
		<link>http://www.lensee.net/2009/10/national/</link>
		<comments>http://www.lensee.net/2009/10/national/#comments</comments>
		<pubDate>Thu, 01 Oct 2009 04:36:00 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[记事]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=351</guid>
		<description><![CDATA[今天是祖国六十华诞，祖国万岁！
]]></description>
			<content:encoded><![CDATA[<p>今天是祖国六十华诞，祖国万岁！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/10/national/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>美貌和财富</title>
		<link>http://www.lensee.net/2009/09/beauty-and-wealth/</link>
		<comments>http://www.lensee.net/2009/09/beauty-and-wealth/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 19:19:27 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[笑谈]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=348</guid>
		<description><![CDATA[腾讯网上的帖子..90后女子相亲惹爆网络 嫌男子没钱划车出气

http://cd.qq.com/a/20090915/000049.htm
看到一条评论比较有趣，贴出来……呵呵
男人的财富和女人的容貌竟是如此相似。男人没有钱和女人不漂亮同样遭人嫌弃，无论其他方面如何出类拔萃，前面那一条都是硬指标。女人靠化妆品堆砌美貌 &#8212;-如同男人靠借贷展示财富。男人巨大财富掩盖下的恶劣人品&#8212;-如同女人美貌掩盖下的言行粗鄙恶毒。所以二十多岁的女人和四十岁左右的男人才是绝配&#8212;-一个要趁苹果没有快速腐烂时卖个好价钱，一个风雨飘摇半辈子后开始有资格享受人生了。但是不容置疑的有一点：男人的财富不管多与少，总是不停地在累积，而且时间越久累积速度越快。女人的容貌不管漂亮与否，总是在不停地贬值，而且时间越久贬值速度越快。嗯，也许这就是社会前进的动力？
]]></description>
			<content:encoded><![CDATA[<p>腾讯网上的帖子..90后女子相亲惹爆网络 嫌男子没钱划车出气</p>
<ul>
<p>http://cd.qq.com/a/20090915/000049.htm</ul>
<p>看到一条评论比较有趣，贴出来……呵呵</p>
<blockquote><p>男人的财富和女人的容貌竟是如此相似。男人没有钱和女人不漂亮同样遭人嫌弃，无论其他方面如何出类拔萃，前面那一条都是硬指标。女人靠化妆品堆砌美貌 &#8212;-如同男人靠借贷展示财富。男人巨大财富掩盖下的恶劣人品&#8212;-如同女人美貌掩盖下的言行粗鄙恶毒。所以二十多岁的女人和四十岁左右的男人才是绝配&#8212;-一个要趁苹果没有快速腐烂时卖个好价钱，一个风雨飘摇半辈子后开始有资格享受人生了。但是不容置疑的有一点：男人的财富不管多与少，总是不停地在累积，而且时间越久累积速度越快。女人的容貌不管漂亮与否，总是在不停地贬值，而且时间越久贬值速度越快。嗯，也许这就是社会前进的动力？</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/09/beauty-and-wealth/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>星座时间</title>
		<link>http://www.lensee.net/2009/08/constellation-time/</link>
		<comments>http://www.lensee.net/2009/08/constellation-time/#comments</comments>
		<pubDate>Tue, 18 Aug 2009 08:10:52 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[星座]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=344</guid>
		<description><![CDATA[星座     日期(公历)    英文名
魔羯座 (12/22 &#8211; 1/19) Capricorn
水瓶座 (1/20 &#8211; 2/18) Aquarius
双鱼座 (2/19 &#8211; 3/20) Pisces
牡羊座 (3/21 &#8211; 4/20) Aries
金牛座 (4/21 &#8211; 5/20) Taurus
双子座 (5/21 &#8211; 6/21) Gemini
巨蟹座 (6/22 &#8211; 7/22) Cancer
狮子座 (7/23 &#8211; 8/22) Leo
处女座 (8/23 &#8211; 9/22) Virgo
天秤座 (9/23 &#8211; 10/22) Libra
天蝎座 (10/23 &#8211; 11/21) Scorpio
射手座 (11/22 [...]]]></description>
			<content:encoded><![CDATA[<p>星座     日期(公历)    英文名<br />
魔羯座 (12/22 &#8211; 1/19) Capricorn<br />
水瓶座 (1/20 &#8211; 2/18) Aquarius<br />
双鱼座 (2/19 &#8211; 3/20) Pisces<br />
牡羊座 (3/21 &#8211; 4/20) Aries<br />
金牛座 (4/21 &#8211; 5/20) Taurus<br />
双子座 (5/21 &#8211; 6/21) Gemini<br />
巨蟹座 (6/22 &#8211; 7/22) Cancer<br />
狮子座 (7/23 &#8211; 8/22) Leo<br />
处女座 (8/23 &#8211; 9/22) Virgo<br />
天秤座 (9/23 &#8211; 10/22) Libra<br />
天蝎座 (10/23 &#8211; 11/21) Scorpio<br />
射手座 (11/22 &#8211; 12/21) Sagittarius</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/08/constellation-time/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>MAC下淘宝确认收货</title>
		<link>http://www.lensee.net/2009/07/mac-to-confirm-receipt-of-taobao/</link>
		<comments>http://www.lensee.net/2009/07/mac-to-confirm-receipt-of-taobao/#comments</comments>
		<pubDate>Mon, 13 Jul 2009 04:13:18 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[支付宝]]></category>
		<category><![CDATA[淘宝]]></category>

		<guid isPermaLink="false">http://www.lensee.net/2009/07/%ef%bd%8d%ef%bd%81%ef%bd%83%e4%b8%8b%e6%b7%98%e5%ae%9d%e7%a1%ae%e8%ae%a4%e6%94%b6%e8%b4%a7/</guid>
		<description><![CDATA[
Safari of mac 淘宝交易确认
很多MAC OS,淘宝下不能确认收货.当然也不排除个别人也着到了和我一样的解决办法.
其实呢,在确认收货页面,支付宝的密码输入框那一块是显示不出来的,这个时候选取safari的-窗口-活动,在弹出的小窗口中找那个显示错误那个地址,我这显示的是ＨＴＴＰ什么 多重来着,不记得了,反正呢就那那么一项拉.双击他,然后会弹出一个新的页面,就是你的支付宝确认界面了,输入密码.确认,ＯＫ了.
这时候又出现一个有趣的现象,因为我有两笔交易,这时候我点第二笔交易,页面就完全正常了&#8230;   真的,你没有看错,我也没有写错,就是这样,完全正常了.
]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.lensee.net/albums/content/pictures0/tbjyqr.gif" onclick="return hs.expand(this, {captionId:'caption_1249741440912'});" class="highslide-image"><img class="alignright" src="http://www.lensee.net/albums/content/pictures0/tbjyqr.gif" alt="image" title="Click to enlarge" width="227" height="117" /></a>
<div class="highslide-caption" id="caption_1249741440912">Safari of mac 淘宝交易确认</div>
<p>很多MAC OS,淘宝下不能确认收货.当然也不排除个别人也着到了和我一样的解决办法.<br />
其实呢,在确认收货页面,支付宝的密码输入框那一块是显示不出来的,这个时候选取safari的-窗口-活动,在弹出的小窗口中找那个显示错误那个地址,我这显示的是ＨＴＴＰ什么 多重来着,不记得了,反正呢就那那么一项拉.双击他,然后会弹出一个新的页面,就是你的支付宝确认界面了,输入密码.确认,ＯＫ了.</p>
<p>这时候又出现一个有趣的现象,因为我有两笔交易,这时候我点第二笔交易,页面就完全正常了&#8230; <img src='http://www.lensee.net/wp-includes/images/smilies/icon_wink.gif' alt=';-)' class='wp-smiley' />  真的,你没有看错,我也没有写错,就是这样,完全正常了.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/07/mac-to-confirm-receipt-of-taobao/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>你也太黑了</title>
		<link>http://www.lensee.net/2009/06/greed/</link>
		<comments>http://www.lensee.net/2009/06/greed/#comments</comments>
		<pubDate>Fri, 19 Jun 2009 12:09:57 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[apple]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=312</guid>
		<description><![CDATA[南京众义达，就是珠江路498号未来城华海3C数码港二期1楼大门口那家，前几个月的时候在他们的另外一个铺面上入手ipod shuffle，今天去他们那去问本本的XP驱动，我的驱动盘忘在家里没有带出来，他们说刻的盘都卖完了。我就问老板能不能给我刻张，
老板是个女的，她直接告诉我“要100元&#8230;”
“你也太黑了。”然后我就走了。
这就是当时的情况。
]]></description>
			<content:encoded><![CDATA[<p>南京众义达，就是珠江路498号未来城华海3C数码港二期1楼大门口那家，前几个月的时候在他们的另外一个铺面上入手ipod shuffle，今天去他们那去问本本的XP驱动，我的驱动盘忘在家里没有带出来，他们说刻的盘都卖完了。我就问老板能不能给我刻张，<br />
老板是个女的，她直接告诉我“要100元&#8230;”<br />
“你也太黑了。”然后我就走了。<br />
这就是当时的情况。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/06/greed/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>驱动&#8230;</title>
		<link>http://www.lensee.net/2009/06/drive/</link>
		<comments>http://www.lensee.net/2009/06/drive/#comments</comments>
		<pubDate>Tue, 02 Jun 2009 08:49:23 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[apple]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=310</guid>
		<description><![CDATA[两个多月没XP用了&#8230;如果大多数游戏能在MAC下运行，我很愿意遗忘WIN的。but&#8230;
当初咋就没把驱动拷贝一份呢，唉。
WIN7快正式发行了，期待呢。快点把XP淘汰了吧。
用惯了MAC,现在觉得VISTA其实真的是很臭。
]]></description>
			<content:encoded><![CDATA[<p>两个多月没XP用了&#8230;如果大多数游戏能在MAC下运行，我很愿意遗忘WIN的。but&#8230;<br />
当初咋就没把驱动拷贝一份呢，唉。<br />
WIN7快正式发行了，期待呢。快点把XP淘汰了吧。<br />
用惯了MAC,现在觉得VISTA其实真的是很臭。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2009/06/drive/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Firebug</title>
		<link>http://www.lensee.net/2008/10/firebug/</link>
		<comments>http://www.lensee.net/2008/10/firebug/#comments</comments>
		<pubDate>Fri, 31 Oct 2008 16:54:49 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[插件]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=207</guid>
		<description><![CDATA[本文最初发表《程序员》杂志第三期，现将全文贴上，内容已经过编辑修饰了很多:)
什么是Firebug
从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。
Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。
应用
Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。
在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。
图1：Firebug插件展开图示

从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。



Console
HTML
CSS
Script
Dom
Net


控制台
Html查看器
Css查看器
脚本条时期
Dom查看器
网络状况监视



Console 控制台
控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。
控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：
PLAIN TEXT
CODE:




console.log(&#8220;hello world&#8221;)




如果你有一堆参数需要组合在一起输出，可以写成这样：
PLAIN TEXT
CODE:




console.log(2,4,6,8,&#8220;foo&#8221;,bar).




Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。
图2： 在控制台里调试javascript

查看和修改HTML
第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML
首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。
有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。
利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。
图3:：HTML查看器

CSS调试
Firebug的CSS调试器是专为网页设计师们量身定做的。
如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。
提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。
图4: CSS查看器，能够直接修改样式表

可视化的CSS尺标
我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。
图5：Firebug中的CSS标尺

网络状况监视器
也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。
网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。
网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。
图6：网络状况监视器

Javascript调试器
这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。
如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。
图7：javascript调试器

DOM查看器
DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。
图8: Dom查看器

小结
Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升，如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。
附
Firebug的中文含义是萤火虫，作者是Joe Hewitt，官方网页 http://www.getfirebug.com
Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量，要不是它的出现，我想有生之年说不定也看不到IE 7的发布了，官方网页 http://www.firefox.com
]]></description>
			<content:encoded><![CDATA[<p>本文最初发表《程序员》杂志第三期，现将全文贴上，内容已经过编辑修饰了很多:)</p>
<h3>什么是Firebug</h3>
<p>从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试<a href="http://www.ooso.net/index.php/archives/category/javascript/"><span style="color: #e58712;">javascript</span></a>给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。</p>
<p>Firebug是Firefox下的一款开发类插件，现属于<a href="http://www.ooso.net/index.php/archives/category/firefox/"><span style="color: #e58712;">Firefox</span></a>的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。<span id="more-207"></span></p>
<h3>应用</h3>
<p>Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。</p>
<p>在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。</p>
<p>图1：Firebug插件展开图示<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug1.gif" alt="firebug插件展开图示" /><br />
从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。</p>
<table border="1" cellpadding="4">
<tbody>
<tr>
<td>Console</td>
<td>HTML</td>
<td>CSS</td>
<td>Script</td>
<td>Dom</td>
<td>Net</td>
</tr>
<tr>
<td>控制台</td>
<td>Html查看器</td>
<td>Css查看器</td>
<td>脚本条时期</td>
<td>Dom查看器</td>
<td>网络状况监视</td>
</tr>
</tbody>
</table>
<h3>Console 控制台</h3>
<p>控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。</p>
<p>象C shell或Python shell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。</p>
<p>控制台还有个重要的作用就是查看脚本的log, 从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友 —— console.log, 最简单的打印日志的语法是这样的：</p>
<div class="igBar"><span id="lcode-1"><a onclick="showCodeTxt('code-1'); return false;" href="http://www.lensee.net/wp-admin/#"><span style="color: #000000;"><strong>PLAIN TEXT</strong></span></a></span></div>
<div class="syntax_hilite"><span class="langName"><strong>CODE:</strong></span></div>
<div id="code-1">
<div class="code">
<ol>
<li style="font-weight: normal; color: #3a6a8b; font-style: normal; font-family: 'Courier New', Courier, monospace;">
<div style="font-weight: normal; font-family: 'Courier New', Courier, monospace;">console.<span>log</span><span style="font-weight: bold; color: #006600;">(</span><span style="color: #cc0000;">&#8220;hello world&#8221;</span><span style="font-weight: bold; color: #006600;">)</span></div>
</li>
</ol>
</div>
</div>
<p>如果你有一堆参数需要组合在一起输出，可以写成这样：</p>
<div class="igBar"><span id="lcode-2"><a onclick="showCodeTxt('code-2'); return false;" href="http://www.lensee.net/wp-admin/#"><span style="color: #000000;"><strong>PLAIN TEXT</strong></span></a></span></div>
<div class="syntax_hilite"><span class="langName"><strong>CODE:</strong></span></div>
<div id="code-2">
<div class="code">
<ol>
<li style="font-weight: normal; color: #3a6a8b; font-style: normal; font-family: 'Courier New', Courier, monospace;">
<div style="font-weight: normal; font-family: 'Courier New', Courier, monospace;">console.<span>log</span><span style="font-weight: bold; color: #006600;">(</span><span style="color: #800000;">2</span>,<span style="color: #800000;">4</span>,<span style="color: #800000;">6</span>,<span style="color: #800000;">8</span>,<span style="color: #cc0000;">&#8220;foo&#8221;</span>,bar<span style="font-weight: bold; color: #006600;">)</span>.</div>
</li>
</ol>
</div>
</div>
<p>Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。</p>
<p>图2： 在控制台里调试javascript<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug2.gif" alt="在控制台里调试javascript" /></p>
<h3>查看和修改HTML</h3>
<p>第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。 HTML</p>
<p>首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。</p>
<p>有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。</p>
<p>利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。</p>
<p>图3:：HTML查看器<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug3.gif" alt="HTML查看器" /></p>
<h3>CSS调试</h3>
<p>Firebug的CSS调试器是专为网页设计师们量身定做的。</p>
<p>如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。</p>
<p>一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。<br />
如图4中正在修改一个区块的背景色。</p>
<p>提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。</p>
<p>图4: CSS查看器，能够直接修改样式表<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug4.gif" alt="图4: CSS查看器，能够直接修改样式表" /></p>
<h3>可视化的CSS尺标</h3>
<p>我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layout tab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。</p>
<p>图5：Firebug中的CSS标尺<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug5.gif" alt="图5：Firebug中的CSS标尺" /></p>
<h3>网络状况监视器</h3>
<p>也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。</p>
<p>网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。</p>
<p>网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。</p>
<p>图6：网络状况监视器<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug6.gif" alt="图6：网络状况监视器" /></p>
<h3>Javascript调试器</h3>
<p>这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。</p>
<p>如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。</p>
<p>图7：javascript调试器<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug7.gif" alt="图7：javascript调试器" /></p>
<h3>DOM查看器</h3>
<p>DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。</p>
<p>图8: Dom查看器<br />
<img src="http://www.ooso.net/wp-content/uploads/2007/firebug8.gif" alt="图8: Dom查看器" /></p>
<h3>小结</h3>
<p>Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升，如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。</p>
<h3>附</h3>
<p>Firebug的中文含义是萤火虫，作者是Joe Hewitt，官方网页 http://www.getfirebug.com<br />
Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量，要不是它的出现，我想有生之年说不定也看不到IE 7的发布了，官方网页 http://www.firefox.com</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2008/10/firebug/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>new macbook and pro</title>
		<link>http://www.lensee.net/2008/10/new-macbook-and-pro/</link>
		<comments>http://www.lensee.net/2008/10/new-macbook-and-pro/#comments</comments>
		<pubDate>Tue, 14 Oct 2008 23:15:36 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[macbook]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=174</guid>
		<description><![CDATA[苹果终于在15号发布了新的产品，我居然在早上6：58这个时间看到了苹果中国网站的更新。
和预期的一样，机身全铝合金材质，一体成型。而且有趣的是，之前有朋友说新的mac会把iphone和mac结合，取代传统的触摸扳，没想到真的实现了。以下是苹果对触控板的官方描述：
Multi-Touch 触控板
使用触感舒适耐磨的玻璃制成，新的 MacBook 触控板没有按键，在触控板的任何地方地方轻按一下，就相当于点击了鼠标按钮。没有单独的按键，触控板等于多了 39% 的空间供你的手指活动。现在 MacBook 更引进 Multi-Touch 手势，所有的功能尽在你的指尖。使用双指即可上下滚读页面；双指开合放大或缩小页面；三指轻扫翻阅你的照片库；用指尖便可旋转图片。使用新的四指手势，上下轻扫便可进入 Exposé 模式，左右轻扫便可在打开的应用程序间进行切换。如果你习惯使用鼠标右键，还可以在快捷菜单中设置右键区域。一旦习惯了使用 Multi-Touch 触控板，你一定无法想象没有它的日子。

然后就是LED背光显示屏了，这个就不用多说了。新的技术应用得还是不少嘛！不过我个人比较期待的SSD没能应用还是有点失望。估计是成本控制的因素吧。
软件方面也有让人眼前一亮的感觉哟，来看看这段话：
Leopard 是世界上最先进的操作系统。它是如此先进，如果你需使用 PC 应用程序，它甚至还可以让你运行 Windows。现在 Leopard 中已经包含了 Boot Camp，你只要拥有 Windows，然后启动 Boot Camp 即可。设置简单直观，正如同你期待的 Mac 一样。
原生速度运行 Windows
Boot Camp 支持最受欢迎的 32 位版本 Windows XP 及 Windows Vista。无论你在 Mac 上执行哪一种操作系统，Windows 应用程序都会以原生速度运行。Windows 应用程序可以充分利用多个处理器和核心、加速的 3D 显卡、高速连接功能，如：USB、FireWire、Wi-Fi、千兆以太网。
以前在macbook和pro上运行win，速度和发热问题都是很显著的，但是现在官方说原生速度运行 Windows。嘿嘿，此举应该是市场效应吧。
关于win的驱动方面消息就更好了哟，apple配套服务还不错。
丰富的驱动程序
使用 Boot Camp 安装 Windows 时，无需到互联网上去搜索或刻录光盘。运行 Boot Camp 后，简单插入 Leopard DVD，即可安装需要的驱动程序。让你能在 [...]]]></description>
			<content:encoded><![CDATA[<p>苹果终于在15号发布了新的产品，我居然在早上6：58这个时间看到了苹果中国网站的更新。</p>
<p>和预期的一样，机身全铝合金材质，一体成型。而且有趣的是，之前有朋友说新的mac会把iphone和mac结合，取代传统的触摸扳，没想到真的实现了。以下是苹果对触控板的官方描述：</p>
<blockquote><p><a href="http://www.apple.com.cn/macbookpro/images/design-trackpadvideo20081014.jpg" onclick="return hs.expand(this);" class="highslide-image"><img class="alignright" src="http://www.apple.com.cn/macbookpro/images/design-trackpadvideo20081014.jpg" alt="Multi-Touch 触控板" width="93" height="90" /></a>Multi-Touch 触控板<br />
使用触感舒适耐磨的玻璃制成，新的 MacBook 触控板没有按键，在触控板的任何地方地方轻按一下，就相当于点击了鼠标按钮。没有单独的按键，触控板等于多了 39% 的空间供你的手指活动。现在 MacBook 更引进 Multi-Touch 手势，所有的功能尽在你的指尖。使用双指即可上下滚读页面；双指开合放大或缩小页面；三指轻扫翻阅你的照片库；用指尖便可旋转图片。使用新的四指手势，上下轻扫便可进入 Exposé 模式，左右轻扫便可在打开的应用程序间进行切换。如果你习惯使用鼠标右键，还可以在快捷菜单中设置右键区域。一旦习惯了使用 Multi-Touch 触控板，你一定无法想象没有它的日子。</p></blockquote>
<p><span id="more-174"></span><br />
然后就是LED背光显示屏了，这个就不用多说了。新的技术应用得还是不少嘛！不过我个人比较期待的SSD没能应用还是有点失望。估计是成本控制的因素吧。</p>
<p>软件方面也有让人眼前一亮的感觉哟，来看看这段话：</p>
<blockquote><p>Leopard 是世界上最先进的操作系统。它是如此先进，如果你需使用 PC 应用程序，它甚至还可以让你运行 Windows。现在 Leopard 中已经包含了 Boot Camp，你只要拥有 Windows，然后启动 Boot Camp 即可。设置简单直观，正如同你期待的 Mac 一样。</p>
<p>原生速度运行 Windows<br />
Boot Camp 支持最受欢迎的 32 位版本 Windows XP 及 Windows Vista。无论你在 Mac 上执行哪一种操作系统，Windows 应用程序都会以原生速度运行。Windows 应用程序可以充分利用多个处理器和核心、加速的 3D 显卡、高速连接功能，如：USB、FireWire、Wi-Fi、千兆以太网。</p></blockquote>
<p>以前在macbook和pro上运行win，速度和发热问题都是很显著的，但是现在官方说原生速度运行 Windows。嘿嘿，此举应该是市场效应吧。</p>
<p>关于win的驱动方面消息就更好了哟，apple配套服务还不错。</p>
<blockquote><p>丰富的驱动程序<br />
使用 Boot Camp 安装 Windows 时，无需到互联网上去搜索或刻录光盘。运行 Boot Camp 后，简单插入 Leopard DVD，即可安装需要的驱动程序。让你能在 Mac 上运行 Windows 所需要的一切都在这里。当你要运行一个 Windows 应用程序时，完全可以充分享受 Mac 各种独特功能（iSight、Apple Remote 遥控器、触控板、特定键盘按键、键盘背光）及连通性(有线与无线)。</p>
<p>选择你的操作系统<br />
使用 Boot Camp 安装 Windows 后，你可以选择任一操作系统启动 Mac。只需在开机时按住 Option 键不放，即可进行选择。</p></blockquote>
<p>相信不少人都想咬口银苹果了吧！嘿嘿。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2008/10/new-macbook-and-pro/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>10-14</title>
		<link>http://www.lensee.net/2008/10/10-14/</link>
		<comments>http://www.lensee.net/2008/10/10-14/#comments</comments>
		<pubDate>Sun, 12 Oct 2008 11:39:12 +0000</pubDate>
		<dc:creator>孤单一吻</dc:creator>
				<category><![CDATA[天下杂侃]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[mac]]></category>

		<guid isPermaLink="false">http://www.lensee.net/?p=170</guid>
		<description><![CDATA[稍微有些期待的日子……据说苹果会在这天发布新的本本。
]]></description>
			<content:encoded><![CDATA[<p>稍微有些期待的日子……据说苹果会在这天发布新的本本。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.lensee.net/2008/10/10-14/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
