浅析console和浏览器命令行API

一、console对象：

F12或者Control+Shift+i（Win）/ Alt+Command+i（Mac）打开浏览器自带的开发工具，选择顶部tab中的最后一项console，这样你就可以尽情的console了。

下面看看这个console对象给我们提供的各种方法。

1、log()、info()、debug()

console.info()和console.debug()都是console.log方法的别名，用法基本一样。console.info方法会在输出信息的前面，加上一个蓝色图标。所以这三个就说说log

console.log方法用于在console窗口输出信息。它可以接受多个参数，将它们的结果连接起来输出。这些都是比较基本的用法，输出需要调试的对象啥的，另外我们可以发现很多网站console出很多稀奇古怪的东西，啥图片啥LOGO整起

看看莫猫：

是不是很形象，果然是XX猫，很深动，这里看看他们是怎么实现的：

对于log来说他可以格式化输出，就像我们的C当中的格式化输出一样，什么%c%d换行\n啥啥啥的，当然log肯定和那个不一样咯

log提供的格式化输出主要有：

• %s 字符串
• %d 整数
• %i 整数
• %f 浮点数
• %o 对象的链接
• %c CSS格式字符串

OK：看看怎么输出1+1=2：

 console.log(" %s + %s ", 1, 1, "= 2")
 // 1 + 1  = 2

当然你也可以：console.log("1 + 1 = 2")

再看看

 console.log("%s\n+%s\n",1,1,"=2")
 1
 +1
  =2

OK:再看看猫猫怎么cosole出来的：

 var e = {info: "\u55b5~ \u52a0\u5165\u6211\u4eec\u5427 http://tb.cn/iS8NBOy",logo: " ::: ::: \n" + " ::::::: ::::: \n" + "::::::::: ::::::::\n" + ":::::::::::::::::::::::::::::::::::::::::::\n" + ":::: ::: :::::::::::::::: ::: ::::\n" + "::: Smart :::::cool:::: Crazy :::\n" + "::::: ::: ::::::::::::::: ::: :::\n" + ":::::::::::::::::::::::::::::::::::::::::::"};
 
 console.info(e.logo + "\n\n" + e.info)

Then:Log差不多了，对了还有css样式输出:对常见的富样式输出有两种：文字样式、图片输出。

文字样式输出比较简单：console.log("%c歘歘歘歘","font-size:20px;color:red")这样就会输出四个红色的chua

图片输出：先把效果拿出来看一下ha  Take a Photo

其实console.log不支持直接图片输出，但是支持css样式输出，所以我们可以绕过这个限制，用背景图哈哈哈哈哈是不是很聪明。但是我们没法像平时那样直接输出背景图，又得绕一圈，

就好像上面的示例，要输出一张60*60的图片，我们用padding来把整个区域撑开到我要的大小，然后还要设置line-height才行。

• line-height的值我取图片高度
• background这个是北京图片的url啥的
• padding左右两边的值是图片宽度的一半
• padding上下两边的值是图片高度的一半-7px

OK，现在是不是可以在控制台尽情的console了哇

2、warn() error()

warn方法和error方法也是输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。其他用法都一样。在这儿就不详说了

3、table() count() dir() assert() timeline()，timelineEnd()，timeStamp() profile()，profileEnd() group()，groupend()，groupCollapsed() trace()

这些个在平时的开发调试中用的比较少然后time()，timeEnd()会用到当然最后 最后的最后，该清场了。

clear()回到原点，本想把这些都写一下的，苦逼cxy没吃饭没力气了，console差不多了

二、命令行API：

上面的那些都是ECMAScript的对象console下的方法，下面这些是浏览器命令行的API，和ECMA好像没5毛钱关系：

$_: 返回上一个表达式的值,和上下左右不同，上下左右是得到上次输入到命令行的表达式，这个是得到上次的表达式的值。

$0 - $4：控制台保存了最近5个在Elements面板选中的DOM元素，$0代表倒数第一个，$1代表倒数第二个，以此类推直到$4。

$(selector) ：返回一个集合(ArrayLike)，包括特定的CSS选择器匹配的所有DOM元素。

$$(selector) ：返回一个集合(ArrayLike)，包括特定的CSS选择器匹配的所有DOM元素。

上面两个$$我理解的应该是为了和jquery或者zepto等库里面的$冲突而设定的，在控制台中首先是去找的jq和zepto里面的$，如果没有则调命令行API

另外https://developer.chrome.com/devtools/docs/commandline-api，谷歌开发者啥啥啥的上说的是得到一个数组，感觉不妥

下面几个用的不多：

$x(path)：方法返回一个数组，包含匹配特定XPath表达式的所有DOM元素。这个我没试过，感觉应该也是一个集合

inspect(object)：方法打开相关面板，并选中相应的元素：DOM元素在Elements面板中显示，JavaScript对象在Profiles中显示。

profile方法用于启动一个特定名称的CPU性能测试，profileEnd方法用于结束该性能测试。

copy(object)方法复制特定DOM元素到剪贴板。

dir(object)方法显示特定对象的所有属性，是console.dir方法的别名。

dirxml(object)方法显示特定对象的XML形式，是console.dirxml方法的别名。

clear()方法和console.clear()差不多

然后就是几个比较实用的几个API,可以快速帮助我们调试：

getEventListeners(object)：获取元素节点绑定了哪些事件

keys(object)，values(object) ：获取对象的所有key数组和value数组

monitorEvents(object,[events]) ，unmonitorEvents(object,[events])：监听制定节点的指定事件、停止监听事件

getEventListeners:

monitorEvents\unmonitorEvents:

keys\values:

.

monitorEvents允许监听同一大类的事件，不是我们平时所说的哪些什么click什么的。这些事件分成四个大类：

• mouse："mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
• key："keydown", "keyup", "keypress", "textInput"
• touch："touchstart", "touchmove", "touchend", "touchcancel"
• control："resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

  更多的一些命令行API可以移步：Google开发者文档之console OK差不多就这样了，