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

发布时间:2019年07月29日 阅读:81 次

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

相比alert他的优点是:

1、他能看到结构化的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容。

2console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

3console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到:

如果想清空控制台,可以点击左上角那个来清空,当然也可以通过在控制台输入console.clear()来实现清空控制台信息。

console.log()定义

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

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

语法:console.log(var);

image.png

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

console.log()用法

1console.log()打印字符串

<script>

var str = 'hi-laoz.com';

console.log(str);

var str2 = '老曾的博客';

console.log(str2);

</script>

2console.log()打印数组

<script>

var arr = new Array('beijing','shandong','hangzhou','guangdong');

console.log(arr);

</script>

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

<script>

var obj = { Host: "http://www.hi-laoz.com", Name: "老曾的博客"};

console.log(obj);

</script>

console.log()高级用法

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

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

格式占位符作用

一文搞懂JS调试之console.log()作用与用法

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

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

<!DOCTYPE html>

<html>

<body>

<title>测试console</title>

<div id="laoz">老曾的博客<br/>http://www.hi-laoz.com</div>

<p>浏览器中按 F12 可以打开浏览器的控制台</p>

<script>

console.log(document.body);

console.log('%o',document.body);

console.log('%O', document.body);

</script>

</body>

</html>

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

<html>

<body>

<title>测试console</title>

<div id="laoz">老曾的博客<br/>http://www.hi-laoz.com</div>

<p>浏览器中按 F12 可以打开浏览器的控制台</p>

<script>

var obj = {'name':'laoz','age':'22','page':'http://www.hi-laoz.com'};

console.log('%o',obj);

console.log('%O', obj);

</script>

</body>

</html>

image.png

注意:

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

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

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

// 格式成可展开的的DOM,像在开发者工具Element面板那样可展开

console.log('%o',document.body.firstElementChild);

// JS对象那样访问DOM元素,可查看DOM元素的属性

// 等同于console.dir(document.body)

console.log('%O',document.body);

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

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

<script>

console.log('%d + %d =' ,1,2,3);

</script>

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

<script>

console.log('%i + %i =' ,1,2,3);

</script>

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

<script>

console.log('老曾%c%c博客' ,'color:red','color:blue');

</script>

image.png

注意:

console不能定义img,因此用背景图片代替。

console不支持widthheight,利用空格和font-size代替;还可以使用paddingline-height代替宽高。

console输出url会自动变为可以点击的超链接。;

以上就是JS调试之console.log()作用与用法,希望这篇文章对您有所帮助!如有什么需要补充的欢迎到我们的网站进行留言!http://www.javascriptedu.com

Tag:S调试之console.log()作用与用法 console.log()
相关文章

发表评论: