<?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>PlanABC - 怿飞’s Blog &#187; 前端常用工具</title>
	<atom:link href="http://www.planabc.net/category/tools-of-front-end/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.planabc.net</link>
	<description>落草为根—专注前端技术&#38;&#38;关注用户体验</description>
	<lastBuildDate>Tue, 08 Nov 2011 08:30:31 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Firebug Lite</title>
		<link>http://www.planabc.net/2008/07/29/frebug_lite/</link>
		<comments>http://www.planabc.net/2008/07/29/frebug_lite/#comments</comments>
		<pubDate>Tue, 29 Jul 2008 07:18:18 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=84</guid>
		<description><![CDATA[Firebug Lite 源自 Firebug ，可使用在IE、Opera、Safari 浏览器上。最新版本为 Firebug Lite 1.2 ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。 Firebug Lite 可以在页面中插入调试： &#60;script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'&#62;&#60;/script&#62; 还可以创建 Firebug Lite 书签调试（推荐）： javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&#038;&#038;window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug); 当然你也可以将文件下载到本地调试。 更多介绍请看：http://getfirebug.com/lite.htm... ]]></description>
			<content:encoded><![CDATA[<p><a href="http://getfirebug.com/lite.html" target="_blank" title="Firebug Lite">Firebug Lite</a> 源自 <a href="http://getfirebug.com/" target="_blank" title="Firebug">Firebug</a> ，可使用在IE、Opera、Safari 浏览器上。最新版本为 <a href="http://getfirebug.com/releases/lite/1.2/" target="_blank" title="Firebug Lite 1.2">Firebug Lite 1.2</a> ，不仅包含了旧版本的console.log 命令，还可查看 DOM 元素、跟踪 XHRs，操纵 HTML、 CSS 和 JavaScript 。</p>
<p><a href="http://getfirebug.com/lite.html" target="_blank" title="Firebug Lite">Firebug Lite</a> 可以在页面中插入调试：</p>
<pre><code>&lt;script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'&gt;&lt;/script&gt;</code></pre>
<p>还可以创建 Firebug Lite 书签调试（<strong>推荐</strong>）：</p>
<pre><code>javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.pi&#038;&#038;window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);</code></pre>
<p>当然你也可以将文件下载到本地调试。</p>
<p>更多介绍请看：<a href="http://getfirebug.com/lite.html" target="_blank" title="Firebug Lite">http://getfirebug.com/lite.html</a></p>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=84&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/07/29/frebug_lite/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>如何在本地使用 Yahoo! BrowserPlus</title>
		<link>http://www.planabc.net/2008/06/04/hacking_browserplus_to_work_locally/</link>
		<comments>http://www.planabc.net/2008/06/04/hacking_browserplus_to_work_locally/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 12:24:43 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[Yahoo]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=74</guid>
		<description><![CDATA[对于 Yahoo! BrowserPlus 的使用是有限制的（源自《How can I use BrowserPlus on my site?》）： During the “sneak peek,” BrowserPlus can only used on sites owned by Yahoo! or its partners. Our first full public release will make BrowserPlus available for use by 3rd party developers. 同时也包括限制本地的文件，对于想先睹为快的我们来说，很失落。不过现在通过 Skylar WoodwardL 的 hack 方法，修改下本地文件，就可以让轻松突破原本的本地文件限制，尝试一下吧，嘿嘿…… 找到系统上 Permissions 文件夹下的 Permissions 文件： Mac：/Users/[you]/Library/Application Support/Yahoo!/BrowserPlus/ [...... ]]></description>
			<content:encoded><![CDATA[<p>对于 <a href="http://www.planabc.net/2008/05/29/a_peek_into_yahoo_browserplus/" target="_blank" title="Yahoo! BrowserPlu">Yahoo! BrowserPlus</a> 的使用是有限制的（源自<a href="http://browserplus.yahoo.com/faq/#devHowCanIUseIt" target="_blank" title="How can I use BrowserPlus on my site?">《How can I use BrowserPlus on my site?》</a>）：  </p>
<blockquote><p>During the “sneak peek,” BrowserPlus can only used on sites owned by Yahoo! or its partners. Our first full public release will make BrowserPlus available for use by 3rd party developers.</p></blockquote>
<p>同时也包括限制本地的文件，对于想先睹为快的我们来说，很失落。不过现在通过 <a href="http://www.larw.com/?p=98" target="_blank" title="Hacking BrowserPlus">Skylar WoodwardL</a> 的 hack 方法，修改下本地文件，就可以让轻松突破原本的本地文件限制，尝试一下吧，嘿嘿……</p>
<p>找到系统上 Permissions 文件夹下的 Permissions 文件：</p>
<ul>
<li>Mac：/Users/[you]/Library/Application Support/Yahoo!/BrowserPlus/</li>
<li>Windows XP：c:\\Documents And Settings\[you]\Local Settings\Application Data\Yahoo!\BrowserPlus\</li>
<li>Windows Vista：c:\Users\[you]\AppData\Local\Yahoo!\BrowserPlus\</li>
</ul>
<p>修改文件中的</p>
<pre><code>&quot;whitelist&quot; : [
	&quot;^http(s?)://(.*)\\.yahoo\\.com$&quot;,
	&quot;^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$&quot;
],</code></pre>
<p>为</p>
<pre><code>"whitelist" : [
	&quot;^http(s?)://(.*)\\.yahoo\\.com$&quot;,
        &quot;^http(s?)://(.*)\\.yahoo\\.com:[0-9]+$&quot;,
	&quot;^file://$&quot;
],</code></pre>
<p>然后关闭所有打开的浏览器，或者从进程中删除 BrowserPlus 进程，就可生效了，够简单吧。</p>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=74&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/06/04/hacking_browserplus_to_work_locally/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Yahoo! BrowserPlus</title>
		<link>http://www.planabc.net/2008/05/29/a_peek_into_yahoo_browserplus/</link>
		<comments>http://www.planabc.net/2008/05/29/a_peek_into_yahoo_browserplus/#comments</comments>
		<pubDate>Thu, 29 May 2008 09:49:21 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[Yahoo]]></category>
		<category><![CDATA[浏览器]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=73</guid>
		<description><![CDATA[BrowserPlus 到底是什么，又能做什么？ BrowserPlus 是 Yahoo! 最近刚发布一个 Web 扩展的平台：终端用户需安装他，而开发者可以通过一个小的 JavaScript 库使用他的特性。平台现有的一些属性包括： 从桌面的拖拽； 用户断图片的处理（裁切，翻转和滤镜）； 桌面通知。 BrowserPlus 最独特的特性是他能在运行中更新和添加服务，而无需重新启动浏览器或甚至加载页面。对于用户，这意味着没有更多的中断或安装运行，而 Yahoo! 去处理软件分发的复杂性以及升级。对于开发者，这意味着能够通过一个简单的函数引用检查和激活新的服务（当然待用户批准）。 目前支持哪些平台： Windows XP Windows Vista Mac OS X 10.4, Tiger (intel only) Mac OS X 10.5, Leopard (intel only) 目前支持哪些浏览器： 在 Mac 上支持 Firefox 2 (或高于) 和 Safari 3 在 Windows 上支持 Internet Explorer 7 和 Firefox 2 [...... ]]></description>
			<content:encoded><![CDATA[<p><a href="http://browserplus.yahoo.com" target="_blank" title="BrowserPlus">BrowserPlus</a> 到底是什么，又能做什么？</p>
<p><a href="http://browserplus.yahoo.com" target="_blank" title="BrowserPlus">BrowserPlus</a> 是 Yahoo! 最近刚发布一个 Web 扩展的平台：终端用户需安装他，而开发者可以通过一个小的 JavaScript 库使用他的特性。平台现有的一些属性包括：</p>
<ol>
<li>从桌面的拖拽；</li>
<li>用户断图片的处理（裁切，翻转和滤镜）；</li>
<li>桌面通知。</li>
</ol>
<p>BrowserPlus 最独特的特性是他能在运行中更新和添加服务，而无需重新启动浏览器或甚至加载页面。对于用户，这意味着没有更多的中断或安装运行，而 Yahoo! 去处理软件分发的复杂性以及升级。对于开发者，这意味着能够通过一个简单的函数引用检查和激活新的服务（当然待用户批准）。</p>
<p>目前支持哪些平台：</p>
<ul>
<li>Windows XP</li>
<li>Windows Vista</li>
<li>Mac OS X 10.4, Tiger (intel only)</li>
<li>Mac OS X 10.5, Leopard (intel only) </li>
</ul>
<p>目前支持哪些浏览器：</p>
<ul>
<li>在 Mac 上支持 Firefox 2 (或高于) 和 Safari 3</li>
<li>在 Windows 上支持 Internet Explorer 7 和 Firefox 2 (或更高)</li>
</ul>
<p>了解更多：<a href="http://browserplus.yahoo.com/faq/" target="_blank" title="Frequently Asked Questions">《Frequently Asked Questions》</a></p>
<p>今天大体看了一些 <a href="http://browserplus.yahoo.com/demos/" target="_blank" title="Yahoo! BrowserPlus Demos">范例</a>，感觉很方便，而且不用额外的学习新语言，额外的使用新工具，仅需要熟悉服务的 API 即可。</p>
<p>看个简单的样例——“使用服务”：</p>
<pre><code>&lt;script class=&quot;javascript&quot; src=&quot;http://bp.yahooapis.com/2.0.4/browserplus-min.js&quot;&gt;&lt;/script&gt;
&lt;script class=&quot;javascript&quot;&gt;
// the "service specification" that we'll activate
var ttsService = {
    service: "TextToSpeech",
    version: "1",
    minversion: "1.0.2"
};  

// check for the presence of TextToSpeech, and dump results in the
// specified div
function checkForTextToSpeech(divName) {
    YAHOO.bp.isServiceActivated(
        ttsService,
        function() {
            var _divName = divName;
            return function(haveIt) {
                var d = document.getElementById(_divName);
                d.innerHTML = haveIt;
            };
        }()
    );
}  

YAHOO.bp.init(function(res) {
    if (res.success) {
        checkForTextToSpeech("before");
        YAHOO.bp.require({
            services: [ ttsService ]},
            function(r) {
                checkForTextToSpeech(”after”);
                if (r.success) {
                    YAHOO.bp.TextToSpeech.Say(
                        { utterance: “text to speech is activated” },
                        function() {}
                    );
                }
            }
        );
    }
});
&lt;/script&gt;</code></pre>
<p>样例代码（Sample Code）：<a href="http://browserplus.yahoo.com/docs/samples/" target="_blank" title="Yahoo! BrowserPlus Sample Code">http://browserplus.yahoo.com/docs/samples/</a></p>
<p>服务检测（Service Explorer）：<a href="http://browserplus.yahoo.com/services/" target="_blank" title="Yahoo! BrowserPlus Service Explorer">http://browserplus.yahoo.com/services/</a></p>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=73&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/05/29/a_peek_into_yahoo_browserplus/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>如何让 Firefox 2 和 Firefox 3 版本并存</title>
		<link>http://www.planabc.net/2008/05/29/how_to_run_both_firefox_2_and_firefox_3_together/</link>
		<comments>http://www.planabc.net/2008/05/29/how_to_run_both_firefox_2_and_firefox_3_together/#comments</comments>
		<pubDate>Thu, 29 May 2008 03:39:45 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[Firfox]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=72</guid>
		<description><![CDATA[最新的 Firefox 2 版本为 Firefox 2.0.0.14， Firefox 3 版本为 Firefox 3.0rc1。主流依然是 Firefox 2.0.0.14，但由于在不久的将来 Firefox 2 会升级到 Firefox 3，对于我们前端是好消息（更好更优的功能），也是坏消息（提前进入“作战”状态，现在就应该开始测试网站在 Firefox 3 下的兼容性了！）。 大家都知道 IE 有多版本集成的软件（比如：IETester），而 Firefox 的多版本如何解决呢？ 下面提供两个方案： 1、针对Windows的用户：《How to Run both Firefox 2 and Firefox 3 Together》，不爱看或者看不懂英文的，还可以《如何让Firefox2和Firefox3在Windows下共存？》。 2、针对其他平台的用户（aoao 提供的方案）：Firefox 装 3.0 的，再安装个 Flock1.x（内核为Firefox 2），就可以并存两个版本，某些插件不支持新版可装 Nightly Tester Tools 来解决... ]]></description>
			<content:encoded><![CDATA[<p>最新的 Firefox 2 版本为 <a href="http://www.mozilla.com/en-US/firefox/" title="Firefox 2.0.0.14" target="_blank"> Firefox 2.0.0.14</a>， Firefox 3 版本为 <a href="http://www.mozilla.com/en-US/firefox/all-beta.html" target="_blank" title="Firefox 3.0rc1">Firefox 3.0rc1</a>。主流依然是 Firefox 2.0.0.14，但由于在不久的将来 Firefox 2 会升级到 Firefox 3，对于我们前端是好消息（更好更优的功能），也是坏消息（提前进入“作战”状态，现在就应该开始测试网站在 Firefox 3 下的兼容性了！）。</p>
<p>大家都知道 IE 有多版本集成的软件（比如：<a href="http://www.planabc.net/2008/05/04/ietester/" title="IETester">IETester</a>），而 Firefox 的多版本如何解决呢？</p>
<p>下面提供两个方案：</p>
<p>1、针对Windows的用户：<a href="http://www.webindepth.com/how-to-run-both-firefox-2-and-firefox-3-together/" target="_blank" title="How to Run both Firefox 2 and Firefox 3 Together">《How to Run both Firefox 2 and Firefox 3 Together》</a>，不爱看或者看不懂英文的，还可以<a href="http://dancewithnet.com/2008/02/01/how-to-run-both-firefox2-and-firefox3-together/" target="_blank" title="如何让Firefox2和Firefox3在Windows下共存？">《如何让Firefox2和Firefox3在Windows下共存？》</a>。</p>
<p>2、针对其他平台的用户（<a href="http://www.aoao.org.cn/blog/" target="_blank" title="样式之美">aoao</a> 提供的方案）：Firefox 装 3.0 的，再安装个 <a href="http://www.flock.com/" target="_blank" title="Flock Browser - The Social Web Browser">Flock1.x</a>（内核为Firefox 2），就可以并存两个版本，某些插件不支持新版可装 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/6543" title="Nightly Tester Tools" target="_blank">Nightly Tester Tools</a> 来解决。</p>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=72&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/05/29/how_to_run_both_firefox_2_and_firefox_3_together/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>IETester</title>
		<link>http://www.planabc.net/2008/05/04/ietester/</link>
		<comments>http://www.planabc.net/2008/05/04/ietester/#comments</comments>
		<pubDate>Sun, 04 May 2008 02:25:39 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=65</guid>
		<description><![CDATA[Multiple IE（支持 XP下IE3 到IE6多版本共存） 相信很多朋友都用过，但其不支持 Vista，最大的问题是该软件已经很久未更新，集成的 IE 版本都过老，不适应现在浏览器测试的需求。 长江后浪推前浪：IETester 。 IETester 支持 Vista 和 XP 下IE8 beta 1, IE7，IE 6 和IE5.5 版本共存。 最新版本：v0.2.1 下载 中文包 (加入Languages 文件夹，默认在 C:\Program Files\Core Services\IETester ) 最小需求：Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ，则Windows XP 下的 IE6 有一些小问题，并且在这个配置下 IE7/IE8 版本不能运行 ) 不过任何软件都有不完美之处—— IETester 目前已知的问题有： 当窗口大小改变的时候，页面内容可能会消失（作者改进中）； 上一页/下一页功能不正常； [...... ]]></description>
			<content:encoded><![CDATA[<p><a href="http://tredosoft.com/Multiple_IE" target="_blank" title="Multiple IE">Multiple IE</a>（支持 XP下IE3 到IE6多版本共存） 相信很多朋友都用过，但其不支持 Vista，最大的问题是该软件已经很久未更新，集成的 IE 版本都过老，不适应现在浏览器测试的需求。</p>
<p>长江后浪推前浪：<a title="IETester " target="_blank" href="http://www.my-debugbar.com/wiki/IETester/HomePage">IETester</a> 。</p>
<p><img alt="IETester" src="http://www.my-debugbar.com/wiki/uploads/IETester/ietester-0.2.png" width="600" /></p>
<p>IETester 支持 Vista 和 XP 下IE8 beta 1, IE7，IE 6 和IE5.5 版本共存。</p>
<p>最新版本：v0.2.1 <a title="IETester v0.2.1" target="_blank" href="http://www.my-debugbar.com/ietester/install-ietester-v0.2.1.exe">下载</a> <a href="http://www.my-debugbar.com/ietester/Chinese.lang" target="_blank" title="IETester中文包">中文包</a> (加入Languages 文件夹，默认在 C:\Program Files\Core Services\IETester ) </p>
<p>最小需求：Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ，则Windows XP 下的 IE6 有一些小问题，并且在这个配置下 IE7/IE8 版本不能运行 )</p>
<p>不过任何软件都有不完美之处——</p>
<p>IETester 目前已知的问题有：</p>
<ol>
<li>当窗口大小改变的时候，页面内容可能会消失（作者改进中）；</li>
<li>上一页/下一页功能不正常；</li>
<li>Focus功能不正常；</li>
<li>Java apple不能运行；</li>
<li>Flash不能在IE6下正常运行。</li>
</ol>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=65&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/05/04/ietester/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>前端开发 IE 中的常用调试工具</title>
		<link>http://www.planabc.net/2008/04/28/ie_debugger_tools/</link>
		<comments>http://www.planabc.net/2008/04/28/ie_debugger_tools/#comments</comments>
		<pubDate>Mon, 28 Apr 2008 06:05:43 +0000</pubDate>
		<dc:creator>怿飞</dc:creator>
				<category><![CDATA[前端常用工具]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[工具]]></category>

		<guid isPermaLink="false">http://www.planabc.net/?p=64</guid>
		<description><![CDATA[第二届 D2 上，小马提到的一些 IE 常用调试工具： Microsoft Script Debugger —— Companion.JS need to install this Companion.JS —— Javascript debugger for IE , like Console API feature IE Developer Toolbar —— Like Firebug (DOM/CSS etc) Fiddler —— Web Debugging Proxy 上面的插件，自己平常工作中也基本用到，不过 Companion 还是第一次听说，自己也孤陋寡闻了一把。 怿飞补充一个：HttpWatch —— HTTP viewe... ]]></description>
			<content:encoded><![CDATA[<p>第二届 <a href="http://d2forum.cn/index.html" title="D2" target="_blank">D2</a> 上，小马提到的一些 IE 常用调试工具：</p>
<ol>
<li><a href="http://www.microsoft.com/Downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&#038;displaylang=en" target="_blank" title="Microsoft Script Debugger">Microsoft Script Debugger</a>  —— Companion.JS need to install this</li>
<li><a href="http://www.my-debugbar.com/wiki/CompanionJS/HomePage" target="_blank" title="Companion.JS">Companion.JS</a> —— Javascript debugger for IE , like Console API feature</li>
<li><a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038" target="_blank" title="IE Developer Toolbar">IE Developer Toolbar</a> —— Like Firebug (DOM/CSS etc)</li>
<li><a href="http://www.fiddlertool.com/fiddler/" target="_blank" title="Fiddler">Fiddler</a> —— Web Debugging Proxy</li>
</ol>
<p>上面的插件，自己平常工作中也基本用到，不过 Companion 还是第一次听说，自己也孤陋寡闻了一把。</p>
<p>怿飞补充一个：<a href="http://httpwatch.com/" target="_blank" title="HttpWatch">HttpWatch</a> —— HTTP viewer</p>
<img src="http://www.planabc.net/?ak_action=api_record_view&id=64&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://www.planabc.net/2008/04/28/ie_debugger_tools/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
	</channel>
</rss>

