首页 > 代码库 > Chrome控制台的console详述
Chrome控制台的console详述
Chrome控制台的console详述
在详述之前让我们来看看打开浏览器控制台的方式都有那些吧，毕竟这才是开始。
要想打开谷歌开发者工具，有三种方式
- ctrl+shift+i
- f12
- 在网页中右击鼠标，点击【审查元素】，你会打开浏览器的开发者工具
大家可以看到控制台里面有一首诗还有其它信息，如果想清空控制台，可以点击左上角那个
来清空，当然也可以通过在控制台输入console.clear()来实现清空控制台信息。如下图所示
现在假设一个场景，如果一个数组里面有成百上千的元素，但是你想知道每个元素具体的值，这时候想想如果你用alert那将是多惨的一件事情，因为alert阻断线程运行，你不点击alert框的确定按钮下一个alert就不会出现。
下面我们用console.log来替换，感受一下它的魅力。输入一下文字需要注意，在你点击换行时是不是直接运行了，在控制台换行使用shift + enter这个组合键
看了上面这张图，是不是认识到log的强大之处了，下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。
1、先说一下源码定位
大家打开测试网页 看到页面右下方有一个推荐的图标吗？右击推荐图标，选择审查元素，打开谷歌控制台，如下图所示
我们现在想知道votePost方法到底在哪？跟着我这样做，在Console面板里面输入votePost然后回车
直接点击上图标红的链接，控制台将定位到Sources面板中，展示如下图所示
大家看了上面这个图片之后估计头都要晕了吧，这么多js都整在一行，让人怎么看呀，不用担心，按下图操作即可（也就是点击中间面板左下方的Pretty print就行了）
这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了（其实这里的数字1或者91就是代表votePost方法在源码中的行号 ）现在看出Pretty print按钮的强大之处了吧
知道了怎么样查看某一个按钮的源码，那接下来的工作便是调试了，调试第一步需要做的便是设置断点，其实设置断点很简单，点击一下上图所示的92即 可，这时你会发现92行号旁边会多了一个图标，这里解释一下为什么不在91处设置断点，你可以试下，事实上根本就没法在91处上设置断点，因为它是函数的 定义处，所以没法在此设置断点。
设置好了断点后，你就会在右边Breakpoints方框里看到刚刚设置的断点。
我们先来介绍一下用到的调试快捷键吧（事实上我们也可以不用下表所示的快捷键，直接点击上图所示右侧栏最上层的一排按钮来进行调试，具体用哪个按钮，把鼠标放到按钮上方一会就会显示它相应的提示）
| 快捷键 | 功能 |
|---|---|
| F8 | 恢复运行 |
| F10 | 步过，遇到自定义函数也当成一个语句执行，而不会进入函数内部 |
| F11 | 步入，遇到自定义函数就跟入到函数内部 |
| Shift + F11 | 步出，跳出当前自定义函数 |
其中值得一提的是，当我们点击“推荐”按钮进行调试的时候会发现，不管我们是按的F10进行调试还是按F11进行逐步调试，都没法进行$.ajax函数内部，即使我们在函数内部设置了断点也没有办法进入，这里按F8才是真正起效果的，不信你试试。
当我们在调试的时候，右侧Scope Variables里面会显示当前作用域以及他的父级作用域，以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量，而且还能把鼠标直接移到任意变量上，就可以查看该变量的值。
用图说话（哈哈）
刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件，这样我们就找到它绑定的js函数，如果它是在jQuery页面加载完成函数里面绑定的，这时候我们怎么知道它绑定的是哪个js函数呢，如果我们不知道绑定的js函数就更加不用说调试进去了
下面介绍一下如何查看，还是以刚刚那个测试网页为例子吧，但是这次我们来看“提交评论”作说明吧，
右击“提交评论”-->审核元素，我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码
function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );}var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件如下图所示：
按照上述介绍的方法定位到具体的blog-common.js里面，找到postComment 然后一层层的找到具体的代码，再设置断点就好了。
最后介绍一下一个神器，很好用的debugger
如果你自己写的代码，你执行的时候想让它在某一处停下来，只要写上的debugger就好了，不信你试试！哈哈
谷歌控制台Elements面板
大家知道Elements面板最大的功能就是操作属性和修改html。这里我再说一些大家可能不太熟悉的特性，
- 拖拽节点, 调整顺序
- 拖拽节点到编辑器
- ctrl + z 撤销修改
这些功能是我觉得最有意思的，你们可以试试哦。
下面来具体说说几个复杂点的功能
查看元素上绑定的事情
- 默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点
- Selected Node Only 只会列出当前节点上绑定的事件
- 每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture
- handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler
- isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的
- useCapture 是 addEventListener 的第三个参数, 说明事件是以 冒泡 还是 捕获 顺序执行
样式操作
可以通过 ctrl + z 取消
总况
目前控制台方法和属性有：
["$$", "$x", "dir", "dirxml", "keys", "values", "profile", "profileEnd", "monitorEvents", "unmonitorEvents", "inspect", "copy", "clear",
"getEventListeners", "undebug", "monitor", "unmonitor", "table", "$0", "$1", "$2", "$3", "$4", "$_"]
下面我们来一一介绍一下各个方法主要的用途。
一般情况下我们用来输入信息的方法主要是用到如下四个
console.log：用于输出普通信息
console.info：用于输出提示性信息
console.error：用于输出错误信息
console.warn：用于输出警示信息
console.debug：用于输出调试信息
用图来说话
console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);%o占位符，可以用来查看一个对象内部情况
var dog = {};dog.name = "大毛";dog.color = "黄色";console.log("%o", dog);
下面重点说一下console.log的一些技巧
1、重写console.log 改变输出文字的样式
而关于console.log，早已被玩儿坏了。一切都源于Chrome提供了这么一个API：第一个参数可以包含一些格式化的指令比如%c。
比如给hello world 做件漂亮的嫁衣再拉出来见人：
console.log(‘%chello world‘,‘font-size:25px;color:red;‘);
如果你觉得不够过瘾，那就把你能写出来的最华丽的CSS样式都应用上吧，比如渐变。于是你可以得到如下华丽丽的效果：
console.log(‘%chello world‘, ‘background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22),
color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2),
color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;‘);
2、利用控制台输出图片
console.dirxml:用来显示网页的某个节点（node）所包含的html/xml代码
<body> <table id="mytable"> <tr> <td>A</td> <td>A</td> <td>A</td> </tr> <tr> <td>bbb</td> <td>aaa</td> <td>ccc</td> </tr> <tr> <td>111</td> <td>333</td> <td>222</td> </tr> </table></body><script type="text/javascript"> window.onload = function () { var mytable = document.getElementById(‘mytable‘); console.dirxml(mytable); }</script>
console.group和console.groupEnd : >输出一组信息的开头和输出结束一组输出信息
看你需求选择不同的输出方法来使用，如果上述四个方法再配合group和groupEnd方法来一起使用就可以输入各种各样的不同形式的输出信息。
console.assert : 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台
console.count : （这个方法非常实用哦）当你想统计代码被执行的次数
console.dir : (这个方法是我经常使用的 可不知道比for in方便了多少) 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等等
console.time和console.timeEnd : 计时开始和计时结束（看了下面的图你瞬间就感受到它的厉害了）
console.profile和console.profileEnd : 配合一起使用来查看CPU使用相关信息
在Profiles面板里面查看就可以看到cpu相关使用信息
console.timeLine和console.timeLineEnd : 配合一起记录一段时间轴
console.trace
堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。
上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是Chrome内置提供，在控制台中使用的，他们统称为Command Line API。
$
似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」，在Chrome的控制台里，$用处还真是蛮多且方便的。$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：
2+2//回车，再$_+1//回车得5
上面的$_需要领悟其奥义才能使用得当，而$0~$4则代表了最近5个你选择过的DOM节点。
什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
另外值得一赞的是，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点，多么滴熟悉。
$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。
copy
通过此命令可以将在控制台获取到的内容复制到剪贴板(如果在elements面板中选中某个节点，也可以直接按ctrl+c执行复制操作)
（哈哈 刚刚从控制台复制的body里面的html可以任意粘贴到哪 比如记事本 是不是觉得功能很强大）
keys和values
这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：
var tboy={name:‘wayou‘,gender:‘unknown‘,hobby:‘opposite to the gender‘};keys(tboy);values(tboy);
console.table
monitor & unmonitor
monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。
而unmonitor(function)便是用来停止这一监听。
看了这张图，应该明白了，也就是说在monitor和unmonitor中间的代码，执行的时候会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。当解除监视（也就是执行unmonitor时）就不再在控制台输出信息了。
Console.log样式
| 格式化符号 | 实现的功能 |
|---|---|
| %s | 格式化成字符串输出 |
| %d or %i | 格式化成数值输出 |
| %f | 格式化成浮点数输出 |
| %o | 转化成展开的DOM元素输出 |
| %O | 转化成JavaScript对象输出 |
| %c | 把字符串按照你提供的样式格式化后输入 |
说了上面一堆公式，还是举个例子让你印象深刻一些，哈哈。
在控制台输入如下代码
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");console.log(‘%cRainbow Text ‘, ‘background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;‘);输出的结果如下图所示：
这确实是一个很全的关于谷歌浏览器控制台中console的介绍。。里面加入了自己的一点操作。。。很好用
摘自：http://www.cnblogs.com/liyunhua/p/4529079.html#_label10
http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html
Chrome控制台的console详述