在调整台打字与印刷调式新闻测量检验Js的贯彻,你所不明了的

一回有时的机缘,展开百度的时候按下了F12,然后就见调控台里面输出了百度的招聘广告,认为挺英俊的,再然后就有了那篇博文。

  二遍不经常的时机,张开百度的时候按下了F12,然后就见调节台里面输出了百度的招聘广告,以为挺秀气的,再然后就有了那篇博文。

在开展java代码调节和测量试验时,都会将结果或自定义标记打字与印刷在调节台,那么在浏览器调试js,能够将结果打字与印刷在浏览器调控台吗?答案是足以的,调整台打字与印刷格局如下:

转载自JavaScript公众号

既然能够那样在支配台出口消息,那以往再调节和测量检验Js的时候不就足以省去比非常多难为了嘛!制止不误人子弟,特意使用for(var
i in console)查看了下种种浏览器调整台对console的支撑,

既然可以那样在支配台出口音讯,那之后再调节和测量试验Js的时候不就能够省去比非常多烦劳了呗!幸免不误人子弟,刻意利用for(var
i in console)查看了下各样浏览器调控台对console的援助,

console.info( “测量试验调整台出口” );

1.凡人视角

结果如下:

结果如下:

各样浏览器调控台对console的帮衬如下:

打字与印刷字符串

IE 11 控制台

IE 11 控制台

一、IE浏览器调节台

代码:

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

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

在调整台打字与印刷调式新闻测量检验Js的贯彻,你所不明了的。log  info  warn  error  assert dir clear profile profileEnd

console.log(“I am a 凡人”);

Firebug 控制台

Firebug 控制台

二、火狐Firebug控制台

事件流事件流事件流事件流事件流事件流事件流

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

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

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

打字与印刷提醒信息

Chrome 控制台

Chrome 控制台

三、Chrom控制台

代码:

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

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

debug  error info  log  warn  dirprofiles  memory dirxml  trace  assert 
count  markTimeline  profile  profileEnd  time  timeEnd  group 
groupCollapsed  groupEnd 

console.info(“Yes, you arm a 凡人”);

能够看到,以上作者测量检验的浏览器对 log , info , warn , error , debug
三个主导方式都以支撑的,注意,笔者动用的是 IE 11,其余版本作者没测量试验,而
Firefox 本身也是不带调整台的,必要加载Firebug
插件并且运行它,才具console,不然就是Js报错了。为了选拔起来更低价,能够和煦包裹一下,剖断一下浏览器对
console 的支撑,不帮助就只可以选取原本的 alert 或然其余艺术了。

 

四、Opera控制台

打字与印刷警告消息

粗略用法:

能够看看,以上小编测验的浏览器对 log , info , warn , error ,
debug 
八个基本情势都以支撑的,注意,笔者利用的是 IE
11,其余版本笔者没测量试验,而 Firefox 本人也是不带调节台的,必要加载Firebug
插件并且运转它,工夫console,不然便是Js报错了。为了选用起来更方便人民群众,能够和谐包裹一下,判别一下浏览器对 console
的支撑,不支持就只可以动用原本的 alert 或许其余格局了。

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

代码:

console.log(“日志音信”);
console.info(“一般音讯”);
console.debug(“调节和测量检验音信”);
console.warn(“警告提示”);
console.error(“错误提醒”);

 

以上四种浏览器对 log  info  warn 
error
四个为主办法都以帮忙的,除了IE,别的三种还帮衬个debug,所以这一点要专一,debug在IE下不可用,平常调节和测量试验什么的,用log或info就行。其余,IE6/7没有开荒人士工具,也就从未调节台,要小心IE版本不然在IE6、7下用js就报错了。

console.warn(“凡人你依旧敢窥视笔者”);

格式化输出:

简单用法:

打印错误音讯

