威尼斯人线上娱乐

js调节台出口的不二等秘书籍,Firebug使用详解六

24 8月 , 2019  

console.log(object[, object, …])

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“”>
<html xmlns=””>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>javascript的console.log()用法</title>
<script type=”text/javascript”>
/*
console.log 原先是 Firefox 的“专利”,严俊说是安装了 Firebugs 之后的
Firefox 所唯有的调治“绝招”。
这一招,IE8 学会了,可是用起来比 Firebugs
麻烦,唯有在拉开调节和测量检验窗口(F12)的时候,console.log
能力出结果,不然就报错。
明日看来 Opera 也可能有个叫 dragonfly 的东东,用那东西查看 DOM,已经足以和
Firebug 比美,可是照旧无法用
console.log。于是有人就提供了那般两句代码:
window.console = window.console || {};
console.log || (console.log = opera.postError);
经测量试验,以上代码好使。
从那之后,Firefox/IE/Opera 都能用上 console.log 了。
自然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的
console.log,依旧太过粗略,例如参数是 Object
只怕数组就从未进一步的显示效果。 
*/

一、console 的指标常用的法子

大家测量检验一下把刚刚的4个出口作为一个分组输出,修改代码为:

在调节台出口一条消息。若是有多少个参数,输出时会用空格隔离那一个参数。

//变量
var i = ‘I am a string’;
console.log(‘变量:’,i);

1、console.log(object[, object, …])
采纳功能最高的一条语句:向决定台出口一条音讯。帮衬 C 语言 printf
式的格式化输出。当然,也得以不行使格式化输出来达到平等的目标

复制代码 代码如下:

首先个参数能够是三个满含格式化占位符输出的字符串,例如:

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

 

console.group(‘早先分组:’);
console.debug(‘This is console.debug!’);
console.info(‘This is console.infojs调节台出口的不二等秘书籍,Firebug使用详解六。!’);
console.warn(‘This is console.warn!’);
console.error(‘This is console.error!’);
console.groupEnd();

console.log(“The %s jumped over %d tall buildings”, animal, count);

//对象
var obj1 = {
    key1 : ‘value1’,
    key2 : ‘value2’,
    key3 : ‘value3’
};
var obj2 = {
    key6 : ‘value4’,
    key5 : ‘value5’,
    key4 : ‘value6’
};
var obj3 = {
    key9 : ‘value7’,
    key8 : ‘value8’,
    key7 : ‘value9’
};

2、console.debug(object[, object, …])
向决定台出口一条音信,它回顾一个针对性该行代码地方的超链接。

刷新页面看看结果(图11-5)。在console.group中,大家还能参预三个组标题“开首分组:”。假设须要,大家仍是可以够透过嵌套的点子,在组内再分组。
威尼斯人线上娱乐 1
图11-5
突发性,我们须要写三个for循环列出三个对象的保有属性只怕某些HTML
Element下的保有节点,有了firebug后,大家无需再写那一个for循环了,我们只必要运用console.dir(object)或console.dirxml(element)就能够了。
在测量检验页中投入代码测量试验一下:

上面包车型客车例证可以用上面包车型大巴无格式化占位符输出的代码替换:

console.log(‘对象:’,obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];

 

复制代码 代码如下:

console.log(“The”, animal, “jumped over”, count, “tall buildings”);

console.log(‘对象数组1:’,objArr1);
console.log(‘对象数组1:’,objArr2);
/*
输出:
变量:I am a string
数组:[1, 2, 3, 4, 5]
对象:Object { key1=”value1″, key2=”value2″, key3=”value3″}
对象数组1:[Object { key1=”value1″, key2=”value2″, key3=”value3″},
Object { key6=”value4″, key5=”value5″, key4=”value6″}, Object {
key9=”value7″, key8=”value8″, key7=”value9″}]
对象数组1:[[Object { key1=”value1″, key2=”value2″, key3=”value3″}],
[Object { key6=”value4″, key5=”value5″, key4=”value6″}], [Object {
key9=”value7″, key8=”value8″, key7=”value9″}]]
*/
</script>

3、console.info(object[, object, …])
向决定台出口一条音信,该消息富含二个代表“音信”的Logo,和针对性该行代码地点的超链接。

console.dir(document.getElementById(‘div1’));
console.dirxml(document.getElementById(‘div1’));

再正是,那二种办法是足以整合使用的。要是运用了格式化占位符,而提供的参数的个数多于占位符的个数,那么,多余的参数会以空格分隔的办法附加在字符串后边,就疑似:

</head>

 

结果请看图11-6和图11-7。
威尼斯人线上娱乐 2 
图11-6
威尼斯人线上娱乐 3
图11-7
是还是不是想清楚代码的周转速度?异常的粗略,使用console.time和console.timeEnd就足以。
修改一下test函数的代码,测验一下运营一千次巡回必要多少日子:

console.log(“I am %s and I have:”, myName, thing1, thing2, thing3);

<body>
</body>
</html>

4、console.warn(object[, object, …])

复制代码 代码如下:

假若参数是三个Javascript对象,那么在调节台出口的就不是静态文字,而是二个可互相的超链接,点击超链接能够查看该对象的HTML,
CSS, Script, DOM窗口,可用格式化字符串%o代替Javascript对象。

上边步向一些,console的其他方法介绍:

同 info。差别是Logo与体制差异。

function test(){
console.time(‘test’);
for(var i=0;i<1000;i++){
document.getElementById(‘div2’).innerHTML=i;
//console.log(‘当前的参数是:%d’,i);
}
console.timeEnd(‘test’);
}

console.log(“Body tag is %o”, document.body);

console.log(object[, object, …])
在调节台出口一条音讯。借使有五个参数,输出时会用空格隔绝那一个参数。

 

刷新页面,单击“方块二”,看看结果(图11-8)。在此间要留心的是console.time和console.timeEnd里的参数要一直以来才会有正确的输出,而该参数正是音信的标题。
威尼斯人线上娱乐 4
图11-8
是或不是想理解有些函数是从哪个地方调用的?console..trace可帮助我们开展追踪。在test函数的结尾参加:
console.trace();
刷新页面,单击“方块二”,看看结果(图11-9)。结果展现是在坐标(97,187)的鼠标单击事件推行了test函数,而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面包车型地铁事件调用了test函数,所以显得的行号是第1行。借使是本子,则会显得调用脚本的行号,通过单击能够直接去到调用行。
威尼斯人线上娱乐 5
图11-9
若是想在剧本有些地点设置断点,能够在本子中输入“debugger”作为一行。当脚本奉行到这一行时会甘休实行等待客商操作,那时候能够因此切换来“Script”标签对剧本实行调护医治。
Firebug还可能有其它的一部分调节和测量检验函数,这里就不一一做牵线,风乐趣能够团结测量试验。表4是兼具函数的列表:

格式化字符串列表:

率先个参数能够是三个带有格式化占位符输出的字符串,举个例子:

5、console.error(object[, object, …])

函数

格式化字符串 类型
%s 字符串
%d, %i 整型(暂不支持数字型)
%f 浮点型 (暂不支持数字型) 
%o 链接对象

console.log(“The %s jumped over %d tall buildings”, animal, count);

同 info。差别是Logo与体制不一致。error 实际上和 throw new Error()
发生的效应同样,使用该语句时会向浏览器抛出贰个 js 非常。

说明

console.debug(object[, object, …])

地点的例证能够用上边包车型大巴无格式化占位符输出的代码替换:

 

console.log(object[, object, …])

在决定台出口一条音讯,包蕴三个针对性代码调用地点的超链接。若是是直接在支配台输入该命令,就不会出现超链接(和console.log()一样)。

console.log( ” The ” , animal,  ” jumped over ” , count,  ” tall buildings ” );

6、console.assert(expression[, object, …])

向调节台出口贰个消息。能够输入多个参数,输出将已空格分隔各参数输出。

console.info(object[, object, …])

何况,那三种办法是足以整合使用的。假若使用了格式化占位符,而提供的参数的个数多于占位符的个数,那么,多余的参数会以空格分隔的措施附加在字符串前面,就好像:

