Chrome Console使用技巧

打开浏览器，按F12，选择console标签页；出现浏览器控制台。

在Chrome下为了演示JS， 有时候我们需要将改变console的字体大小，将console的字体放大。方法是改变chrome自定义文件Custom.css的样式，路径在Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

Mac OS X: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets/

覆盖Chrome默认样式Custom.css:

body.platform-mac .monospace, body.platform-mac .source-code {
    font-family: Monaco, monospace;
}
 
// Keep .platform-mac to make the rule more specific than the general one above. 
body.platform-mac.platform-mac-snowleopard .monospace,
body.platform-mac.platform-mac-snowleopard .source-code {
    font-size: 11px !important;
    font-family: Menlo, monospace;
}
 
body.platform-windows .monospace, body.platform-windows .source-code {
    font-size: 12px !important;
    font-family: Consolas, Lucida Console, monospace;
}
 
body.platform-linux .monospace, body.platform-linux .source-code {
    font-size: 11px !important;
    font-family: dejavu sans mono, monospace;
}

console是没有引入jQuery库的，so...

但是能使用 $符 查找标签，能获取文档中的第一个标签

      $('a')

获取所有的a标签，用 $$

what's this?

这条语句让我们能直接编辑页面中所有的文本。

怎么同时打印出 字符串和对象，加号是没有用的，使用逗号

id选择器

事件监听

动态事件监听

鼠标滑过$('#masthead-search-term')这个元素，console会输出一个mouserover，和一系列mousemove

如果输入文字（$('#masthead-search-term')是个输入框）会在console会输出一系列键盘事件

如果想监视某个特定的事件，如 click

monitorEvents($('#masthead-search-term'), 'click')

如果想监视多个的事件，如 click，keyup，blur

monitorEvents($('#masthead-search-term'), ['click', 'keyup', 'blur')

但如果要消除某个事件的监视，

unmonitorEvents($('#masthead-search-term'), 'click')

计时器

错误信息

错误信息存储到对象中

我最喜欢的一个特性，数组对象的展示

算数表达式的结果继承

清空console，会消除所有的计算结果，但不会消除事件监听

     clear()

清空console的快捷键是 Ctrl + L ，不会消除计算结果，也不会消除事件监听

trace()

Profile

profile('aaa')

执行后，点击profile面板，能查看CPU状况

 dir 查看DOM节点属性

 dir($('#body-container'))

 切换到Element标签页查看DOM节点

$1 

 参考 https://www.youtube.com/watch?feature=player_embedded&v=2zmUSoVMyRU