<?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; firebug</title>
	<atom:link href="http://lifesinger.org/blog/tag/firebug/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Mon, 06 Sep 2010 15:05:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Firebug非主流小技巧分享</title>
		<link>http://lifesinger.org/blog/2009/01/firebug-honey-tips/</link>
		<comments>http://lifesinger.org/blog/2009/01/firebug-honey-tips/#comments</comments>
		<pubDate>Thu, 08 Jan 2009 15:02:16 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[工具]]></category>
		<category><![CDATA[firebug]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=938</guid>
		<description><![CDATA[天天用Firebug，常用功能就不多啰嗦，下面是Taobao UED前端们的私家珍藏秘笈： 快速查看背景图 大部分情况下，Firefox自带的右键就搞定了： 但有时，只能通过CSS找到背景图片地址： 通常做法是： 要准确无误的选中URL部分，即辛苦又没成就感…… 秘技： Ctrl + 左键点击URL部分，图片自动就在Firefox新页面中打开了，嘿嘿。 本质：在Firebug的HTML和CSS视图中，任何出现URL的地方，Ctrl+左键点击都能快速打开链接。 快速更改CSS数值型属性值 传统的做法是，在CSS视图中，点击属性值，然后修改数值，回车确认，反复重复操作，以查看效果，苦不堪言。 秘技： 编辑状态下，按 Up/Down 方向键就可以快速改变数值型属性值了，还可以用 PgUp/PgDn 每次改变10. 缩写的多个属性值，也可以将光标定位到要改变的数值属性处，通过 Up/Down 快速调节： 也许是常用的 下面这些，稍微爱折腾Firebug的估计都知道： console.assert, 最简单的js单元测试，更多资料：Firebug Console Object and API CSS视图，双击空白处，快速添加属性 选中某个DOM节点后，在CSS视图空白处右键，Edit Element Style&#8230; 快速添加内联样式 DOM树上，可以通过上/下方向键快速导航，左/右方向键折叠。更多资料：Keyboard and Mouse Shortcuts DOM树上选中某个节点，右键，Copy HTML, Copy innerHTML, Delete Element, 通常很有用 双击DOM树上的节点，立刻进入编辑状态 点击Script等Tab的下拉箭头，可以选择性激活功能 Firecookie, YSlow, Jiffy等Firebug的插件只嫌少不嫌多…… 记住非Firefox浏览器下，可以使用Firebug Lite, 虽然不那么好用，但有比没强 [...]]]></description>
			<content:encoded><![CDATA[<p>天天用Firebug，常用功能就不多啰嗦，下面是Taobao UED前端们的私家珍藏秘笈：</p>
<h3>快速查看背景图</h3>
<p>大部分情况下，Firefox自带的右键就搞定了：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/view_bg.png" alt="view_bg" title="view_bg" width="465" height="265" class="alignnone size-full wp-image-939" /></p>
<p>但有时，只能通过CSS找到背景图片地址：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/view_bg2.png" alt="view_bg2" title="view_bg2" width="487" height="189" class="alignnone size-full wp-image-940" /></p>
<p>通常做法是<span id="more-938"></span>：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/view_bg3.png" alt="view_bg3" title="view_bg3" width="506" height="128" class="alignnone size-full wp-image-941" /><br />
要准确无误的选中URL部分，即辛苦又没成就感……</p>
<p>秘技：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/view_bg4.png" alt="view_bg4" title="view_bg4" width="387" height="118" class="alignnone size-full wp-image-942" /><br />
Ctrl + 左键点击URL部分，图片自动就在Firefox新页面中打开了，嘿嘿。</p>
<p>本质：在Firebug的HTML和CSS视图中，任何出现URL的地方，Ctrl+左键点击都能快速打开链接。</p>
<h3>快速更改CSS数值型属性值</h3>
<p>传统的做法是，在CSS视图中，点击属性值，然后修改数值，回车确认，反复重复操作，以查看效果，苦不堪言。</p>
<p>秘技：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/updown.gif" alt="updown" title="updown" width="252" height="224" class="alignnone size-full wp-image-944" /><br />
编辑状态下，按 Up/Down 方向键就可以快速改变数值型属性值了，还可以用 PgUp/PgDn 每次改变10.</p>
<p>缩写的多个属性值，也可以将光标定位到要改变的数值属性处，通过 Up/Down 快速调节：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/updown2.gif" alt="updown2" title="updown2" width="436" height="228" class="alignnone size-full wp-image-946" /></p>
<h3>也许是常用的</h3>
<p>下面这些，稍微爱折腾Firebug的估计都知道：</p>
<ul>
<li>console.assert, 最简单的js单元测试，更多资料：<a href="http://getfirebug.com/console.html">Firebug Console Object and API</a></li>
<li>CSS视图，双击空白处，快速添加属性</li>
<li>选中某个DOM节点后，在CSS视图空白处右键，Edit Element Style&#8230; 快速添加内联样式</li>
<li>DOM树上，可以通过上/下方向键快速导航，左/右方向键折叠。更多资料：<a href="http://getfirebug.com/keyboard.html">Keyboard and Mouse Shortcuts</a></li>
<li>DOM树上选中某个节点，右键，Copy HTML, Copy innerHTML, Delete Element, 通常很有用</li>
<li>双击DOM树上的节点，立刻进入编辑状态</li>
<li>点击Script等Tab的下拉箭头，可以选择性激活功能</li>
<li>Firecookie, YSlow, Jiffy等Firebug的插件只嫌少不嫌多……</li>
<li>记住非Firefox浏览器下，可以使用Firebug Lite, 虽然不那么好用，但有比没强</li>
</ul>
<p>最后分享一个最无敌的秘技：<br />
<img src="http://lifesinger.org/blog/wp-content/uploads/2009/01/firebug1.png" alt="firebug1" title="firebug1" width="345" height="188" class="alignnone size-full wp-image-948" /><br />
上图曲解了editor，不过这样用更实际。注意默认是有问题的，需要写个cmd代理一下，或者期待UED空帷大侠的独立插件吧。</p>
<p>最最后，如果不缺那么点银子，Donate&#8230;会让中国人更有味！</p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2009/01/firebug-honey-tips/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
	</channel>
</rss>
