<?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>前端思考：专注前端开发，关注用户体验 &#187; 插件</title>
	<atom:link href="http://www.artcss.com/archives/tag/%e6%8f%92%e4%bb%b6/feed" rel="self" type="application/rss+xml" />
	<link>http://www.artcss.com</link>
	<description>一个像素的距离...</description>
	<lastBuildDate>Sat, 12 Feb 2011 03:34:07 +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功能的十款Firefox插件</title>
		<link>http://www.artcss.com/archives/472.html</link>
		<comments>http://www.artcss.com/archives/472.html#comments</comments>
		<pubDate>Mon, 02 Nov 2009 08:48:57 +0000</pubDate>
		<dc:creator>Artcss</dc:creator>
				<category><![CDATA[前端工具]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[插件]]></category>

		<guid isPermaLink="false">http://www.artskin.cn/blog/?p=470</guid>
		<description><![CDATA[Firebug是一款革命性的Firefox扩展插件，它可以帮助网页开发者与设计师测试检查前端代码，为我们提供大量有用的特色功能，比如延迟信息控制板、DOM查看器、页面元素的逐条信息等。 尽管Furebug已经是捆绑了大量开发功能的工具箱了，但是仍然有几个扩展可以提升它的可用性。我们将在此为开发者与设计师介绍十款最好的为Firebug准备的 Firefox扩展，帮助你大幅度提升Firebug功能，让开发生活更加轻松。 1. Pixel Perfect Pixel Perfect可以把网页与设计稿覆盖在一起组成一个网页，方便精确的编写CSS与HTML。借由切换网页组成的开关，网页开发者与设计师拥有可视化指导，精确位置和网页部件的尺寸。查看 视频演示，看看Pixel Perfect如何工作的。 安装 Pixel Perfect 2. Page Speed Page Speed是评估网页表现，为开发者提供可行的前端性能优化建议的开源Firebug插件。测试和评估是基于Google的Steve Sounder编写的网页性能的最优方法。请务必阅读页面速度用户指南完整文档的许多功能。 安装 Page Speed 3. CodeBurner CodeBurner是由SitePoint发布的Firebug的扩展，提供内建的HTML和CSS参考。扩展也显示基于当前CSS 和HTML面板前后关系的信息。这样的参考非常实用，为你显示浏览器兼容性与W3C网页元素推荐遵守协议的信息，其中很多其他类型的信息。 安装 CodeBurner 4. FireRainbow FireRainbow是简单的Firebug扩展，提供了非常联想的功能：代码语法高亮。FireRainbow把JavaScript, CSS, 和HTML变成了彩色，提供了更好的代码可读性，方便在Firebug回顾与审查。现在有超过二十种可供选择的FireRainbow主题，可以自由定制。 安装 FireRainbow 5. Inline Code Finder Inline Code Finder 非常适合查看内嵌的avaScript和CSS，适合开发者重构现有的标记以单独的结构（HTML）与风格（CSS）以及功能（JavaScript） 。该工具使用很简单：搜索整个网页的内嵌代码，为开发人员提供内联代码前后关系的信息。最新版本，你可以过滤某些群体内嵌代码。 安装 Inline Code Finder 6. Firecookie 利用cookies开发网络应用可能花费大量的时间， Firecookie是一款Firebug扩展，能为你提供完全与cookies一体化工作的许多自有选择和功能。扩展可以进行查看，检查，输出，和管理 cookies.cookie日志(创建，删除，等等)，以及更多。Firecookie最新版本增加了几个改进，例如只罗列出来自一个域名的cookies资料。 安装 Firecookie [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Firebug是一款革命性的<a target="_blank" href="http://www.mozillaonline.com/" rel="tag" title="标签 Firefox 下的日志">Firefox</a>扩展插件，它可以帮助网页开发者与设计师测试检查前端代码，为我们提供大量有用的特色功能，比如延迟信息控制板、DOM查看器、页面元素的逐条信息等。</strong></p>
<p>尽管Furebug已经是捆绑了大量开发功能的工具箱了，但是<strong>仍然有几个扩展可以提升它的可用性</strong>。我们将在此为开发者与设计师介绍十款最好的为Firebug准备的 <span>Firefox</span>扩展，帮助你大幅度提升Firebug功能，让开发生活更加轻松。<span id="more-472"></span></p>
<h4>1. <a href="http://www.pixelperfectplugin.com/">Pixel Perfect</a></h4>
<p style="text-align: center;"><span><img width="550" height="270" alt="" src="http://blog.artskin.cn/wp-content/uploads/2010/01/pixelperfect.png"/></span></p>
<p>Pixel Perfect可以把网页与<a target="_blank" href="http://www.redbots.cn/tag/%E8%AE%BE%E8%AE%A1">设计</a>稿覆盖在一起组成一个网页，方便精确的编写CSS与HTML。借由切换网页组成的开关，网页开发者与设计师拥有可视化指导，精确位置和网页部件的尺寸。查看 <a href="http://pixelperfectplugin.com/how-to-use/video/" title="Video: Pixel Perfect Firefox Extension">视频演示</a>，看看Pixel  Perfect如何工作的。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/7943">安装 Pixel Perfect</a></li>
</ul>
<h4>2. <a href="http://code.google.com/speed/page-speed/">Page  Speed</a></h4>
<p style="text-align: center;"><img alt="Page Speed" src="http://blog.artskin.cn/wp-content/uploads/2010/01/pagespeed.png"/></p>
<p>Page Speed是评估网页表现，为开发者提供可行的前端性能优化建议的开源Firebug插件。测试和评估是基于Google的<a href="http://www.amazon.com/gp/product/0596529309?ie=UTF8&amp;tag=stevsoud-20&amp;linkCode=as2&amp;camp=1789&amp;creative=9325&amp;creativeASIN=0596529309">Steve  Sounder</a>编写的<a href="http://code.google.com/speed/page-speed/docs/rules_intro.html">网页性能的最优方法</a>。请务必阅读<a href="http://code.google.com/speed/page-speed/docs/using.html">页面速度用户指南</a>完整文档的许多功能。</p>
<ul>
<li><a href="https://dl-ssl.google.com/page-speed/current/page-speed.xpi">安装 Page  Speed</a></li>
</ul>
<h4>3. <a href="http://tools.sitepoint.com/codeburner/">CodeBurner</a></h4>
<p style="text-align: center;"><img alt="CodeBurner" src="http://blog.artskin.cn/wp-content/uploads/2010/01/codeburner.jpg"/></p>
<p>CodeBurner是由<a href="http://www.sitepoint.com/">SitePoint</a>发布的Firebug的扩展，提供内建的HTML和CSS参考。扩展也显示基于当前CSS 和HTML面板前后关系的信息。这样的参考非常实用，为你显示浏览器兼容性与W3C网页元素推荐遵守协议的信息，其中很多其他类型的信息。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/10273">安装 CodeBurner</a></li>
</ul>
<h4>4. <a href="http://firerainbow.binaryage.com/">FireRainbow</a></h4>
<p style="text-align: center;"><img alt="FireRainbow" src="http://blog.artskin.cn/wp-content/uploads/2010/01/firerainbow.png"/></p>
<p><em>FireRainbow</em>是简单的Firebug扩展，提供了非常联想的功能：代码语法高亮。FireRainbow把JavaScript, CSS, 和HTML变成了彩色，提供了更好的代码可读性，方便在Firebug回顾与审查。现在有超过二十种可供选择的<a href="http://github.com/darwin/firerainbow/tree/master/themes">FireRainbow主题</a>，可以自由定制。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/file/53758/firerainbow-1.0-fx.xpi?confirmed">安装 FireRainbow</a></li>
</ul>
<h4>5. <a href="http://robertnyman.com/inline-code-finder/">Inline  Code Finder</a></h4>
<p style="text-align: center;"><img alt="Inline Code Finder" src="http://blog.artskin.cn/wp-content/uploads/2010/01/inline_code.png"/></p>
<p>Inline Code Finder 非常适合查看内嵌的avaScript和CSS，适合开发者重构现有的标记以单独的结构（HTML）与风格（CSS）以及功能（JavaScript） 。该工具使用很简单：搜索整个网页的内嵌代码，为开发人员提供内联代码前后关系的信息。<a href="http://robertnyman.com/2009/02/05/new-version-of-inline-code-finder-with-event-filtering-and-a-download-record/">最新版本</a>，你可以过滤某些群体内嵌代码。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/9641/addon-9641-latest.xpi">安装 Inline Code Finder</a></li>
</ul>
<h4>6. <a href="http://www.softwareishard.com/blog/firecookie/">Firecookie</a></h4>
<p style="text-align: center;"><img alt="Firecookie" src="http://blog.artskin.cn/wp-content/uploads/2010/01/firecookie.png"/></p>
<p>利用cookies开发网络应用可能花费大量的时间， Firecookie是一款Firebug扩展，能为你提供完全与cookies一体化工作的许多自有选择和功能。扩展可以进行查看，检查，输出，和管理 cookies.cookie日志(创建，删除，等等)，以及更多。Firecookie<a href="http://www.softwareishard.com/blog/firecookie/firecookie-05-beta/">最新版本</a>增加了几个改进，例如只罗列出来自一个域名的cookies资料。</p>
<ul>
<li><a href="http://www.softwareishard.com/firecookie/archive/firecookie-0.8.xpi">安装 Firecookie</a></li>
</ul>
<h4>7. <a href="http://www.zachleat.com/web/2007/04/18/javascript-code-coverage-tool-for-firebug/">FirebugCodeCoverage</a></h4>
<p style="text-align: center;"><img alt="FirebugCodeCoverage" src="http://blog.artskin.cn/wp-content/uploads/2010/01/codecoverage.png"/></p>
<p>FirebugCodeCoverage 是一个由<a href="http://seleniumhq.org/projects/ide/">Selenium IDE</a>开发的基准Firebug扩展，判定代码执行持续时间的百分比,为大家所知的 <a href="http://en.wikipedia.org/wiki/Code_coverage">代码覆盖范围</a>。这是有代表性的衡量，在自动测试期间来看一下测试的实例怎样能很好的彻底通过测试（高比例是你的目标）。</p>
<ul>
<li><a href="http://www.zachleat.com/Projects/firebugCodeCoverage/FirebugCodeCoverage-0.1.xpi">安装 FirebugCodeCoverage</a></li>
</ul>
<h4>8. <a href="http://sensational-seo.com/">SenSEO</a></h4>
<p style="text-align: center;"><img alt="SenSEO" src="http://blog.artskin.cn/wp-content/uploads/2010/01/senseo.png" /></p>
<p>SenSEO是分析网页并指出如何做白帽搜索引擎优化（<a target="_blank" href="http://www.redbots.cn/tag/seo">SEO</a>）的Firebug扩展。核查元标记的正确使用，存在的题目，标题，和其他相关的最佳搜索引擎优化标准。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/11905/addon-11905-latest.xpi">安装</a><a href="http://sensational-seo.com/download/senseo.xpi"> SenSEO</a></li>
</ul>
<h4>9. <a href="http://developer.yahoo.com/yslow/">Yahoo! YSlow</a></h4>
<p style="text-align: center;"><img alt="Yahoo! YSlow" src="http://blog.artskin.cn/wp-content/uploads/2010/01/yslow-firebug.gif"/></p>
<p>YSlow评价网页的性能，并建议改善有潜力的地方。 YSlow是基于YDN的<a href="http://developer.yahoo.com/performance/rules.html">加快网站的</a><a href="http://developer.yahoo.com/performance/rules.html">最佳方法</a>，并给你三个预定义（或用户定义的）规则设定。它有几个有用的功能，如显示的信息和网页组件的资料统计，整合了优化工具，如<a href="http://jslint.com/">JSLint</a> and <a href="http://developer.yahoo.com/yslow/smushit/index.html">Smush.it</a>。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/11905/addon-11905-latest.xpi">安装</a><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/5369/addon-5369-latest.xpi"> YSlow</a></li>
</ul>
<h4>10. <a href="http://robertnyman.com/firefinder/">Firefinder</a></h4>
<p style="text-align: center;"><img alt="Firefinder" src="http://blog.artskin.cn/wp-content/uploads/2010/01/firefinder.jpg"/></p>
<p>Firefinder是按照您输入搜索标准快速查找网页内容中相匹配的CSS或XPath选择符。 Firefinder对测试哪个网页内容受CSS样式规则影响，高亮与查找符合您的搜索的元素非常实用。</p>
<ul>
<li><a href="https://addons.mozilla.org/en-US/firefox/downloads/latest/11905/addon-11905-latest.xpi">安装 Firefinder</a></li>
</ul>
<p>原文链接：<a href="http://sixrevisions.com/web-development/10-useful-firefox-extensions-to-supercharge-firebug/">http://sixrevisions.com/web-development/10-useful-firefox-extensions-to-supercharge-firebug/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.artcss.com/archives/472.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