console.log(“%d年%d月%d日”, 二〇一四, 5, 20);//日期格式输出
console.log(‘%c有颜色的输出音信’, ‘color:white;
background-color:#0055CC’);//格式输出

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

代码:

输出变量:

格式化输出:

console.error(“天兵天将,把这几个凡人给自己打入鬼世界”);

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

console.log(“%d年%d月%d日”, 二〇一四, 5, 20);//日期格式输出
console.log(‘%c有颜色的出口音信’, ‘color:white;
background-color:#0055CC’);//格式输出

打字与印刷调节和测量试验新闻

输出数组:

输出变量:

console.debug(“小编便是趣事中的debug”);

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

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

2.上帝视角

以上那篇利用Js的console对象,在调控台打字与印刷调式新闻测量检验Js的完毕就是笔者分享给大家的全体内容了,希望能给我们二个参阅,也可望我们多多支持脚本之家。

 

查看全数办法

您只怕感兴趣的小说:

  • js调试种类调节台命令行API使用方式
  • js调控台出口的方式(详解)
  • AngularJS
    如何在决定台进行不当调节和测验
  • 浅谈Sublime Text
    3运行JavaScript控制台
  • js调节和测量试验种类 初识调整台
  • 剥夺JavaScript调控台调节和测量检验的章程
  • 行使浏览器的Javascript调节台调节和测验PHP程序
  • 怎么样使Chrome调控台援助多行js方式——意外开掘
  • 简述JS调控台的选用

出口数组:

console 除了上边的多少个方法还大概有何办法呢?log
除了能打字与印刷字符串外,还是能够打印出目的,大家能够利用 console.log 打印本身。

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

代码:

console.log(console);

输出:

Object{

assert:…,

clear:…,

count:…,

debug:…,

dir:…,

dirxml:…,

error:…,

group:…,

groupCollapsed:…,

groupEnd:…,

info:…,

log:…,

markTimeline:…,

profile:…,

profileEnd:…,

table:…,

time:…,

timeEnd:…,

timeStamp:…,

timeline:…,

timelineEnd:…,

trace:…,

warn:…

}

啊咧咧?怎么这么多措施。其实上面包车型地铁 console 方法 不鲜明每种浏览器
都有落到实处,作者那边使用的是 chrome浏览器
。所以说,这本性子是非规范的,请尽大概不要在 生产情形 中动用它。

可是大家能够在 开垦情状 中,合理的选择 那些艺术来援助大家开采。

理清调节台

假定我们在调控台调试的时候,难免 情感障碍发作想清理掉已经杂乱无章的调节台。浏览器和下令行 clear
一样提供了一个清理函数 console.clear() 。

console.clear()

本来大家也能够用 chrome 的 command line api 来清理调节台。

clear()

又也许能够利用按钮Mac上 cmd + k ,Win ctrl + l(小编用的是chrome浏览器)。

分组

今世码相当长,可能我们须求把三个函数,恐怕叁个文件中的函数等组别出来。大家能够使用分组来完毕。

代码:

console.group(‘凡人’);

console.log(“手”);

console.log(“脚”);

console.groupEnd();

console.group(‘神’);

console.log(“法力无边”);

console.log(“腾云架雾”);

console.groupEnd();

输出:

亚洲必赢官网 1

一旦想要输出为折叠,大家能够使用 console.groupCollapsed ,用法和
console.group 类似。

翻开对象音讯

突发性大家须求打字与印刷出目的音信,能够动用 console.log 来拓宽简易的输出。

代码:

varperson={

亚洲必赢官网,head:1,

hand:2,

leg:2

};

console.log(person);

萧萧,可是此人作品呈现得比较丑,大家这年就足以采取故事中的神器
console.table 来提携我们清楚的呈现 关联数组消息。

vardata=[

{

‘姓名’:’幼儿园’,

‘性别’:’女’

},

{

‘姓名’:’李狗嗨’,

‘数量’:1

}

];

console.table(data);

输出:

亚洲必赢官网 2

只是只要想要看详细的指标音讯,大家得以应用 console.dir,将二个JavaScript
对象的具有属性和属性值显示成叁个可相互的列表,它仍可以打字与印刷出函数等。

console.dir(clear);

什么样?你想看某些节点中的html代码?没事,大家能够用 console.dirxml
来查阅页面中对应成分的 html/xml 内容。

html代码:

I am a 凡人

javascirpt代码:

varperson=document.getElementById(‘person’);

console.dirxml(person);

本性测量试验

雷布斯粑粑老是欣赏说:“不服?跑个分。”有的时候候,大家也急需对代码跑个分。这年,大家得以应用console.time和console.timeEnd,他们得以记下代码运转所开支的时刻。

console.time(“神机妙算”);

(function(){

for(vari=0;i<10;i++){

varsum=(function(){

varflog=0;

for(vari=0;i<10;i++){

flog+=i;

}

})();

}

})();

console.timeEnd(“神机妙算”);

啊咧咧?你那么些顶多正是 放大计时器 怎么能算得 品质测试。观众别急,大家那还大概有多个称为 console.profile 和 console.profileEnd
姐妹呢~~

console.profile(“神机妙算”);

(function(){

for(vari=0;i<10;i++){

varsum=(function(){

varflog=0;

for(vari=0;i<10;i++){

flog+=i;

}

})();

}

})();

console.profileEnd(“神机妙算”);

输出会呈现在 profile

亚洲必赢官网 3

何以或许非常不足?你还想了解运营时的结果栈?能够能够,大家那还会有一位console.trace 哦。他能够看透三叔您的一局一动哦。

代码:

functionadd(num){

if(0

console.trace(“现在num的值为”,num);

returnnum+add(num-1);

}else{

return0;

}

}

vara=3;

add(3);

输出:

亚洲必赢官网 4

看清真伪

毕生我们在写代码是时候,平常须求决断一下当下值的真伪情形,使用if或许安慕希表明式来完结指标。大家今后也能够利用
console.assert 来推断,该方法会在原则为不当时,重临一个 console.error
的输出。

console.assert(1==1);

console.assert(1==0);

console.assert(!(1==0));

总结次数

一时我们供给计算一个函数可能被调用了四次,大家经常会增加多少个变量 count
来记录,然后在调控桃园查看。那样相当的劳动,大家能够动用 console.count
函数来协理大家记录次数,并出口。

functionhi(name){

console.count(name);

return”hi “+name;

}

for(vari=0;i<10;i++){

if(i<4){

hi(“person”);

}else{

hi(“god”);

}

}

总结

console 中有众多对大家调节和测量试验代码有援救的函数,我们能够在支付景况中匹配console 来调整代码,使得大家测量检验越发便利。

网站地图xml地图