转载的文章集合
javascript调试工具
一.Companion.JS
js程序的调试是相当郁闷的,因为首先这种语言语法比较灵活,它是一种弱类型的脚本语言,很多错误是无法控制的,这些不谈,最痛苦的是没有什么好的调试工具,现在的情况比以前稍好,在Firefox下还有firebug,这的确是一个不错的js调试工具,但在IE下使用就很麻烦,而且效果很不好,鄙人一直苦于寻找一个很好的IE下的js调试工具,能够自动捕获错误,并定位位置和原因,没想到今天竟在无意中寻找到了这么个好工具,不敢私藏,共享出来,希望能为各位web开发者带来方便 这个工具的名字叫Companion.JS,请注意,这
可不是一个js文件,而是一个名字,它是作为ie的插件来安装使用的,而且需要结合Microsoft Script Debugger使用,通过安装这个工具,但页面出现错误时会在左上角弹出一个小错误提示,点击会在IE下面显示出一个错误控制台,就如FF下的 firebug控制台一样。错误
信息提示很详细。 如下是官网的一个错误提示示例图:点击在新窗口中浏览此图片
官网地址:http://www.my-debugbar.com/wiki/CompanionJS/HomePage
具体使用方法为:
1、先下载Companion.JS安装文件,然后安装。
2、下载安装Microsoft Script Debugger,如果您的机器已经安装过了就可以免过这一步。
3、打开IE菜单“工具”--“Internet选项”--“高级”,找到“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(在Internet Explorer之外)”,将两个选项前面的对钩都去掉,然后重启IE。
4、在Ie中输入:http://www.my-debugbar.com/wiki/uploads/CompanionJS/dummy.htm,然后点击click me链接,如果左上角弹出一个小错误提示或下面控制台出现了错误信息提示,就说明您已经安装成功了。 提示:Microsoft Script Debugger 下载 Microsoft Script
Debugger 有两个下载版本可用,请按您的操作系统选择相应的下载版本。 - dbg10chs.exe 需要 Microsoft Windows 98 或 Millennium Edition (Me) - scd10chs.exe 需要 Windows XP、2000 或 NT 4.0。
dbg10chs.exe: http://download.microsoft.com/download/winscript56/Install/1.0/W9XMe/CN/dbg10chs.exe
scd10chs.exe: http://download.microsoft.com/download/winscript56/Install/1.0/W9XMe/CN/scd10chs.exe
二.10个基于浏览器的JavaScript调试工具分享
调试Javascript可能是web开发中最让人郁闷的事情,这里是10款我们精选的基于浏览器的JS在线调试工具,感兴趣的朋友可以参考下,或许对你有所帮助
1.PastebinPastebin是一个协作式的调试工具,帮助你在IRC,IM或者消息版上对话来分享和修改代码片段1.jpg
2.JSON Formatter and ValidatorJSON格式化工具用来帮助打来调试JSON。因为JSON数据格式经常没有换行,可能非常难于阅读。这个工具可以帮助你解决这个问题2.jpg
3.JS Bin – Collaborative JavaScript Debugging这个工具类似于jsfiddle,可以帮助大家来在线分享和协作调试JS和CSS代码片段, 你不需要关注上下文。它允许你编辑和测试JS和HTML。3.jpg
Browser-based Debugging Tools
4.Blackbird JavaScript Debug Helperalert()可能是大家使用比较多的调试手段。blackbird提供了一个样式化的console来帮助大家记录,查看和过滤js信息,很大程度帮助开发人员避免处理程序的时候被alert中止,使得分析更加流畅4.jpg
5.JavaScript ShellJS和DOM的命令行界面5.jpg
6.JSDT – JavaScript Debug ToolkitJSDT是一个可以在IE,FF,Safari,Chrome,Opera,Mobile IE中用来debug javascript的工具。能在所有支持AJAX的浏览器中使用6.jpg
7.CJS – Companion.JS JavaScript Debugger一个IE上Javascript的debugger。详细报告JS错误,并且拥有类似firebug的console API特性7.jpg
8.DebugBar – IE Extension for Web Developers以前文章中有介绍过这个工具,可以帮助你查看DOM tree并且修改标签属性和CSS属性,很方便的来查看及其debug JS方法8.jpg
9.Opera Dragonfly一个Opera browser的跨设备及其平台的debugging环境 ,检查和编辑CSS和DOM,并且可以查看相关错误9.jpg
10.Venkman JavaScript DebuggerVenkman是Mozilla的JS debugger代码名字 。主要为基于Mozilla的浏览器提供强大的JS调试环境
三. js在线调试工具
http://jsbin.com
这个功能比较简单, 左边输入js, 右边输入html, 点击Render就可以看到效果了
四. js调试控制台使用技巧
目录:
一、什么是 Console
二 、什么浏览器支持 Console
三、为什么不直接使用 alert 或自己写的 log
四、console.log(object[,object,.....])
五、console.debug,info,warn,error
六、console.assert(expression[, object, ...])
七、console.clear()
八、console.dirxml(node)
九、console.trace()
十、console.group(object[, object, ...]), groupCollapsed, groupEnd
十一、console.time(name)/console.timeEnd(name)
十二、console.profile(name)/console.profileEnd()
十三、console.count([title])
十四、console.table(data)
十五、console.dir(function)
十五、tab键代码补全
十五、百度首页的彩蛋!
一 什么是 Console
Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。
二 什么浏览器支持 Console
Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 持不好。比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显示 [Object,Object],而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar,但也
不支持 console。Safari、Opera 都支持 Console,但使用上都没有 FireBug和 Chrome 的方便。 现在firebug推出了 firebuglite工具,可以让所有浏览器都支持Console功能,而且使用上和FireBug 几乎一样。详见http://getfirebug.com/firebuglite
三 为什么不直接使用 alert 或自己写的 log
使用 alert 不是一样可以显示信息,调试程序吗?alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好,看完后面
console 的介绍就知道了。
(部分比较鸡肋的方法没有列出来,用粗蓝标出来的是常用的方法)
四、console.log(object[,object,.....])
Console.log 是最简单输出信息到 console 窗口的方法,支持多个参数,该方法会把 这些参数组合在一起显示
我们首先来写一段倒计时的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>倒计时</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<h1>倒计时:<span>10</span></h1>
<script type="text/javascript">
$(document).ready(function(){
var num = $("h1 span").first();
var i = 9;
var interval = setInterval(function(){
num.text(i);
i--;
console.log("当前数值:"+i);
if(i < 0){
clearInterval(interval);
}
},1000);
});
</script>
</body>
</html>
我们在line:16加入console.log("当前数值:"+i); 那么在控制台中将输出每次i的值:
log 方法第一个参数支持类似 C 语言 printf 字符串替换模式,Log 支持下面几种替换模式:
%s 代替字符串
%d 代替整数
%f 代替浮点值
%o 代替 Object
例如,我们输出一个时间日期:
console.log("%d年%d月%d日",2014,6,25);
2014年06月25日 - 月上西楼 - 月上西楼
比如,我们要把月份“6月”变成“06月”,那么可以使用“%s”,在传入参数的时候要用引号:
console.log("%d年%s月%d日",2014,'06',25);
2014年06月25日 - 月上西楼 - 月上西楼
五 console.debug,info,warn,error
这 4 种方法与 log 方法使用一模一样,只是显示的图标和文字颜色不一样.
2014年06月25日 - 月上西楼 - 月上西楼
六 console.assert(expression[, object, ...])
assert 方法类似于单元测试中的断言,当 expression 表达式为 false 的时候,输出后面的信息,e.g:
2014年06月25日 - 月上西楼 - 月上西楼
注:assert 方法在 firebuglite 不支持,Chrome 和 FireBug 支持
七 console.clear()
该方法清空 console 中的所有信息 (Chrome中不支持)
八 console.dirxml(node)
把 html 元素的html 代码打印出来,等同于log.
九 console.trace()
trace 方法可以查看当前函数的调用堆栈信息,即当前函数是如何调用的
十 console.group(object[, object, ...]), groupCollapsed, groupEnd
这 3 个函数用于把 log 等输出的信息进行分组,方便阅读查看。
groupCollapsed 方法与 group 方法一样,只是显示的分组默认是折叠的.
注意:如果后面不跟console.groupEnd(),则第二个分组默认是第一个分组的子节点。
十一 console.time(name)/console.timeEnd(name)
我们经常需要测试 js 函数的执行时间,可能我们自己写代码在第1 条语句和 最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能,time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器,并显示时间。
下面给个空的for循环,打印0-1000的i的值,用时124.61ms:
2014年06月25日 - 月上西楼 - 月上西楼
十二 console.profile(name)/console.profileEnd()
这组方法用于打开浏览器的分析器,用于分析这组函数之间的 js 执行情况
注:firebuglite 不支持 profile 功能,Chrome 支持 profile,但分析的内容不详。
十三 console.count([title])
count 方法用于统计当前代码被执行过多少次,title 参数可以在次数前面输出额外的标题以帮助阅读。e.g:
$(function(){
test();
test();
test();
test();
});
var test = function(){
console.count("test被执行次数:");
};
在Chrome中的结果,会打印出累积次数:
而在fireBug中只会显示最后一次最终的次数:test被执行次数:4。
十四 console.table(data)
table 方法把data 对象用表格的方式显示出来,这在显示数组或者格式一样的JSON 对象的时候非常有用。
注:table 只支持 FireBug,而且是在 firebug1.6+版本后才有。
此内容将单独开一篇博客,请见《利用console.table()做高级JS调试、Console用法总结(2)》
十五 console.dir(function)
dir方法是把列出对象的所有方法。比如,我们显示console对象下都些什么方法:
console.dir(console);
2014年06月25日 - 月上西楼 - 月上西楼
十五 tab键代码补全
此功能只针对fireBug下,在Chrome下自带代码提示功能
在fireBug下输入co再按Tab键,将会出现代码提示:
2014年06月25日 - 月上西楼 - 月上西楼
而在Chrome下边输入边出现代码提示,很强大。
十五 百度首页的彩蛋!
打开百度首页,查看Javascript输出控制台,呵呵,你发现了什么?百度的招聘启事: