<?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>刘钢的博客 - 我是UED &#187; firebug</title>
	<atom:link href="http://www.iamued.com/tag/firebug/feed" rel="self" type="application/rss+xml" />
	<link>http://www.iamued.com</link>
	<description>http://www.IamUED.com</description>
	<lastBuildDate>Wed, 18 Jan 2012 02:51:35 +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非主流小技巧分享</title>
		<link>http://www.iamued.com/qianduan/750.html</link>
		<comments>http://www.iamued.com/qianduan/750.html#comments</comments>
		<pubDate>Tue, 15 Dec 2009 01:55:04 +0000</pubDate>
		<dc:creator>RichieLiu</dc:creator>
				<category><![CDATA[JavaScript脚本]]></category>
		<category><![CDATA[前端开发]]></category>
		<category><![CDATA[页面实现]]></category>
		<category><![CDATA[firebug]]></category>
		<category><![CDATA[前端]]></category>

		<guid isPermaLink="false">http://www.iamued.com/?p=750</guid>
		<description><![CDATA[快速查看背景图 大部分情况下，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… 快速添加内联样式 DOM树上，可以通过上/下方向键快速导航，左/右方向键折叠。更多资料：Keyboard and Mouse Shortcuts DOM树上选中某个节点，右键，Copy HTML, Copy innerHTML, Delete Element, 通常很有用 双击DOM树上的节点，立刻进入编辑状态 点击Script等Tab的下拉箭头，可以选择性激活功能 Firecookie, YSlow, Jiffy等Firebug的插件只嫌少不嫌多…… 记住非Firefox浏览器下，可以使用Firebug Lite, 虽然不那么好用，但有比没强 最后分享一个最无敌的秘技： 上图曲解了editor，不过这样用更实际。注意默认是有问题的，需要写个cmd代理一下，或者期待UED空帷大侠的独立插件吧。]]></description>
			<content:encoded><![CDATA[<h3>快速查看背景图</h3>
<p>大部分情况下，Firefox自带的右键就搞定了：<br />
<img title="view_bg" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095506NNL.png" alt="view_bg" width="465" height="265" /></p>
<p>但有时，只能通过CSS找到背景图片地址：<br />
<img title="view_bg2" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095507fZJ.png" alt="view_bg2" width="487" height="189" /></p>
<p>通常做法是：<br />
<img title="view_bg3" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095508Lyk.png" alt="view_bg3" width="506" height="128" /><br />
要准确无误的选中URL部分，即辛苦又没成就感……</p>
<p><span id="more-750"></span></p>
<p>秘技：<br />
<img title="view_bg4" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095508HWO.png" alt="view_bg4" width="387" height="118" /><br />
Ctrl + 左键点击URL部分，图片自动就在Firefox新页面中打开了，嘿嘿。</p>
<p>本质：在Firebug的HTML和CSS视图中，任何出现URL的地方，Ctrl+左键点击都能快速打开链接。</p>
<h3>快速更改CSS数值型属性值</h3>
<p>传统的做法是，在CSS视图中，点击属性值，然后修改数值，回车确认，反复重复操作，以查看效果，苦不堪言。</p>
<p>秘技：<br />
<img title="updown" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/0955152Eb.gif" alt="updown" width="252" height="224" /><br />
编辑状态下，按 Up/Down 方向键就可以快速改变数值型属性值了，还可以用 PgUp/PgDn 每次改变10.</p>
<p>缩写的多个属性值，也可以将光标定位到要改变的数值属性处，通过 Up/Down 快速调节：<br />
<img title="updown2" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095515O5s.gif" alt="updown2" width="436" height="228" /></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… 快速添加内联样式</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 title="firebug1" src="http://iamued-wordpress.stor.sinaapp.com/uploads/auto_save_image/2009/12/095516boR.png" alt="firebug1" width="345" height="188" /><br />
上图曲解了editor，不过这样用更实际。注意默认是有问题的，需要写个cmd代理一下，或者期待UED空帷大侠的独立插件吧。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.iamued.com/qianduan/750.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

