javascript调试工具
2015-09-30 15:36
405 查看
转载的文章集合
javascript调试工具
麻烦，而且效果很不好，鄙人一直苦于寻找一个很好的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
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, 右边输入html, 点击Render就可以看到效果了
一、什么是 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输出控制台，呵呵，你发现了什么？百度的招聘启事：
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输出控制台，呵呵，你发现了什么？百度的招聘启事：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程（二）
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象