<?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>Thinking for Fun &#187; Firefox</title>
	<atom:link href="http://jsfox.cn/blog/category/firefox/feed" rel="self" type="application/rss+xml" />
	<link>http://jsfox.cn/blog</link>
	<description>网络 ● 生活 ● 技术</description>
	<lastBuildDate>Tue, 01 Jun 2010 01:52:41 +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>JavaScript调试技巧之：快速定位</title>
		<link>http://jsfox.cn/blog/javascript/debug-js-quick-locate.html</link>
		<comments>http://jsfox.cn/blog/javascript/debug-js-quick-locate.html#comments</comments>
		<pubDate>Thu, 23 Jul 2009 16:48:03 +0000</pubDate>
		<dc:creator>yongbin</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Debug]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[IE8]]></category>
		<category><![CDATA[Opera]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[调试]]></category>

		<guid isPermaLink="false">http://jsfox.cn/blog/?p=22</guid>
		<description><![CDATA[赶紧总结一下JavaScript的调试技巧，这次首先是“快速定位”篇。
快速定位，其实就是快速定位程序的错误，所以也算是调试。这个在实际的码代码时往往比较实用。大多数情况下，你的js代码不多（少于1000行），只要能迅速发现代码的错误，往往不用复杂的调试。关于常用的快速定位方法，我总结了一下几点，欢迎大家补充。
1. 使用alert
alert其实比较实用。本地调试中，在合适的位置写alert，打出来一些变量，虽然比较土，但是往往事半功倍！另外有一个alert技巧，想看看一个对象中的属性和它的值吗，试试这个：
var str = "", i;
for (i in obj) {
  str += i + ": " +obj[i] + "\n";
}
alert(str);
2. 使用地址栏

使用地址栏，输入javascript: doSomething()，可以在Runtime时输出或者执行一些代码。输出东西时也使用alert，例如在地址栏输入：
javascript: alert(document.getElementsByTagName("a").length);
可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数，可以输入例如：
javascript: deleteFirstChildNode();
3. 错误查看器
最快捷的错误查看器当属Firefox的错误控制台，快捷键ctrl+shift+j。在你觉得脚本执行不正常时，首先按一下这个快捷键，往往能立刻知道哪里出了问题，并且点一下就能到问题脚本所在的位置，非常方便，强烈推荐！
4. 用浏览器的扩展或插件查看错误
这个话题比较大，一时说不完，所以先说说用扩展或插件来查看错误。对我来讲，Firebug一般就够用了，比较常见，就不截图了。启用Firebug控制台后，如果页面上js脚本错误，就会立刻在右下角显示出来，点击可以查看错误。有一点需注意，我的Firebug有时会报这个带乱码的错误：
 (¹Õ Location.toString
我一直不清楚这个为什么会乱码，但我知道这个是跨域的错误，比较常见。
其他浏览器的错误查看器，在这里我也简单总结一下：
Chrome：菜单 &#8211; 开发人员 &#8211; JavaScript控制台，下方可以看到类似于Firebug的console，在这里可以看到错误和警告信息。
Opera：菜单 &#8211; 工具 &#8211; 高级 &#8211; Error Console，功能比较强大，可以查看各类错误。
Safari：4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。
IE8：非常不好用，但是也有。开发人员工具 &#8211; Script标签 &#8211; 点击右边的console。在这个console里可以看到错误信息，但是不太友好。
5. console.log
在代码中使用console.log，也就是类似于alert，只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log，还有console.error，console.info等等。详见Firebug的console API。
6. Console
最后正式介绍一下Console，也就是控制台。Life is short, use console！以Firebug的console为例，把几个常用功能介绍总结一下：

查看js对象

输入一个名字，例如window，window对象就会出现在结果中。这时可以点击这个window对象！点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了，方便吧！

查看DOM对象

输入document.getElementById(&#8220;el_id&#8221;)，这时el_id这个元素就会出现在结果中，点击可以看到它的详情，例如看看它当时的HTML代码。

在Runtime执行脚本

输入任何的js代码，立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。
关于这个console，在输入js脚本时，别忘了按tab键进行代码自动补齐哦！代码补齐和提示功能，在Chrome、Safari和Opera里同样有效，IE8就惨点了。Chrome和Safari做的也非常好，大家可以试一下啊。
简而言之，掌握快速定位，可以迅速解决JavaScript开发中的琐碎问题，以上办法中，我的建议是，遇到问题先用错误查看器看一下，不行再使用Console，基本上就能很快定位问题原因了！
]]></description>
			<content:encoded><![CDATA[<p>赶紧总结一下JavaScript的调试技巧，这次首先是“快速定位”篇。</p>
<p>快速定位，其实就是快速定位程序的错误，所以也算是调试。这个在实际的码代码时往往比较实用。大多数情况下，你的js代码不多（少于1000行），只要能迅速发现代码的错误，往往不用复杂的调试。关于常用的快速定位方法，我总结了一下几点，欢迎大家补充。</p>
<p><strong>1. 使用alert</strong></p>
<p>alert其实比较实用。本地调试中，在合适的位置写alert，打出来一些变量，虽然比较土，但是往往事半功倍！另外有一个alert技巧，想看看一个对象中的属性和它的值吗，试试这个：</p>
<pre>var str = "", i;
for (i in obj) {
  str += i + ": " +obj[i] + "\n";
}
alert(str);</pre>
<p><strong>2. 使用地址栏</strong></p>
<p><span id="more-22"></span></p>
<p>使用地址栏，输入javascript: doSomething()，可以在Runtime时输出或者执行一些代码。输出东西时也使用alert，例如在地址栏输入：</p>
<pre>javascript: alert(document.getElementsByTagName("a").length);</pre>
<p>可以输入当前的document下的链接数量。如果想执行已经加载的自定义函数，可以输入例如：</p>
<pre>javascript: deleteFirstChildNode();</pre>
<p><strong>3. 错误查看器</strong></p>
<p>最快捷的错误查看器当属Firefox的错误控制台，快捷键ctrl+shift+j。在你觉得脚本执行不正常时，首先按一下这个快捷键，往往能立刻知道哪里出了问题，并且点一下就能到问题脚本所在的位置，非常方便，强烈推荐！</p>
<p><strong>4. 用浏览器的扩展或插件查看错误</strong></p>
<p>这个话题比较大，一时说不完，所以先说说用扩展或插件来查看错误。对我来讲，Firebug一般就够用了，比较常见，就不截图了。启用Firebug控制台后，如果页面上js脚本错误，就会立刻在右下角显示出来，点击可以查看错误。有一点需注意，我的Firebug有时会报这个带乱码的错误：</p>
<pre> <span style="color: #ff0000;">(¹Õ Location.toString</span></pre>
<p>我一直不清楚这个为什么会乱码，但我知道这个是跨域的错误，比较常见。</p>
<p>其他浏览器的错误查看器，在这里我也简单总结一下：
<a href='http://jsfox.cn/blog/javascript/debug-js-quick-locate.html/attachment/chrome_error_console' title='chrome_error_console'><img width="150" height="132" src="http://jsfox.cn/blog/wp-content/uploads/2009/07/chrome_error_console-150x132.png" class="attachment-thumbnail" alt="Chrome错误控制台" title="chrome_error_console" /></a>
<a href='http://jsfox.cn/blog/javascript/debug-js-quick-locate.html/attachment/ie8_error_console' title='IE8_error_console'><img width="150" height="150" src="http://jsfox.cn/blog/wp-content/uploads/2009/07/IE8_error_console-150x150.png" class="attachment-thumbnail" alt="IE8错误查看器" title="IE8_error_console" /></a>
<a href='http://jsfox.cn/blog/javascript/debug-js-quick-locate.html/attachment/opera_error_console' title='opera_error_console'><img width="150" height="150" src="http://jsfox.cn/blog/wp-content/uploads/2009/07/opera_error_console-150x150.png" class="attachment-thumbnail" alt="Opera错误控制台" title="opera_error_console" /></a>
</p>
<p>Chrome：菜单 &#8211; 开发人员 &#8211; JavaScript控制台，下方可以看到类似于Firebug的console，在这里可以看到错误和警告信息。</p>
<p>Opera：菜单 &#8211; 工具 &#8211; 高级 &#8211; Error Console，功能比较强大，可以查看各类错误。</p>
<p>Safari：4.0版跟Chrome查看方式一样。Chrome/Opera/Safari都可以在Develope Tools里看到错误信息。</p>
<p>IE8：非常不好用，但是也有。开发人员工具 &#8211; Script标签 &#8211; 点击右边的console。在这个console里可以看到错误信息，但是不太友好。</p>
<p><strong>5. console.log</strong></p>
<p>在代码中使用console.log，也就是类似于alert，只不过把想要的信息输出到console里。console对象在Firefox、Chrome、Safari里都可以使用。除了console.log，还有console.error，console.info等等。详见Firebug的<a title="Firebug Console API" href="http://getfirebug.com/console.html" target="_self">console API</a>。</p>
<p><strong>6. Console</strong></p>
<p>最后正式介绍一下Console，也就是控制台。Life is short, use console！以Firebug的console为例，把几个常用功能介绍总结一下：</p>
<ul>
<li>查看js对象</li>
</ul>
<p style="padding-left: 30px;">输入一个名字，例如window，window对象就会出现在结果中。这时可以点击这个window对象！点击以后就可以在DOM标签中查看这个对象的所有属性。那么现在应该能看到window下的全局变量了，方便吧！</p>
<ul>
<li>查看DOM对象</li>
</ul>
<p style="padding-left: 30px;">输入document.getElementById(&#8220;el_id&#8221;)，这时el_id这个元素就会出现在结果中，点击可以看到它的详情，例如看看它当时的HTML代码。</p>
<ul>
<li>在Runtime执行脚本</li>
</ul>
<p style="padding-left: 30px;">输入任何的js代码，立刻执行。这样可以很方便地测试页面上的脚本了。也可以在多行模式中执行输入的js。</p>
<p>关于这个console，在输入js脚本时，别忘了按tab键进行代码自动补齐哦！代码补齐和提示功能，在Chrome、Safari和Opera里同样有效，IE8就惨点了。Chrome和Safari做的也非常好，大家可以试一下啊。</p>
<p>简而言之，掌握快速定位，可以迅速解决JavaScript开发中的琐碎问题，以上办法中，我的建议是，遇到问题先用错误查看器看一下，不行再使用Console，基本上就能很快定位问题原因了！</p>
]]></content:encoded>
			<wfw:commentRss>http://jsfox.cn/blog/javascript/debug-js-quick-locate.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>推荐给Web开发人员的Firefox扩展</title>
		<link>http://jsfox.cn/blog/firefox/firefox-addon-musts-for-web-developers.html</link>
		<comments>http://jsfox.cn/blog/firefox/firefox-addon-musts-for-web-developers.html#comments</comments>
		<pubDate>Fri, 12 Jun 2009 21:34:26 +0000</pubDate>
		<dc:creator>yongbin</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://jsfox.cn/blog/?p=5</guid>
		<description><![CDATA[上次在北京的Open Party上给大家分享了一些Firefox扩展，这些扩展包括Firebug、Webdeveloper、Live HTTP Headers等等，对我来说，没有这些东西就没法干活。所以我再一次地、正式地向大家推荐。
Firebug
用Firefox的人都知道。用Firebug可以查看节点信息，查看网络交互等等。他强大的调试功能在各种浏览器中，算是最好用的。回头有必要的话，我会专门总结一下JavaScript调试经验。
Web Developer
这个工具条包含了非常全面的工具。对于我来说，经常用到的大概是disable cache，View Form Info，Resize，View Frame Source等等。你想用的DOM查看和操作工具，这里基本都有。
MeasureIt

可以随意测量网页上的区域。这个功能虽然单一，但是会给你带来意想不到的方便。在你的网站上，随时随地任意地测量。
HTML Validator
HTML代码的规范性检查。能够快速通知你的网页是不是符合规范。更重要的是，可以在查看源代码页给出所有的警告和错误信息，并给出相应的规范和修改建议。我第一次使用的时候，惊讶地发现，我们的网站上有那么多警告和错误……当然，这些警告大都不用理会，不过这个扩展，当网页由于标签不闭合而在IE6下无法打开时，能大大地派上用场哦。
LinkChecker
我用这个工具检查到新浪女性首页有4个错误链接！当我告诉女性频道编辑时，他们说——老田，千万别把这个工具告诉总编室的人……
Extended Status Bar
很快知道当前页面的加载时间，页面大小，图片数量，等等。非常方便。
JavaScript Debugger
老牌的js调试工具，以前叫做Veckman。功能十分强大。调试起来要比Firebug方便，同时用来调试Firefox扩展也非常不错。不过个人认为速度有点慢。
Obtrusive JavaScript Checker
Obtrusive JavaScript Checker，可以快速找到inline js事件，还有javascript:。为什么要找出来呢，因为JavaScript should be unobtrusive，还可以看a list apart的经典文章Progressive Enhancement with JavaScript。
JSView
JSView能够快速列出当前页面加载的外部js文件和css文件。别看这是一个小功能，它能带来的便利真是无法描述的！
Live HTTP Headers
功能类似于IE下面的HTTP Watch，能够查看HTTP请求和响应。还可以根据需要进行正则过滤，例如过滤掉图片文件，js文件，等等。另外，Tamper Data也挺好用，最近刚发现，哈哈。
好了，就先推荐这么多吧，我的Firefox还装了很多有用的扩展，今天只介绍开发人员可能需要的。欢迎大家交流。
]]></description>
			<content:encoded><![CDATA[<p>上次在北京的Open Party上给大家分享了一些Firefox扩展，这些扩展包括Firebug、Webdeveloper、Live HTTP Headers等等，对我来说，没有这些东西就没法干活。所以我再一次地、正式地向大家推荐。</p>
<p><a title="Firebug" href="http://www.getfirebug.com/" target="_blank">Firebug</a></p>
<p>用Firefox的人都知道。用Firebug可以查看节点信息，查看网络交互等等。他强大的调试功能在各种浏览器中，算是最好用的。回头有必要的话，我会专门总结一下JavaScript调试经验。</p>
<p><a title="Web Developer" href="https://addons.mozilla.org/firefox/addon/60" target="_blank">Web Developer</a></p>
<p>这个工具条包含了非常全面的工具。对于我来说，经常用到的大概是disable cache，View Form Info，Resize，View Frame Source等等。你想用的DOM查看和操作工具，这里基本都有。</p>
<p><a title="MeasureIt" href="https://addons.mozilla.org/en-US/firefox/addon/539" target="_blank">MeasureIt</a></p>
<p><span id="more-5"></span></p>
<p>可以随意测量网页上的区域。这个功能虽然单一，但是会给你带来意想不到的方便。在你的网站上，随时随地任意地测量。</p>
<p><a title="HTML Validator" href="https://addons.mozilla.org/firefox/addon/249" target="_blank">HTML Validator</a></p>
<p>HTML代码的规范性检查。能够快速通知你的网页是不是符合规范。更重要的是，可以在查看源代码页给出所有的警告和错误信息，并给出相应的规范和修改建议。我第一次使用的时候，惊讶地发现，我们的网站上有那么多警告和错误……当然，这些警告大都不用理会，不过这个扩展，当网页由于标签不闭合而在IE6下无法打开时，能大大地派上用场哦。</p>
<p><a title="LinkChecker" href="https://addons.mozilla.org/firefox/addon/532" target="_blank">LinkChecker</a></p>
<p>我用这个工具检查到新浪女性首页有4个错误链接！当我告诉女性频道编辑时，他们说——老田，千万别把这个工具告诉总编室的人……</p>
<p><a title="Extended Status Bar" href="https://addons.mozilla.org/en-US/firefox/addon/1433" target="_blank">Extended Status Bar</a></p>
<p>很快知道当前页面的加载时间，页面大小，图片数量，等等。非常方便。</p>
<p><a title="JavaScript Debugger" href="https://addons.mozilla.org/addon/216" target="_blank">JavaScript Debugger</a></p>
<p>老牌的js调试工具，以前叫做Veckman。功能十分强大。调试起来要比Firebug方便，同时用来调试Firefox扩展也非常不错。不过个人认为速度有点慢。</p>
<p><a title="Obtrusive JavaScript Checker" href="https://addons.mozilla.org/en-US/firefox/addon/9505" target="_blank">Obtrusive JavaScript Checker</a></p>
<p>Obtrusive JavaScript Checker，可以快速找到inline js事件，还有javascript:。为什么要找出来呢，因为JavaScript should be unobtrusive，还可以看a list apart的经典文章Progressive Enhancement with JavaScript。</p>
<p><a title="JSView" href="https://addons.mozilla.org/en-US/firefox/addon/2076" target="_blank">JSView</a></p>
<p>JSView能够快速列出当前页面加载的外部js文件和css文件。别看这是一个小功能，它能带来的便利真是无法描述的！</p>
<p><a title="Live HTTP Headers" href="https://addons.mozilla.org/en-US/firefox/addon/3829" target="_blank">Live HTTP Headers</a></p>
<p>功能类似于IE下面的HTTP Watch，能够查看HTTP请求和响应。还可以根据需要进行正则过滤，例如过滤掉图片文件，js文件，等等。另外，Tamper Data也挺好用，最近刚发现，哈哈。</p>
<p>好了，就先推荐这么多吧，我的Firefox还装了很多有用的扩展，今天只介绍开发人员可能需要的。欢迎大家交流。</p>
]]></content:encoded>
			<wfw:commentRss>http://jsfox.cn/blog/firefox/firefox-addon-musts-for-web-developers.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
