JavaScript在浏览器上的调弄整理才干

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

本文笔者: 伯乐在线 –
TGCode
。未经小编许可,禁止转发!
欢迎参加伯乐在线 专栏撰稿人js调节和测试方法,JavaScript在浏览器上的调节和测试技能。。

在网址开拓中,大家难免会遇到种种bug,那时,大家就必要去调解大家的JavaScript脚本寻找难点,然后去修改代码。那我们如何去调治呢?

最简便易行的就是alert()艺术,可是,alert 弹出窗口会中断程序,
而且假若要在循环中展现音讯,就会弹出多个弹窗,你不点击alert框的规定开关下3个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();

金沙注册送58 1

能够看出,程序会运转到debugger处就会停住,并不曾试行前边,你能够按F八来继续施行。

二.
一直在浏览器上断点,同样是开采调整台的source,找到您要调整的代码,然后点击你要断点的那1行代码的右侧行码处,如下图:

金沙注册送58 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);

金沙注册送58 3

你能够按红箭头所指的开关清除调整台,也能够一贯用console.clear()清除。

当然console可不止那3个方法,它还有:

console.info 用于出口指示性音讯

console.error用于出口错误音信

console.warn用于出口警示信息

console.debug用于出口调节和测试消息

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”);
console.debug(“调节和测试音讯”);

金沙注册送58 4

console对象的下边伍种办法,都足以行使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);

金沙注册送58 5

1经您感觉上面的输出新闻太枯燥了,咱们仍可以够这么:

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");

金沙注册送58 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>

金沙注册送58 7

console.group输出1组消息的启幕

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");

金沙注册送58 8

金沙注册送58,console.assert对输入的表明式实行预感,唯有表明式为false时,才输出相应的新闻到调节台

JavaScript

var isTrue=true; console.assert(isTrue,”笔者是一无可取”); isTrue=false;
console.assert(isTrue,”作者是漏洞百出贰”);

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

金沙注册送58 9

console.count  当您想总括代码被实施的次数,那个方法很有用

JavaScript

function play(){ console.count(“实践次数:”); } play(); play(); play();

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

金沙注册送58 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");

金沙注册送58 11

console.profile和console.profileEnd合营共同使用来查阅CPU使用有关消息

console.timeLine和console.timeLineEnd协作协同记录1段时间轴

打赏辅助本人写出越来越多好小说,感激!

打赏小编

在网站开辟中,大家难免会碰到各个bug,那时,大家就须要去调度大家的JavaScript脚本找寻难点,然后去修改代码。那大家如何去调治呢?

Chrome 控制台console的用法

2015/01/12 · JavaScript
· Chrome

原作出处:
ctriphire   

大家都有用过各体系型的浏览器,各类浏览器都有本身的风味,本人拙见,在自个儿用过的浏览器个中,作者是最欢畅Chrome的,因为它对于调试脚本及前端设计调节和测试都有它比其它浏览器有过之而无不比的地方。恐怕大家对console.log会有早晚的询问,心里难免会想调节和测试的时候用alert不就行了,干嘛还要用console.log这么①长串的字符串来代替alert输出新闻吗,上边小编就介绍一些调治的入门技术,让你爱上console.log

先的简短介绍一下chrome的调控台,展开chrome浏览器,按f1二就可以轻巧的展开调节台

金沙注册送58 12

大家能够见到调节台里面有1首诗还有别的音信,倘若想清空调整台,能够点击左上角那么些金沙注册送58 13来清空,当然也足以经过在调整台输入console.clear()来促成清空气调节器整台音讯。如下图所示

金沙注册送58 14

近日只要2个气象,借使1个数组里面有不少的因素,但是你想理解种种成分具体的值,那时候想想假诺您用alert那将是多惨的一件事情,因为alert阻断线程运营,你不点击alert框的分明按键下三个alert就不会并发。

上边大家用console.log来替换,感受一下它的魔力。

金沙注册送58 15

看了地点那张图,是或不是认识到log的强有力之处了,下边大家来探望console里面具体提供了哪些措施能够供我们平日调节和测试时采纳。

金沙注册送58 16

目前调节台方法和属性有:

JavaScript

["$$", "$x", "dir", "dirxml",
"keys", "values", "profile",
"profileEnd", "monitorEvents",
"unmonitorEvents", "inspect", "copy",
"clear", "getEventListeners", "undebug",
"monitor", "unmonitor", "table",
"$0", "$1", "$2", "$3",
"$4", "$_"]

1
[&quot;$$&quot;, &quot;$x&quot;, &quot;dir&quot;, &quot;dirxml&quot;, &quot;keys&quot;, &quot;values&quot;, &quot;profile&quot;, &quot;profileEnd&quot;, &quot;monitorEvents&quot;, &quot;unmonitorEvents&quot;, &quot;inspect&quot;, &quot;copy&quot;, &quot;clear&quot;, &quot;getEventListeners&quot;, &quot;undebug&quot;, &quot;monitor&quot;, &quot;unmonitor&quot;, &quot;table&quot;, &quot;$0&quot;, &quot;$1&quot;, &quot;$2&quot;, &quot;$3&quot;, &quot;$4&quot;, &quot;$_&quot;]

上面大家来家家户户介绍一下种种艺术首要的用处。

诚如景色下我们用来输入音讯的措施首假若用到如下多个

1、console.log 用于出口普通新闻

2、console.info 用来出口提示性音讯

3、console.error用以出口错误新闻

4、console.warn用来出口警示信息

5、console.debug用于出口调节和测试消息

用图来发话

金沙注册送58 17

console对象的上面三种办法,都足以利用printf风格的占位符。然而,占位符的品种相比少,只帮衬字符(%s)、整数(%d或%i)、浮点数(%f)和目的(%o)多样

JavaScript

console.log(“%d年%d月%d日”,201一,三,二六);
console.log(“圆周率是%f”,3.1415玖26);

1
2
console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

金沙注册送58 18

%o占位符,能够用来查阅1个对象内部景观

JavaScript

var dog = {}; dog.name = “大毛”; dog.color = “黄色”; console.log(“%o”,
dog);

1
2
3
4
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);

金沙注册送58 19

6、console.dirxml用来展现网页的某部节点(node)所包蕴的html/xml代码**

JavaScript

