如何调试JS?

JavaScript027

如何调试JS?,第1张

说下几种方法吧:<br>1.用alert 这个最最直观 把你想要的内容弹出来给你看,但是要看哪里 就要在哪里加,比较麻烦<br>2.用firefox 或者chrome浏览器 里面有debug工具的<br>3.如果想用ie来debug的话 记得用ie8 或者以上版本

1、在IE8中设置ActiveX的地方有两处,打开Internet Explorer 8,工具→选项,首先打开安全选项卡,选择自定义级别。2、下拉框到ActiveX控件和插件,在这里可以根据自己的需要设置:设置时注意“对未标记为可安全执行脚本的ActiveX控件初始化并执行”选项,建议设置为“提示”,这样,您在访问学校网站时,弹出提示窗口时,可以单击启用,而对于其他未受信任的网站,应单击拒绝。

3、取消掉“启用内存保护帮助减少联机攻击”这个选项。

如何在ietester下使用firebug

首先,需要说明的是,此firebug并不是firefox下的插件firebug。众所周知,firebug是firefox下的调试利器,但在ie下没有相关的插件,为了在ie下实现firebug功能,所以出了这么一个组件,它是完全用js生成的仿firebug界面。功能当然没有真正的firebug强大,但其操作和firebug很像,界面也像,对于习惯firebug的工程师来说,使用它非常亲切。其官方网站是http://uicss.cn/r.php?hr=http://getfirebug.com/lite.html

有一点很让人郁闷的是,官方提供的加载它的方法是给html加载一个<script>标签,引用这段js到页面里去。这个在开发阶段当然是没有问题,但如果是调试已经在线上的页面,比如http://www.sina.com.cn,怎么办呢?有办法能像firefox下的firebug一样随时可以调用吗?

有,一个最简单的办法就是使用油猴。IE下的油猴见:http://www.bhelpuri.net/Trixie/

如果是使用maxthon的话,maxthon也有自己的油猴插件,叫做more scripts,见:http://addons.maxthon.cn/zh_CN/search/all/bW9yZSBzY3JpcHRz

但问题是我们经常需要在ie6,ie7,ie8三个不同版本的ie下进行调试,如果是其中一个版本出现了问题呢?当然,ie6,ie7和ie8的js引擎没啥大区别,主要是指css方面的问题。我们如何调试呢?为了调试ie6,ie7和ie8,我们最常用的软件是ietester,而ietester本身其实也带调试工具DebugBar。用DEbugBar比起ie自带的developer

toolbar最大的好处是它可以运行在不同的内核之上,ie6,7,8都可以进行调试。但DebugBar真的是超级难用!!如果能将ietester的多ie内核功能,结合firebug的易用性,该多好啊!可是ietester下没有油猴。。。

还是有办法的,现在就告诉你我的办法。首先打开ietester的DebugBar,切换到脚本标签,可以看到最下面一栏有个输入框,注释写着"//

Javascript 控制台",这是个类似于firebug的脚本控制台的功能,可以输入js并运行。

我们在这里输入脚本:

=============================================

var s = document.createElement("script")

s.src =

'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'

s.type="text/javascript"

if(document.all){

s.onreadystatechange = function(){

if(this.readyState == "loaded" ||

this.readyState == "complete"){

alert("loaded success in ie")

}

}

} else {

s.onload = function(){

alert("load

success")

}

}

document.body.appendChild(s)

================================================

这里的思路是动态创建一个script标签,然后监听它的onload事件,当它加载完成时,会alert一下加载成功信息。运行脚本,等到弹出"loaded

success in

ie"后,表示我们的firebug组件的脚本已经加载进来了。但此时,firebug的界面并没有出现!别着急,我们将输入框中的代码清除掉,再输入如下代码:

==================

firebug.init()

==================

运行它,过一会儿,就会看到firebug的界面出现了!我用这个方法成功在htttp://www.sina.com.cn调出了firebug,如截图所示:

ok,ietester下我们已经可以使用firebug了。接下来,我们看看不同版本ie内核下的firebug能不能按我们预期的那样,在不同内核下真实显示当前的信息。

写了个小demo,如下:

=======================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>阿当制作</title>

<meta

http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

</head>

<body>

<style

type="text/css">

#test{padding:20pxbackground:green*background:blue_background:yellow}

</style>

<div

id="test">hello world</div>

</body>

</html>

=======================================

定义了一个id为test的div,用css

hack让它在ie6,7,8下背景色分别为yellow,blue,green。然后,看看在不同内核版本下firebug会如何显示当前的样式信息呢?

哈哈,很顺利。大功告成 ^0^。