首页 > 其他 > 详细

Chrome Console 基本调试方法

时间:2014-02-15 02:16:08      阅读:489      评论:0      收藏:0      [点我收藏+]

还在用alert简单粗暴的调试js,试试Chrome的console工具吧。

打开Chrome按下F12,进入Console选项卡,进入console模式。

1.使用断言调试工具console.assert()
如:

var num = 100;
console.assert(num == 100);

断言失败会报错。

2.调试过多的信息,需要清除屏幕,使用console.clear()

 

3.console.count()记录函数调用次数,对于调试递归函数很有用。如:

 

var func = function (n) { console.count("func call"); if (n == 0) {return 1;} return n * arguments.callee(n - 1);}

func(10);

 

 

可以显示函数调用的次数,如下:

 

bubuko.com,布布扣
func call: 1 VM558:2
func call: 2 VM558:2
func call: 3 VM558:2
func call: 4 VM558:2
func call: 5 VM558:2
func call: 6 VM558:2
func call: 7 VM558:2
func call: 8 VM558:2
func call: 9 VM558:2
func call: 10 VM558:2
func call: 11 VM558:2
3628800
bubuko.com,布布扣

 

4.找到对象的属性,类似Python的dir(model)可以使用console.dir(object),
如:

console.dir(func);

 

5.console.dirxml()简单解析xml

如note.xml文件在浏览器打开以后:

bubuko.com,布布扣
<!-- Edited by XMLSpy -->
<note>
<to id="tove">Tove
<h1>gcc</h1>
</to>

<from>Jani</from>
<heading>Reminder</heading>
<body>Don‘t forget me this weekend!</body>
</note>
bubuko.com,布布扣

 

使用console.dirxml()解析如下:

var x = document.querySelector(‘#tove‘);

console.dirxml(x);

 

6. console.error()记录错误,如:

var funone = function() {if (arguments.length != 2) {console.error("error is %s", "arguments");}}

funone(1);
funone(1, 1, 2);

可以提示自定义错误

 

7. console.group() 为日志组记录一个title,使用console.gourpEnd();结束

 

console.group("This is title");console.error("error is %s", "arguments");console.gourpEnd();

 

8. console.log() 的格式化操作,可以为log增加样式表,需要在string前加%c, 如:

 

console.log("%cThis is %s speaking: %s", "color:green;background:black;", "Crusher", "Hello Chrome");

 

 

9. 测试js代码段运行时间,time()和timeEnd()中参数需要一样,如:

 

console.time(‘ok‘); var s = 1; for (var i = 0; i < 100000; i++) {s += i;} console.timeEnd(‘ok‘);

ok: 19024.000ms

10. console.warn() 用于得到警告信息。和console.log() 类似

 

11. 开始debugger session,在任意代码段中加入debugger; 可以在执行到相关代码附近时跳转到debugger;附近。

 

12. console.trace() 显示调用栈过程,类似Linux的strace,如:

 

bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<script>
function added(a, b) {
    return a + b;
}

function world() {
    console.trace();
    var resworld = added(1 , 2);
    return resworld;
}

function hello() {
    var s = 1;
    console.trace();
    var res = world();
    return s + res;
}
console.trace();
hello();
</script>
</body>
</html>
bubuko.com,布布扣

这些调试方法可以很好的帮大家调试js,不过要记得最后都删除掉就好了。

 

更多方法见官方说明:https://developers.google.com/chrome-developer-tools/docs/console-api#consoletimelabel

Chrome Console 基本调试方法

原文:http://www.cnblogs.com/jaw-crusher/p/3549249.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!