<body> <table id=”mytable”> <tr>
<td>A</td> <td>A</td> <td>A</td>
</tr> <tr> <td>bbb</td> <td>aaa</td>
<td>ccc</td> </tr> <tr> <td>111</td>
<td>333</td> <td>222</td> </tr>
</table> </body> <script type=”text/javascript”>
window.onload = function () { var mytable =
document.getElementById(‘mytable’); console.dirxml(mytable); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body>
    <table id="mytable">
        <tr>
            <td>A</td>
            <td>A</td>
            <td>A</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>aaa</td>
            <td>ccc</td>
        </tr>
        <tr>
            <td>111</td>
            <td>333</td>
            <td>222</td>
        </tr>
    </table>
</body>
<script type="text/javascript">
    window.onload = function () {
        var mytable = document.getElementById(‘mytable’);
        console.dirxml(mytable);
    }
</script>

金沙注册送58 20

7、console.group输出1组消息的上马

8、console.groupEnd终止1组输出消息

看您供给采纳区别的输出方法来行使,假若上述多少个点子再同盟group和groupEnd方法来一块利用就可以输入丰富多彩的例外式样的出口信息。

金沙注册送58 21

嘿嘿,是否认为很神奇啊!

9、console.assert对输入的表明式举办预感,只有表明式为false时,才输出相应的音讯到调控台

金沙注册送58 22

10、console.count(那一个形式足够实用哦)当你想总括代码被实践的次数

金沙注册送58 23

11、console.dir(那个点子是自己平常使用的 可不知道比for
in方便了有个别) 直接将该DOM结点以DOM树的构造举办输出,能够详细核查象的形式提升级等

金沙注册送58 24

12、console.time 计时始于

13、console.timeEnd  计时停止(看了上边包车型的士图你瞬间就感受到它的狠心了)

金沙注册送58 25

14、console.profileconsole.profileEnd相称共同利用来查看CPU使用有关信息

金沙注册送58 26

在Profiles面板里面查看就能够看出cpu相关应用音信

金沙注册送58 27

15、console.timeLineconsole.timeLineEnd匹配共同记录1段时间轴

16、console.trace  货仓追踪相关的调弄整理

上述办法只是自家个人知道罢了。假设想查看具体API,能够上合法看看,具体地址为:

 

上面介绍一下调控台的一对神速键

1、方向键盘的上下键,大家一用就知道。举例用上键就一定于接纳上次在调控台的输入符号

2、$_命令归来近期一次表明式试行的结果,成效跟按升高的方向键再回车是1模同样的

金沙注册送58 28

上面的$_内需领会其奥义本领接纳方便,而$0~$4则象征了近年四个你挑选过的DOM节点。

怎么着意思?在页面右击选择审查元素,然后在弹出来的DOM结点树上面随意点选,那个被点过的节点会被记录下来,而$0会回到近期2回点选的DOM结点,就那样类推,$一再次来到的是极品次点选的DOM节点,最多保留了多少个,固然不够两个,则赶回undefined

金沙注册送58 29

3、Chrome
调控塞内加尔达喀尔原生援助类jQuery的选取器
,也正是说你可以用$充裕熟识的css选拔器来选拔DOM节点

金沙注册送58 30

4、copy通过此命令能够将在调整台获取到的剧情复制到剪贴板

金沙注册送58 31

(哈哈 刚刚从调整台复制的body里面包车型客车html可以随心所欲粘贴到哪 比如记事本
 是或不是以为成效很庞大)

5、keys和values 前者再次来到传入对象具有属性名组成的多寡,后者重返全体属性值组成的数组

金沙注册送58 32

说起那,不免想起console.table方法了

金沙注册送58 33

 

 

二回偶然的时机,张开百度的时候按下了F1二,然后就见调控台里面输出了百度的招聘广告,感到挺帅气的,再然后就有了那篇博文。

打赏支持作者写出更加多好小说,谢谢!

任选一种支付办法

金沙注册送58 34
金沙注册送58 35

2 赞 9 收藏 8
评论

最轻便易行的正是alert()方法,但是,alert 弹出窗口会中断程序,
而且假诺要在循环中显示消息,就会弹出四个弹窗,你不点击alert框的规定开关下1个alert就不晤面世,其余alert
展现对象永世显示为[object ],所以alert()方法只适合小程序。

6、monitor & unmonitor

monitor(function),它接受1个函数名作为参数,举个例子function a,每次a被实行了,都会在决定台出口一条音讯,里面富含了函数的名称a及实行时所盛传的参数。

而unmonitor(function)正是用来终止这一监听。

金沙注册送58 36

看了那张图,应该明了了,也正是说在monitor和unmonitor中间的代码,实施的时候会在决定台出口一条消息,里面富含了函数的称谓a及实践时所盛传的参数。当免除监视(也正是实施unmonitor时)就不再在决定台出口音信了。

JavaScript

$ // 轻便明了正是 document.querySelector 而已。 $$ // 轻易明了就是document.querySelectorAll 而已。 $_ // 是上三个表明式的值 $0-$四 //
是近些年伍个Elements面板选中的DOM成分,待会会讲。 dir // 其实正是console.dir keys // 取对象的键名, 重返键名组成的数组 values //
去对象的值, 重返值组成的数组

1
2
3
4
5
6
7
$ // 简单理解就是 document.querySelector 而已。
$$ // 简单理解就是 document.querySelectorAll 而已。
$_ // 是上一个表达式的值
$0-$4 // 是最近5个Elements面板选中的DOM元素,待会会讲。
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 去对象的值, 返回值组成的数组

 

上面看一下console.log的局地技术

1、重写console.log 改换输出文字的体制

金沙注册送58 37

二、利用调节台出口图片

金沙注册送58 38

3、钦赐输出文字的体裁

金沙注册送58 39

末段说一下chrome调节台一个粗略的操作,怎么着查看页面成分,看下图就通晓了

金沙注册送58 40

您在决定台简单操作2次就精通了,是或不是认为一点也不细略!

赞 6 收藏
评论

金沙注册送58 41

既然能够那样在决定台出口音讯,那之后再调节和测试Js的时候不就可以省去很多烦劳了嘛!幸免不误人子弟,特意利用for(var
i in console)查看了下各个浏览器调整台对console的支撑,

有关作者:TGCode

金沙注册送58 42

路途虽远,无所畏
个人主页 ·
作者的作品 ·
9 ·
   

金沙注册送58 43

其次种是断点调节和测试

结果如下:

在源码上行使debugger

IE 11 控制台

例如:

log , info , warn , error , debug , assert , time , timeEnd , group ,
groupCollapsed , groupEnd , trace , clear , dir , dirxml , count ,
countReset , cd , select , profile , profileEnd

function check(){

Firebug 控制台

var i=0;

log , debug , info , warn , exception , assert , dir , dirxml , trace ,
group , groupCollapsed , groupEnd , profile , profileEnd , count , clear
, time , timeEnd , timeStamp , table , error

debugger;

Chrome 控制台

alert(1);

memory , _commandLineAPI , debug , error , info , log , warn , dir ,
dirxml , table , trace , assert , count , markTimeline , profile ,
profileEnd , time , timeEnd , timeStamp , timeline , timelineEnd , group
, groupCollapsed , groupEnd , clear

}

能够看来,以上小编测试的浏览器对 log , info , warn , error , debug
三个焦点措施都以支撑的,注意,我利用的是 IE 1一,其余版本小编没测试,而
Firefox 本身也是不带控制台的,必要加载Firebug
插件并且运维它,才干console,不然就是Js报错了。为了接纳起来更便利,能够自个儿包裹一下,剖断一下浏览器对
console 的援助,不扶助就只可以使用原有的 alert 或然别的办法了。

check();

简言之用法:

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

console.log(“日志新闻”);
console.info(“一般消息”);
console.debug(“调节和测试消息”);
console.warn(“警告提醒”);
console.error(“错误提醒”);

二.
一直在浏览器上断点,同样是开采调整台的source,找到您要调解的代码,然后点击你要断点的那一行代码的右边行码处

格式化输出:

其二种就是本人最欢悦的console。

console.log(“%d年%d月%d日”, 2014, 5, 20);//日期格式输出
console.log(‘%c有颜色的出口音讯’, ‘color:white;
background-color:#005五CC’);//格式输出

最常用的正是console.log(),在调控布里斯托打字与印刷新闻,它能够承受其余字符串、数字和JavaScript对象,也足以接受换行符n以及制表符t。

出口变量:

var i=0;

var who= ‘you’;
console.log(‘输出变量 We support  ‘, you);//读取变量

var name=”我是console”;

出口数组:

var json={

var arr = [1, 2, 3, 4, 5];
console.log(‘数组:’, arr);//输出数组

“key”:”console”

以上这篇利用Js的console对象,在调节台打字与印刷调式消息测试Js的贯彻正是小编分享给我们的全体内容了,希望能给大家一个参阅,也指望大家多多帮忙脚本之家。

};

您恐怕感兴趣的篇章:

  • js调节和测试类别调整台命令行API使用方法
  • js调控台出口的艺术(详解)
  • AngularJS
    怎样在调控台进行不当调节和测试
  • 浅谈Sublime Text
    3运行JavaScript控制台
  • js调节和测试体系 初识调整台
  • 剥夺JavaScript控制台调节和测试的主意
  • 应用浏览器的Javascript调节台调节和测试PHP程序
  • 怎么着使Chrome调节台帮忙多行js情势——意外发掘
  • 简述JS调控台的采用

console.log(i);

console.log(name);

console.log(json);

您能够按红箭头所指的开关清除调控台,也足以直接用console.clear()清除。

自然console可不止那三个形式,它还有:

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

console.error用于出口错误消息

console.warn用于出口警示音信

console.debug用于出口调节和测试音讯

console.info(“提醒”); console.error(“报错了”); console.warn(“警告”);
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输出1组音信的伊始

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,”作者是不对二”);

console.count  当您想总计代码被实践的次数,那几个办法很有用

function play(){

    console.count(“实行次数:”);

}

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合营协同记录壹段时间轴

相关文章

网站地图xml地图