JS调试之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调试之console.log()作用与用法

2、console.log()打印数组

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

复制

打印结果：

JS调试之console.log()作用与用法

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

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

复制

打印结果：

JS调试之console.log()作用与用法

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调试之console.log()作用与用法

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调试之console.log()作用与用法

注意：

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调试之console.log()作用与用法

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

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

复制

打印结果：

JS调试之console.log()作用与用法

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

<script>
    console.log('飞鸟%c慕鱼%c博客' ,'color:red','color:blue');
</script>

复制

打印结果：

JS调试之console.log()作用与用法

posted @ 2021-10-29 21:13  aixuexi666888  阅读(17468)  评论(0)  编辑  收藏  举报