易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表分类:Javascript

如何调试JS错误

Submitted by gouki on 2010, August 6, 8:36 AM

做网页开发的时候不可避免会用到JS，当然更不可避免的就会遇到JS错误。当你打开网页时，IE左下角的感叹号是不是让你很郁闷？怎么调试就成了必修课了。

一般来说，IE的出错信息还是能够基本定位到代码中，FF的相对定位的就更准确一些。只是有时候IE报错为0行或者N行（这个N超出了页面行数）时，就比较让人郁闷。而更头疼的是，如果这个代码在FF完全正常，那真是想死的心都有了。

IE下面，可能更多的时候还是利用微软自己提供的工具来进行查错：ms script debugger，只是知道的人很少，用的人更少。现在firebug lite已经登录IE平台（其实也不算是登录，只是加载firebug lite类库而已。不过，这已经能解决大部分问题了）。FF下面嘛，那就主推firebug，随着firebug的流行，一些附加的东西都有了，如firephp,firecookie,eventbug等插件也越来越让人离不开它。safari和chrome这些基于webkit的浏览器。也都有着自带的js调试工具，可用性我就不太清楚了。没用过，更多的时候只保证IE和FF正常就OK了。webkit虽然份额随着国内所谓双核浏览器的开发而增长的较快，但真正的使用者还仅限于那一小撮人群而已。

于是，这，又成了firebug等的天下（IE8已经自带调试工具，快捷键与firebug一样，界面差不多）。

不废话，下面是我转贴的文章，介绍了一些常见的调试方法，其实也不能算是调试，也可以说是代码的一些写法罢了。【略做整理】

A 使用alert() 和document.write() 方法监视变量值
如果要中断代码的运行，监视变量的值，则使用alert() 方法；
如果需要查看的值很多，则使用document.write() 方法，避免反复单击“确定”按钮；

B 使用window.onerror 事件
当页面出现异常时，onerror 事件会在window 对象上触发。它能在一定程度上告诉开发者相关的错误信息。
示例：

JavaScript代码

<script type="text/javascript">
function myerror(_message,_url,_line)
{
alert("错误信息：" + _message
+"\n错误的URI：" + _url
+"\n错误的行数：" + _line
);
return true; //屏蔽系统的事件
}
//绑定错误事件
window.onerror = myerror;
//触发错误示例：
window,onload = test;
</script>

注意：在IE 中，触发error 事件后，正常的代码会继续运行，所有的变量和数据都会保存下来，在其onerror 事件处理方法中可以正常访问到；而在Firefox 中，触发error 事件后，一切都结束，所有的变量和数据都将被销毁。

C 使用 try...catch 语句找错误
示例：

JavaScript代码

<script type="text/javascript">
try
{
alert(触发异常);
}
catch (_ex) //可以省略“_ex”参数
{
var err = "错误信息";
for (var i in _ex)
{
err += "\n参数名：" + i
+ "\t参数值：" + _ex[i];
}
alert(err); //打印错误
}
finally //finally 可以被省略...
{
alert("finally 总是会运行");
}
</script>

注意：try...catch 并不能很好的处理JavaScript 的语法错误。
示例：

JavaScript代码

<script type="text/javascript">
try
{
alert("触发语法错误")); //多了半边“)”
}
catch (_ex) //可以省略_ex参数
{
var err = "错误信息";
for (var i in _ex)
{
err += "\n参数名：" + i
+ "\t参数值：" + _ex[i];
}
alert(err); //打印错误
}
</script>

该示例并没有进入catch 块中。

D 使用相关调试器
在IE 和Firefox 浏览器中，可以使用相关的调试器或插件对JavaScript 进行调试。

● 在Firefox 浏览器中，可以使用其自带的“错误控制台”。操作步骤如下：
      打开Firefox 浏览器 → 在菜单条“工具”中 → 选择“错误控制台”即可。
     在没有其他插件的情况下，其自带的“错误控制台”是一个非常不错的选择。

另外，在Firefox 浏览器中，还有一些很不错的调试器，如：Venkman、Firebug 等。
         Venkman 调试器安装后，可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“JavaScript Debugger ”命令启用；
         Firebug 调试器安装后，可以在Firefox 浏览器 → 在菜单条“工具”中 → 选择“Firebug”→ 选择“打开 Firebug”即可；

● 在IE 浏览器中，可以使用 Microsoft Script Debugger 调试器
       Microsoft Script Debugger 是微软随IE 4 一同发布的一个IE插件，可以从微软的官方网站上免费下载。
       下载安装以后，必须将IE 浏览器的调试选项打开才能使用。操作步骤如下：
       1>   打开IE 浏览器 → 选择菜单栏的“工具”→ “Internet 选项”命令 → “高级”选项卡 → 将“禁用脚本调试（Internet Explorer ）”复选框中的勾去掉即可。
       2>   当IE 浏览器正在浏览页面时，运行Microsoft Script Debugger 调试器工具即可进行调试。
       在Microsoft Script Debugger 调试器的 Running Document 面板中选择开启的页面文件（只读），然后按F9 可以设置断点调试。另外，其Command Window 面板也是一个很有用的功能，它能在代码断点停止时，在其中输入变量名并回车，便可看到此时变量的值；Command Window 面板甚至可以接受简单的JavaScript 命令。但Microsoft Script Debugger 调试器自身还存在一个bug 问题。