预感,测量试验一条表明式是或不是为真,不为真时将抛出极其(断言退步)。

先是参数能够分包格式化文本,举个例子:

在调整台出口一条带有“音讯”Logo的消息和一个针对代码调用地点的超链接。

console.log( ” I am %s and I have: ” , myName, thing1, thing2, thing3);

 

console.log(‘这里有%d个%s’,count,apple);

console.warn(object[, object, …])

假设参数是叁个Javascript对象,那么在调控台出口的就不是静态文字,而是二个可交互的超链接,点击超链接能够查看该指标的HTML,
CSS, Script, DOM窗口,可用格式化字符串%o代替Javascript对象。

7、console.dir(object)

字符串格式:

在决定台出口一条带有“警告”Logo的音讯和多少个针对代码调用地方的超链接。

console.log( ” Body tag is %o ” , document.body);

输出二个对象的成套品质(输出结果类似于 DOM 面板中的样式)。

%s :字符串。

console.error(object[, object, …])

格式化字符串列表:

 

%d, %i:数字。

在支配台出口一条带有“错误”Logo的音信和一个对准代码调用地方的超链接。

%s 字符串
%d, %i 整型(暂不支持数字型)
%f 浮点型 (暂不支持数字型) 
%o 链接对象

8、console.dirxml(node)
输出几个 HTML 或然 XML 成分的构造树,点击结构树上面包车型地铁节点步入到 HTML
面板。

%f: 浮点数。

console.assert(expression[, object, …])

console.debug(object[, object, …])
在决定台出口一条消息,饱含三个针对性代码调用地方的超链接。假设是直接在支配台输入该命令,就不会并发超链接(和console.log()同样)。

 

%o -超链接对象。

测量检验表明式expression是不是为真。若是否真,会在调控台写一条新闻并抛出非凡

console.info(object[, object, …])
在支配台出口一条带有“消息”Logo的音讯和一个针对性代码调用地方的超链接。

9、console.trace()
输出 Javascript 施行时的旅社追踪。

console.debug(object[, object, …])

console.dir(object)

console.warn(object[, object, …])
在调控台出口一条带有“警告”Logo的音讯和贰个针对代码调用地点的超链接。

 

向决定台出口一个音讯,新闻蕴含三个超链接链接到输出地方。

以列表情势出口八个指标的富有属性,有一点点和你查看DOM窗口相就如。

console.error(object[, object, …])
在支配台出口一条带有“错误”Logo的音讯和一个针对性代码调用地方的超链接。

10、console.group(object[, object, …])
输出音信的同偶尔间展开多个嵌套块,用以缩进输出的内容。调用
console.groupEnd() 用以甘休那些块的出口。

console.info(object[, object, …])

console.dirxml(node)

console.assert(expression[, object, …])
测验表达式expression是还是不是为真。假诺不是真,会在支配台写一条消息并抛出极度

 

向决定台出口贰个带音信Logo和背景颜色的新闻,音信蕴涵三个超链接链接到输出地点。

出口贰个HTML也许XML成分的XML源代码。和你在HTML窗口看到的貌似。

console.dir(object)
以列表方式出口二个指标的装有属性,有一点和你查看DOM窗口相类似。

11、console.groupCollapsed()
同 console.group(); 分裂在于嵌套块暗中认可是收纳的。

console.warn(object[, object, …])

console.trace()

console.dirxml(node)
出口贰个HTML只怕XML成分的XML源代码。和你在HTML窗口看到的貌似。

 

向调节台出口三个带警告Logo和背景颜色的信息,音讯包涵一个超链接链接到输出地方。

Prints an interactive stack trace of JavaScript execution at the point
where it is called.

console.trace()
Prints an interactive stack trace of JavaScript execution at the point
where it is called.

12、console.time(name)
放大计时器,当调用 console.timeEnd(name);并传递一样的 name
为参数时,计时甘休,并出口实践两条语句之间代码所消耗的光阴(皮秒)。

console.error(object[, object, …])

The stack trace details the functions on the stack, as well as the
values that were passed as arguments to each function. You can click
each function to take you to its source in the Script tab, and click
each argument value to inspect it in the DOM or HTML tabs.

The stack trace details the functions on the stack, as well as the
values that were passed as arguments to each function. You can click
each function to take you to its source in the Script tab, and click
each argument value to inspect it in the DOM or HTML tabs.

 

向决定台出口八个带错误Logo和背景颜色的新闻,音讯包涵三个超链接链接到输出地点。

console.group(object[, object, …])

console.group(object[, object, …])
输出一条音信,并开荒一个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令能够嵌套使用。

13、console.profile([title])
与 profileEnd() 结合使用,用来做质量测试,与 console 面板上 profile
按键的成效完全同样。

console.assert(expression[, object, …])

出口一条消息,并张开三个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令能够嵌套使用。

console.groupEnd()
关闭这两天两个由console.group张开的块。

 

测验贰个意味是还是不是为true,要是为false,提交一个见仁见智消息到调控台。

console.groupEnd()

console.time(name)
开创多个名称为name的计时器,调用console.timeEnd(name)结束沙漏并输出所耗费时间间(飞秒)。

14、console.count([title])
出口该行代码被实行的次数,参数 title 将在输出时作为出口结果的前缀使用。

console.dir(object)

关闭近年来一个由console.group展开的块。

console.timeEnd(name)
停下同名的放大计时器并输出所耗费时间间(纳秒)。

 

列出目的的富有属性。

console.time(name)

console.profile([title])
展开Javascript质量测量检验开关。可选参数title会在打字与印刷质量测量检验报告时在告诉的起来输出。

15、console.clear()
清空气调节器节台

console.dirxml(node)

创办七个名称叫name的放大计时器,调用console.timeEnd(name)甘休计时器并输出所耗费时间间(纳秒)。

console.profileEnd()
关闭Javascript质量测量检验按钮并出口报告。

 

列出HTML或XML Element的XML源树。

console.timeEnd(nam)

console.count([title])

二、使用console调节和测验JS脚本实例

console.trace()

以上那篇js调控台出口的章程(详解)便是作者分享给大家的全体内容了,希望能给大家多个参阅,也可望大家多多支持脚本之家。

接触二个计数,计数由1发端。可选参数title会在展现计数时在告诉的启幕输出。

 

出口仓库的调用入口。

您恐怕感兴趣的稿子:

  • js调节和测量检验类别调整台命令行API使用形式
  • 选拔Js的console对象,在调整台打字与印刷调式音讯测量试验Js的落成
  • AngularJS
    怎么样在决定台实行不当调节和测量试验
  • 浅谈Sublime Text
    3运行JavaScript控制台
  • js调节和测量试验体系 初识调节台
  • 剥夺JavaScript调节台调节和测量试验的方式
  • 行使浏览器的Javascript调控台调节和测验PHP程序
  • 怎么着使Chrome调控台援助多行js情势——意外开采
  • 简述JS调整台的采纳

 

1、console.log()

console.group(object[, object, …])

 

 

将音讯分组再出口到调控台。通过console.groupEnd()截止分组。

最简便的办法是console.log(),能够用来取代alert()或document.write()。

console.groupEnd()

其它,遵照音信的例外性质,console对象还会有4种显示新闻的艺术,分别是一般音信console.info()、除错音讯console.debug()、警告提醒console.warn()、错误提醒console.error()。

竣事分组输出。

例如

console.time(name)

 

创制贰个称呼为name的停车计时器,计算代码的实施时间,调用console.timeEnd(name)截止沙漏并出口试行时间。

  console.info(“这是info”);

console.timeEnd(name)

  console.debug(“这是debug”);

悬停名为name的放大计时器并出口实施时间。

  console.warn(“这是warn”);

console.profile([title])

  console.error(“这是error”);

初步对剧本进行性能测量试验,title为测验标题。

 

console.profileEnd()

加载时,调控台会彰显如下内容

威尼斯人线上娱乐,终结质量测量试验。

 

console.count([title])

威尼斯人线上娱乐 6

测算代码的施行次数。titile作为出口题目。

 

表4

 

12、 在IE中使用Firebug
Firebug是Firefox的二个恢宏,不过自个儿习于旧贯在IE中调养小编的页面怎么做?假诺在页面脚本中踏入console.log()将调节和测验音讯写到Friebug,在IE中没有疑问是投砾引珠错误的,怎么做?不用忧虑,Frirebug提供了Frirbug
Lite脚本,能够插入页面中模仿Firebug调控台。
大家得以从一下地址下载firebug lite:

下一场在页面中投入:
<script language=”javascript” type=”text/javascript”
src=”/路径/firebug.js”></script>
一旦你不想在IE中效仿Friebug调节台,只是不愿意console.log()脚本出现错误消息,那么在页面中加入一下语句:
<script language=”javascript” type=”text/javascript”
src=”/路径/firebugx.js”></script>
倘令你不想安装Firebug
Lite,只是想防止脚本错误,那么能够在剧本中步向以下语句:
if (!window.console || !console.firebug)
{
var names = [“log”, “debug”, “info”, “warn”, “error”, “assert”, “dir”,
“dirxml”,
“group”, “groupEnd”, “time”, “timeEnd”, “count”, “trace”, “profile”,
“profileEnd”];
window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}
}
咱俩将firebug.js出席到测量检验页面中,然后张开IE,加载页面。页面加载成功后,大家按下F12键就足以张开调控台了。每一遍页面刷新后,你都要按F12键展开调控台,是或不是很烦?假若不想那么,就在html标签中参与“debug=’true’”,譬喻:
<html debug=”true”>
在Friebug Lite中也可以有命令行,可是效果没那么强。

2、占位符

您也许感兴趣的稿子:

  • 教你哪些利用firebug调节和测量检验作用精晓javascript闭包和this
  • FireBug 调节和测量试验JS入门教程
    如何调治JS
  • 选择firebug进行调节和测试javascript的示范
  • javascript
    在firebug调节和测量检验时用console.log的方法
  • 应用Firebug对js实行断点调节和测量试验的图像和文字方法
  • 选用JavaScript检查评定Firefox浏览器是不是启用了Firebug的代码
  • Firebug
    字幕文件JSON地址获替代码
  • js之WEB开荒调试利器:Firebug
    下载
  • javascript剖断firebug是或不是开启的法子

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

例如

  console.log(“%d年%d月%d日”,2011,3,26);

  console.log(“圆周率是%f”,3.1415926);

 

%o占位符,能够用来查看一个对象内部原因。举个例子,有如此贰个目的

  var dog = {} ;

  dog.name = “大毛” ;

  dog.color = “黄色”;

 

%o占位符的运用

 

console.log(“%o”,dog);

 

展现如图

 

威尼斯人线上娱乐 7

 

 

 

3、console.dir()查看对象的消息

 

console.dir()可以体现四个目的具备的性情和章程。

 

例如

 

    <script type="text/javascript">
           var info = {
                blog:"ddd",
                tel:25422223,
                message:"欢迎你使用"
            };
           console.dir(info);
    </script>

 

4、console.dirxml() 展现有些节点的开始和结果

 

console.dirxml()用来彰显网页的有些节点(node)所富含的html/xml代码。

例如

var table = document.getElementById(“table1”);

console.dirxml(table);

 

5、console.assert()剖断变量是不是是真

 

console.assert()用来判断一个表明式或变量是或不是为真。若是结果为否,则在决定台出口一条相应新闻,并且抛出二个非凡。

例如

  var result = 1;

  console.assert( result );

  var year = 2000;

  console.assert(year == 2011 );

 

 

6、console.trace()

 

console.trace()用来追踪函数的调用轨迹。

 

 

7、console.time()和console.timeEnd()

 

用来浮今世码的运转时刻。

例如

  console.time(“电火花计时器一”);

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

    for(var j=0;j<1000;j++){}

  }

  console.timeEnd(“定时器一”);

效果

威尼斯人线上娱乐 8

 

 

8、console.profile()

属性深入分析(Profiler)正是深入分析程序各样部分的运作时刻,找寻瓶颈所在,使用的办法是console.profile()。

 

例如

  console.profile(‘品质分析器一’);

  Foo();

  console.profileEnd();

 


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图