>

js调试方法,JavaScript在浏览器上的调试技巧

- 编辑:至尊游戏网站 -

js调试方法,JavaScript在浏览器上的调试技巧

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(卡塔尔(英语:State of Qatar)覆灭。

当然console可不仅仅这多个主意,它还可能有:

console.info 用于出口提醒性音讯

console.error用于出口错误音讯

console.warn用于出口警告消息

console.debug用于出口调节和测量检验音信

console.info(“提示”卡塔尔(英语:State of Qatar); console.error(“报错了”卡塔尔(قطر‎; console.warn(“警报”卡塔尔(قطر‎; console.debug(“调节和测量试验音讯”卡塔尔(英语:State of Qatar);

图片 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"卡塔尔(英语:State of Qatar);

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

图片 9

console.count  当您想总计代码被推行的次数,那么些办法很有用

JavaScript

function play(卡塔尔(قطر‎{ console.count("实施次数:"卡塔尔(英语:State of Qatar); } play(卡塔尔(英语:State of Qatar); play(卡塔尔(英语:State of Qatar); play(卡塔尔(英语:State of Qatar);

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合作协作记录意气风发段时间轴

打赏辅助自个儿写出更加多好随笔,谢谢!

打赏我

在网址开辟中,大家难免会蒙受各类bug,当时,大家就须求去调度大家的JavaScript脚本找寻标题,然后去修改代码。那我们怎么去调解呢?

打赏援救我写出更加多好作品,谢谢!

任选大器晚成种支付办法

图片 12 图片 13

2 赞 9 收藏 8 评论

最简易的正是alert(卡塔尔方法,不过,alert 弹出窗口会中断程序, 并且就算要在循环中展现新闻,就能够弹出四个弹窗,你不点击alert框的显著开关下三个alert就不会师世,其余alert 突显对象永久显示为[object ],所以alert(卡塔尔(英语:State of Qatar)方法只符合小程序。

至于作者:TGCode

图片 14

路途虽远,无所畏 个人主页 · 笔者的篇章 · 9 ·    

图片 15

其次种是断点调节和测验

在源码上应用debugger

例如:

function check(){

var i=0;

debugger;

alert(1);

}

check();

能够看来,程序会运作到debugger处就能够停住,并未实行前面,你能够按F8来继续实施。

2. 直接在浏览器上断点,相仿是张开调节台的source,找到您要调整的代码,然后点击你要断点的那意气风发行代码的左手行码处

其二种正是本人最快乐的console。

最常用的便是console.log(卡塔尔,在调节高雄打字与印刷音讯,它能够选用任何字符串、数字和JavaScript对象,也能够选用换行符n以致制表符t。

var i=0;

var name="我是console";

var json={

"key":"console"

};

console.log(i);

console.log(name);

console.log(json);

您可以按红箭头所指的开关清除调节台,也足以直接用console.clear(卡塔尔(英语:State of Qatar)消逝。

道理当然是那样的console可不仅仅那二个方法,它还只怕有:

console.info 用于出口提醒性音信

console.error用于出口错误音讯

console.warn用于出口警告音讯

console.debug用于出口调试音信

console.info(“提示”卡塔尔(英语:State of Qatar); console.error(“报错了”卡塔尔(英语:State of Qatar); console.warn(“警示”卡塔尔(英语:State of Qatar); console.debug(“调试音讯”卡塔尔(قطر‎;

console对象的地点5种办法,都能够动用printf风格的占位符。可是,占位符的门类相当少,只辅助字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)三种。

console.log("%s年",2016);

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

console.log("%f",3.1415);

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

假诺你感到上面包车型地铁出口音信太干燥了,大家还是可以够如此:

console.log("%c自定义样式","font-size:20px;color:green"卡塔尔(قطر‎;

console.log("%c小编是%c自定义样式","font-size:20px;color:green","font-weight:bold;color:red"卡塔尔(قطر‎;

console.dirxml用来展现网页的某些节点(node)所包罗的html/xml代码

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

console.dirxml(table);

console.group输出风度翩翩组新闻的启幕

console.groupEnd截至一组输出消息

console.group("start");

console.log("子项");

console.groupEnd("end");

console.log("aa");

console.assert对输入的表明式进行预感,独有表达式为false时,才输出相应的音讯到调节台

var isTrue=true;

console.assert(isTrue,"笔者是大谬不然"卡塔尔国;

isTrue=false;

console.assert(isTrue,"小编是错误2"卡塔尔(英语:State of Qatar);

console.count  当您想总括代码被实行的次数,这些艺术很有用

function play(){

    console.count("施行次数:"卡塔尔(英语:State of Qatar);

}

play();

play();

play();

console.dir  直接将该DOM结点以DOM树的构造实行输出,能够详细查对象的艺术发展等等

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

console.dir(table);

console.time 计时发轫

console.timeEnd 计时截至

console.time("array");

var a=0;

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

a += i;

}

console.timeEnd("array");

console.profile和console.profileEnd协作合作使用来查阅CPU使用有关音讯

console.timeLine和console.timeLineEnd同盟合作记录风流倜傥段时间轴

本文由硬件数码发布,转载请注明来源:js调试方法,JavaScript在浏览器上的调试技巧