原文出自：http://www.cnblogs.com/xugang/archive/2010/08/05/1793392.html

Tags: javascript, error, debug

Javascript | 评论:1 | 阅读:30398

为之漫笔：07~10精华文章

Submitted by gouki on 2010, August 3, 8:09 AM

突然间在google reader里看到为之漫笔的订阅变成hello world，很是惊讶，后来才知道，是他的站点所在服务器硬盘坏了。这，确实是一件很痛苦的事情。不过所幸，他还是恢复了数据，然后他又选择了出国。额，好象越来越多的人选择了出国。

他在恢复数据后，对原来的文章进行了整理，把近年来一些优秀的文章提炼了出来，不过，目前还不是特别多：http://www.cn-cuckoo.com/the-good-parts-of-my-blogs-from-2007-to-2010，但已经有几篇了。

他是这么说的：【除了修补过往旧文，我还计划挑选整理一个《精华文章汇总》的页面，把那些价值相对较大的文章从“垃圾”堆里挑出来，摆在明面上。这样就不会过多地浪费读者诸君的宝贵时间了。现在，这个页面~~的链接~~已经有了，今后还将不断充实：2007－2010年精华文章汇总。】

所以，又可以期待了。

其实，挺佩服李老师的，他认为：【然而，眼瞅着后台那些十根手指头都数不过来的Ping链接，我清醒地意识到还有不少站点在引用和转载我以前的文章。如果这些引用都变成了空链接，不仅我面子上不好看，也会给不知道有多少读者学习深造带来极大不便。毕竟，在这个网络时代，作为其中的一个结点，我和这个站点都已经不再孤立存在了，而是与千千万万的其他结点建立并保持了千丝万缕的联系。如果数据真的丢了，可让我怎么面对那些素未谋面，而将来又有可能谋面但因此又可能永远也不会再谋面的花朵一样灿烂的脸孔呢？想到这里，我原来如释重负的感觉一下子无影无踪了，一种因失职而难逃其咎的负罪感油然而生。】

我一直不敢換我的博客，其实也有类似的考虑。唉。。。当然我的外链可没有李老师那么多。

Tags: 为之漫笔, javascript

Javascript | 评论:0 | 阅读:19164

jQuery：TAB切换

Submitted by gouki on 2010, August 2, 2:51 PM

没有什么特别的东西。主要就是有了一个延迟，但效果不是特别好。。将就点了。

JavaScript代码

$.fn.gTab = function( opts ){
var options = {
'timer':0, //0.005秒
'hover':'',
'target':'',
'autoswitch':false,
'addClass':'',
'removeClass':''
};
var self = $(this);
opts = $.extend(true, {},options,opts || {});
if(!opts.target){
alert('对不起，请设置目标对象');
return ;
}
if(!opts.hover){
opts.hover = self;
}
var hoverIntervalFunc = function(index){
return setInterval(function(){
$(opts.target+':not(eq('+index+'))').hide();
$(opts.hover+':not(eq('+index+'))').removeClass(opts.addClass).addClass(opts.removeClass);
$(opts.target+':eq('+index+')').show();
$(opts.hover+':eq('+index+')').removeClass(opts.removeClass).addClass(opts.addClass);
},opts.timer);
}
$(this).hover(
function(){
var index = self.index(this);
cId = hoverIntervalFunc(index);
},
function(){
clearInterval(cId);
}
)
}

花了半小时写的。所以效果一些都没有特别的考虑。只考虑实现就完事了。。。象很多都是用的:eq和:not(:eq)，事实上siblings()已经实现这个功能，但当时写的时候没翻到这个函数，就直接用:not(:eq)来解决了。

Tags: jquery, tab

Javascript | 评论:0 | 阅读:20086

jQuery 层隐藏

Submitted by gouki on 2010, July 30, 5:36 PM

jQuery做二级菜单（模仿京东），非常方便，只需要hover就行了。
正好完成一个mouseover和mouseout就实现这个功能了，但是，如果菜单需要延迟关闭或者通过其他形式来关闭就有点不方便了。

现在网上的很多现成的，都是把子菜单层放在mouseover对象的层内。所以mouseover,mouseout的时候就不用担心了，只要over的时候show,out的时候hide就成了。

不过，我昨天接到的是分别处于两个不同的div，两个div是并级关系。。于是就写了以下代码。

JavaScript代码

$(function(){
$('.first_div li').hover(
function(){
var selId = $(this).index('.first_div li');
var _self = this;
t = setTimeout(function(){
$('img',_self).attr('src',$('img',_self).attr('src').replace('normal','lightened'));
$('#second_div').show();
$('.sub1_div:eq('+selId+')').show().siblings().hide();
},250)
},
function(){
$('img',this).attr('src',$('img',this).attr('src').replace('lightened','normal'));
//$('#second_div').hide()
clearTimeout(t);
}
);
$('.absLeftMenu').mouseout(function(e){
var e = e || window.event, relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != this)
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget)
$('#second_div').hide();
});
$('.sub1_div li').mouseover(
function(){
$('#sub2_div').show().html($(this).children('ul').html());
}
)
})