浏览器--控制台（console）调试--使⽤教程实例
原⽂⽹址：
简介
说明
本⽂⽤⽰例介绍浏览器使⽤控制台（console）调试前端的⽅法。
Console API提供了允许开发⼈员执⾏调试任务的功能，Console对象提供了浏览器控制台调试的接⼝。浏览器都实现了这个接⼝，⽐如：⾕歌浏览器、⽕狐浏览器、360浏览器、Safari浏览器、IE浏览器等等。也就是说：所有浏览器都可以⽤console进⾏调试。
官⽹
MDN：
查看所有功能
法1：运⾏console命令
法2：console.dir(console)
技巧
如果想要换⾏⽽不是直接执⾏命令，则按下：shift+enter
查看某个元素的：getEventListeners(document.querySelector('.someclass'));
注意：此⽅法是Chrome浏览器的，在JS中⽆法直接使⽤。
console.clear
console.clear();  //清空控制台
console.log家族
⽤法1：基本⽤法
console.log ('普通信息')
console.info ('提⽰性信息')
console.warn ('警⽰信息')
< ('错误信息')
结果如下
⽤法2：输出对象
单纯对象
var myObj = {
name: 'haha',
sex: 'male',
obj: function(){
console.log("hello");
}
}
console.log(myObj);
DOM对象
HTML⽂件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div>
这是个Demo
</div>
</body>
</html>
输出结果：
⽤法3：输出指定id的DOM节点代码
<head>
<meta charset="UTF-8">
<title>this is title</title>
jquery学习在线教程</head>
<body>
<div id="abc">
这是个Demo
</div>
</body>
</html>
执⾏结果
注意：⽤$('#abc')可以达到同样效果。
格式化
console对象的上⾯4种⽅法，都可以使⽤printf风格的占位符。不过，占位符的种类⽐较少，只⽀持下边⼏种。        console.log() 接收不定参数，参数间⽤逗号分隔，最终会输出会将它们以空⽩字符连接。
符号含义
%d
数字
或%i
%s字符串
%f浮点数
%c css格式
%o对象
⽰例
console.log("%d年%d⽉%d⽇",2011,3,26);
console.log("%s是%f","圆周率",3.1415926);
console.log("这个表⽰CSS样式%c红⾊","color:red", "炫酷吧")
结果：
对象输出⽰例
console.log("%o", dog);
结果：
简介
适合于在开发⼀个规模很⼤模块很多很复杂的Web APP时，将各⾃的log信息分组到以各⾃命名空间为名称的组⾥⾯。
⽰例
console.warn("来⾃bundle模块的警告信息1");console.warn("来⾃bundle模块的警告信息2");
console.log("来⾃bundle模块的信息1");console.log("来⾃bundle模块的信息2");
结果如下
这样的控制台信息看上去就⼀⽬了然了，就不⽤再为了这是属于那⼀⾏代码输出的再翻⼀遍源码了。
console.dir()
说明
输出打印对象的详细键值对信息。
若该对象为HTML元素，则该元素的DOM的表达式会按DOM树输出。 这个⽅法是我经常使⽤的，⽐for in⽅便了很多，可以详细查对象的⽅法。
⽰例1：普通对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。