快捷搜索:  汽车  科技

js的log是什么(JS调试之console.log作用与用法)

js的log是什么(JS调试之console.log作用与用法)2、console.log()打印数组<script> var str = 'feiniaomy.com'; console.log(str); var str2 = '飞鸟慕鱼博客'; console.log(str2); </script> 打印结果:console.log(var); 参数:var:变量,可以是数组类型,对象类型,或者字符串类型等1、console.log()打印字符串

在前端调试js代码的时候,很多人都喜欢用 alert() 来进行调试,但是 alert() 会阻断JS的运行,而且对一些类型的变量无法输出,这就造成了不少的麻烦。针对这个问题,这篇文章就说一说js中的别一种调试方法 console.log()

console.log()定义

console.log():可以将变量输出到浏览器的控制台中,方便开发者调用JS代码,它是一个使用频率很高的功能。

提示:浏览器中按 F12 可以打开浏览器的控制台(也可以叫做开发者工具)

语法:

console.log(var);

参数:

var:变量,可以是数组类型,对象类型,或者字符串类型等

console.log()用法

1、console.log()打印字符串

<script> var str = 'feiniaomy.com'; console.log(str); var str2 = '飞鸟慕鱼博客'; console.log(str2); </script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(1)

2、console.log()打印数组

<script> var arr = new Array('beijing' 'shandong' 'hangzhou' 'guangdong'); console.log(arr); </script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(2)

3、console.log打印一个对象变量

<script> var obj = { Host: "http://www.feiniaomy.com" Name: "飞鸟慕鱼博客"}; console.log(obj); </script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(3)

console.log()高级用法

console.log()可以通过一些特有的占位符进行信息的加工输出,当然你只要粗略的了解一下即可

console.log()用到的占位符号

%s:字符串

%d:整数

%i:整数

%f:浮点数

%o:obj对象

%O:obj对象

%c:CSS样式

例:利用console.log()打印出对象和DOM节点,

1、打印一个DOM节点,区别占位符 %o 与 %O不同

<!DOCTYPE html> <html> <head> </head> <body> <div id="mochu">飞鸟慕鱼博客<br/>http://www.feiniaomy.com</div> <script> console.log(document.body); console.log('%o' document.body); console.log('%O' document.body); </script> </body> </html>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(4)

2、打印一个obj对象,区别占位符 %o 与 %O不同

<script> var obj = {'name':'MOCHU' 'age':'22' 'page':'http://www.feiniaomy.com'}; console.log(obj); console.log(obj); console.log(obj); </script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(5)

注意:

1、%o、%O都是用来输出Obj对象的

2、%o、%O在打印普通对象时,是没有区别的

3、%o、%O在打印DOM节点时,区别是很大的

例:利用console.log()打印整数,

1、使用%d占位符,并进行计算

<script> console.log('%d %d =' 1 2 3); </script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(6)

2、使用%i占位符并进行计算

<script> console.log('%i %i =' 1 2 3); </script>

js的log是什么(JS调试之console.log作用与用法)(7)

例:利用console.log()打印带有样式的文字

<script>

console.log('飞鸟%c慕鱼%c博客' 'color:red' 'color:blue');

</script>

打印结果:

js的log是什么(JS调试之console.log作用与用法)(8)

猜您喜欢: