格式化字符串 类型,    今天我们重点要学的是

作者: 前端开发  发布:2019-08-04

console.log();

<!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 或者数组就没有进一步的显示功能。 
*/

0.介绍

先上图:不知道有多少人发现,在浏览器开发工具的“Console”上的百度首页的关于百度招聘的信息:

图片 1

 

图片 2

 

 

 

   今天要给大家介绍的就是是Web前端调试工具中的Console面板,应该说只要是个浏览器就会有的开发者工具,按F12出现的即是,就是我们上面图片上显示的Console,我这以谷歌浏览器为例进行下基本的讲解。

 

当你使用console.log()函数时,下面的firebug一定要打开,不然这函数在用firefox运行时无效且影响正常程序,如果用IE打开,将会出错。

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

Console探险

    今天我们重点要学的是开发者工具中的"Console",在介绍Console之前,我们先将其它的几个面板介绍下:

    Element:主要是用来调试网页中的html标签代码和css样式代码

    Network:查看网页的http通信情况,包括Method、Type、Timeline(网络请求的时间响应情况)等

    Source:查看JS文件、调试JS代码

    Timeline:查看js的执行时间,页面元素渲染时间等

    Profiles:用来查看网页的性能,比如CPU和内存消耗

    Resources:用来查看加载的各种资源文件,比如js、css、图片等

    Audits:可以分析当前网页,可以快速的分析出哪些资源被使用、哪些资源没有使用,然后提出建议

    Console:可以查看错误信息、打印调试信息、调试js代码,还可以当作Javascript API查看

 

第一个参数可以是一个包含格式化占位符输出的字符串,例如:

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

代码调试

 

    我们可以用console来调试js代码:有图有真相:

 

图片 3

 

    我的代码执行到161行,如果想打印下"result",我就可以在Console中进行调试,输入代码:"alert("result=" result);"回车即可,即可弹出result的结果;

 

图片 4

图片 5

 

 

    或者是输入代码"console.log("result=" result);"直接打印结果也可,如下图:

图片 6

 

 

    上面说了console的打印和调试功能,下面就来看下它的api功能:

 

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'
};

api功能

    控制台的核心对象是Console,如果我想查看console都有哪些方法和属性,我可以直接在Console中输入“console”并执行;或者用"console.dir(console)",同样可以实现查看console对象的方法和属性;

 

图片 7

 

图片 8

 

 

    我们再来查看一个常用函数日期函数的方法,我们利用“console.dir()”来查了日期函数的方法:

图片 9

 

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

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

···

 

console.log()用法

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>

小结

 

    浏览器的console是个特别强大的面板,虽然现在我也只是发现了它的冰山一角,但就这冰山一角就已经深深将我折服了!这里也只是给大家推开一扇窗户,至于窗户以外的美景就需要大家自己去探索了。

复制代码 代码如下:

</head>

一 实例

打印字符串和对象;

图片 10

可展开对象查看内部情况;

图片 11

看一下console对象本身的定义情况;

图片 12

输出对象情况;

图片 13

utag对象所在文件;

图片 14

输出对象;

图片 15

<!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 或者数组就没有进一步的显示功能。
*/
//变量
var i = 'I am a string';
console.log('变量:',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组:',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象:',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
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>
</head>
<body>
</body>
</html>

<body>
</body>
</html>

二 Console.log 总结

您可能感兴趣的文章:

  • JavaScript调试技巧之console.log()详解
  • js调试工具console.log()方法查看js代码的执行情况
  • javascript代码调试之console.log 用法图文详解
  • JavaScript调试之console.log调试的一个小技巧分享

下面加入一些,console的其它方法介绍:

1

如果你js没到一个境界,我就算教你调试bug,破解一些插件之类的,你也根本不知道我在做什么。我的目的只是让你认识控制台,让你入门调试,之后的路还得靠你们自己走。

不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台。
其实对于这 F12 而言,最确切的叫法是开发人员工具,Console 这一项才是控制台。

点击右键的 Clear console 菜单 或者 输入 clear() 然后按回车即可清空控制台内容。
我们进行第一步用 console.log 输出信息吧。
分别输入 console.log("hehe..") 和 console.log("hehe..", "haha..") 然后按回车,可以在控制台看到输出结果。
其实就是输出信息而,非常简单,用他代替 alert 和 document.write 调试,你的工作会变的非常轻松的。
例如调试一个循环这部分的代码,可是数组里却有几十个甚至上百个元素,alert 的话你会点疯掉的,
document.write 也不是不行,但是对于对象输出,你只能看到 [object Object] 这样的东西。

如果用 console.log 代替 alert document.write 输出对象信息,可以在控制台展开这对象查看具体信息。
可以直接看到对象信息,而不会显示 [object Object] 令我们一头雾水。

现在可以直接点击 Object 展开这个数组内的对象进行查看了,连循环输出都省了。
这就是控制台的魅力,而且这只是他最基础的功能而已。

可以看一些深色和浅色的东西,深色的就是我们可以直接调用的方法了,浅色的表示默认属性或方法,展示无需关心,以后有机会再说。
其实常用的只有 log dir 而已,其他真心很少用,到高级调试才会用上。
group,table 之类的辅助性质,可用可不用,看你喜好了。

console.log(object[, object, ...])
在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。

2

之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是:
console.log("值为:",fn);
console.log()能够输出变量,函数,数组,对象等等

第一个参数可以是一个包含格式化占位符输出的字符串,例如:

3

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 或者数组就没有进一步的显示功能。 

//变量 
var i = 'I am a string'; 
console.log('变量:',i); 
//数组 
var arr = [1,2,3,4,5]; 
console.log('数组:',arr); 
//对象 
var obj1 = { 
key1 : 'value1', 
key2 : 'value2', 
key3 : 'value3' 
}; 
var obj2 = { 
key6 : 'value4', 
key5 : 'value5', 
key4 : 'value6' 
}; 
var obj3 = { 
key9 : 'value7', 
key8 : 'value8', 
key7 : 'value9' 
}; 
console.log('对象:',obj1); 
//对象数组 
var objArr1 = [obj1,obj2,obj3]; 
var objArr2 = [[obj1],[obj2],[obj3]]; 
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"}]] 
*/ 

注:IE浏览器下默认是不支持console.log,反而会因为这句代码报错,所有ie下注释掉比较好

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

4

对于JavaScript程序的调试,相比于alert(),使用console.log()是一种更好的方式,原因在于:alert()函数会阻断 JavaScript程序的执行,从而造成副作用;而console.log()仅在控制台中打印相关信息,因此不会造成类似的顾虑

一、什么是console.log()?
除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,老版本的Firefox没有自带调 试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员 变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行 符n以及制表符t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为 可能会有所不同, 
二、兼容没有调试控制台的浏览器
对于缺少调试控制台的老版本浏览器,window中的console对象并不存在,因此直接使用console.log()语句可能会在浏览器内部造成错 误(空指针错误),并最终导致某些老版本浏览器的崩溃。为了解决这一问题,可以人为定义console对象,并声明该console对象的log函数为空 函数;这样,当console.log()语句执行时,这些老版本的浏览器将不会做任何事情:
代码如下:
if(!window.console){
  window.console = {log : function(){}};
}
不过,在大多数情况下,没有必要去做这种兼容性工作 — console.log()等调试代码应当从最终的产品代码中删除掉。
三、使用参数
与alert()函数类似,console.log()也可以接受变量并将其与别的字符串进行拼接:
代码如下:
//Use variable
var name = "Bob";
console.log("The name is: " name);

与alert()函数不同的是,console.log()还可以接受变量作为参数传递到字符串中,其具体语法与C语言中的printf语法一致:
复制代码 代码如下:
//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);
上述代码的执行结果为:”Alex is 42 years old.”
四、使用其它日志级别
除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息:
代码如下:
//Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");

从Firebug控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤

上面的例子可以用下面的无格式化占位符输出的代码替换:

本文由巴黎人游戏官网发布于前端开发,转载请注明出处:格式化字符串 类型,    今天我们重点要学的是

关键词: