俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

js调试方法

JavaScript在浏览器上的调试技巧

2016/11/04 · JavaScript · 8 评论 · 调试

本文作者: 伯乐在线 - TGCode 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

在网站开发中,我们难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript脚本找出问题,然后去修改代码。那我们如何去调试呢?

最简单的就是alert()方法,不过,alert 弹出窗口会中断程序, 而且如果要在循环中显示信息,就会弹出多个弹窗,你不点击alert框的确定按钮下一个alert就不会出现,另外alert 显示对象永远显示为[object ],所以alert()方法只适合小程序。

第二种是断点调试

1.在源码上使用debugger

例如:

JavaScript

function check(){ var i=0; debugger; alert(1); } check();

1
2
3
4
5
6
function check(){
var i=0;
debugger;
alert(1);
}
check();

图片 1

可以看到,程序会运行到debugger处就会停住,并没有执行后面,你可以按F8来继续执行。

2. 直接在浏览器上断点,同样是打开控制台的source,找到你要调试的代码,然后点击你要断点的那一行代码的左侧行码处,如下图:

图片 2

第三种就是我最喜欢的console

最常用的就是console.log(),在控制台中打印信息,它可以接受任何字符串、数字和JavaScript对象,也可以接受换行符n以及制表符t。

JavaScript

var i=0; var name="我是console"; var json={ "key":"console" }; console.log(i); console.log(name); console.log(json);

1
2
3
4
5
6
7
8
var i=0;
var name="我是console";
var json={
"key":"console"
};
console.log(i);
console.log(name);
console.log(json);

图片 3

你可以按红箭头所指的按钮清除控制台,也可以直接用console.clear()清除。

当然console可不止这一个方法,它还有:

console.info 用于输出提示性信息

console.error用于输出错误信息

console.warn用于输出警示信息

console.debug用于输出调试信息

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”); console.debug(“调试信息”);

图片 4

console对象的上面5种方法,都可以使用printf风格的占位符。不过,占位符的种类比较少,只支持字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)四种。

JavaScript

console.log("%s年",2016); console.log("%d年%d月",2016,6); console.log("%f",3.1415); console.log("%o",json);

1
2
3
4
console.log("%s年",2016);
console.log("%d年%d月",2016,6);
console.log("%f",3.1415);
console.log("%o",json);

图片 5

如果你觉得上面的输出信息太单调了,我们还可以这样:

JavaScript

console.log("%c自定义样式","font-size:20px;color:green"); console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

1
2
console.log("%c自定义样式","font-size:20px;color:green");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

图片 6

console.dirxml用来显示网页的某个节点(node)所包含的html/xml代码

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> <script> var table=document.querySelector("table"); console.dirxml(table); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
<script>
var table=document.querySelector("table");
console.dirxml(table);
</script>

图片 7

console.group输出一组信息的开头

console.groupEnd结束一组输出信息

JavaScript

console.group("start"); console.log("子项"); console.groupEnd("end"); console.log("aa");

1
2
3
4
console.group("start");
console.log("子项");
console.groupEnd("end");
console.log("aa");

图片 8

console.assert对输入的表达式进行断言,只有表达式为false时,才输出相应的信息到控制台

JavaScript

var isTrue=true; console.assert(isTrue,"我是错误"); isTrue=false; console.assert(isTrue,"我是错误2");

1
2
3
4
var isTrue=true;
console.assert(isTrue,"我是错误");
isTrue=false;
console.assert(isTrue,"我是错误2");

图片 9

console.count  当你想统计代码被执行的次数,这个方法很有用

JavaScript

function play(){ console.count("执行次数:"); } play(); play(); play();

1
2
3
4
5
6
function play(){
     console.count("执行次数:");
}
play();
play();
play();

图片 10

console.dir  直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </table> var table=document.querySelector("table"); console.dir(table);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>
 
var table=document.querySelector("table");
console.dir(table);

console.time 计时开始

console.timeEnd 计时结束

JavaScript

console.time("array"); var a=0; for(var i=0;i<100000;i++){ a += i; } console.timeEnd("array");

1
2
3
4
5
6
console.time("array");
var a=0;
for(var i=0;i<100000;i++){
a += i;
}
console.timeEnd("array");

图片 11

console.profile和console.profileEnd配合一起使用来查看CPU使用相关信息

console.timeLine和console.timeLineEnd配合一起记录一段时间轴

打赏支持我写出更多好文章,谢谢!

打赏作者

console.log(json);

关于作者:TGCode

图片 12

路途虽远,无所畏 个人主页 · 我的文章 · 9 ·    

图片 13

var i=0;

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 14 图片 15

2 赞 9 收藏 8 评论

console.log("%c自定义样式","font-size:20px;color:green");

play();

for(var i=0;i<100000;i++){

var a=0;

你可以按红箭头所指的按钮清除控制台,也可以直接用console.clear()清除。

console.log(name);

最常用的就是console.log(),在控制台中打印信息,它可以接受任何字符串、数字和JavaScript对象,也可以接受换行符n以及制表符t。

console.timeLine和console.timeLineEnd配合一起记录一段时间轴

console.timeEnd 计时结束

debugger;

如果你觉得上面的输出信息太单调了,我们还可以这样:

console.log(i);

当然console可不止这一个方法,它还有:

console.groupEnd("end");

console.warn用于输出警示信息

function check(){

}

console.time("array");

alert(1);

在源码上使用debugger

console.log("%o",json);

在网站开发中,我们难免会遇到各种bug,这时,我们就需要去调试我们的JavaScript脚本找出问题,然后去修改代码。那我们如何去调试呢?

可以看到,程序会运行到debugger处就会停住,并没有执行后面,你可以按F8来继续执行。

var isTrue=true;

play();

console.info 用于输出提示性信息

play();

console.count  当你想统计代码被执行的次数,这个方法很有用

console.log("%c我是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red");

console.dir  直接将该DOM结点以DOM树的结构进行输出,可以详细查对象的方法发展等等

var table=document.querySelector("table");

console.dirxml(table);

var table=document.querySelector("table");

console.log("%d年%d月",2016,6);

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:js调试方法

您可能还会对下面的文章感兴趣: