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...

$('.class #id')

null

jQuery

 

ReferenceError: jQuery is not defined

 

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

      $('a')

1. <a href=​"#" onclick=​"yt.www.masthead.accountswitch.toggle()​;​ return false;​">​‹ 返回​</a>​

$('a') === document.querySelector('a')

true

 

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

document.querySelectorAll('a').length

81

$$('a').length

81

 

what's this?

document.body.contentEditable = true

true

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

 

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

console.log('window' + window)

window[object Window] VM2058:2

undefined

console.log('window', window)

window

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

VM2119:2

undefined

 

id选择器

 

$('#body-container')

<div id="body-container">...</div>

 

事件监听

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

 

Object {mousedown: Array[1], click: Array[1]}

 

动态事件监听

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

undefined

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

 

mouseover

 

MouseEvent {dataTransfer: null, toElement: input#masthead-search-term.search-term.yt-uix-form-input-bidi, fromElement: div#masthead-search-terms.masthead-search-terms-border, y: 12, x:392…}

VM1973:1417

mousemove

 

MouseEvent {dataTransfer: null, toElement: input#masthead-search-term.search-term.yt-uix-form-input-bidi, fromElement: null, y: 12, x: 392…}

VM1973:1417

mousemove

 

MouseEvent {dataTransfer: null, toElement: input#masthead-search-term.search-term.yt-uix-form-input-bidi, fromElement: null, y: 9, x: 378…}

VM1973:1417

mousemove

 

MouseEvent {dataTransfer: null, toElement: input#masthead-search-term.search-term.yt-uix-form-input-bidi, fromElement: null, y: 9, x: 377…}

VM1973:1417

...

 

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

keyup

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

keydown

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

keypress

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

textInput

 

TextEvent {data: "s", which: 0, pageY: 0, pageX: 0, layerY: 0…}

VM1973:1417

keyup

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

keydown

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

keypress

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

textInput

 

TextEvent {data: "t", which: 0, pageY: 0, pageX: 0, layerY: 0…}

VM1973:1417

keyup

 

KeyboardEvent {altGraphKey: false, metaKey: false, altKey: false, shiftKey: false, ctrlKey: false…}

VM1973:1417

 

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

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

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

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

 

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

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

 

 

计时器

console.time('myTime')

undefined

console.timeEnd('myTime')

myTime: 11662.000ms

console.time('myLoop'); for(var i=0;i<100000;i++){ 2+2*3 } console.timeEnd('myLoop');

myLoop: 108.000ms VM4932:8

undefined

 

错误信息

for( var i=3;i--;){ console.error(i) }

1.  

错误信息存储到对象中

console.groupCollapsed('myError'); for(var i=3;i--;){ console.error(i); } console.groupEnd()

 

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

var myArray = [{ a:1, b:2, c:3}, { a:1, b:2, c:3}, { a:1, b:2, c:3, d:'ttt'}]; console.table(myArray)

 

 

算数表达式的结果继承

2+2

4

$_*$_

16

$_+$_

32

Math.sqrt($_)

5.656854249492381

 

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

     clear()

$_

undefined

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

 

trace()

console.trace()

1. console.trace() VM150:2
1. (anonymous function)VM150:2
2. InjectedScript._evaluateOnVM62:581
3. InjectedScript._evaluateAndWrapVM62:540
4. InjectedScript.evaluateVM62:459

undefined

 

Profile

profile('aaa')

Profile 'aaa' started. VM4643:1285

undefined

profileEnd('aaa')

Profile 'aaa' finished. VM4643:1290

undefined

 

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

 

 

 dir 查看DOM节点属性

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

 

div#body-container

1. accessKey: ""
2. align: ""
3. attributes: NamedNodeMap
4. baseURI: "https://www.youtube.com/watch?feature=player_embedded&v=2zmUSoVMyRU"
5. childElementCount: 8

 

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

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

1. <div id="body-container">...</div>

inspect($$('a')[2])

1. <a class=​"end" href=​"#" onclick=​"document.logoutForm.submit()​;​ return false;​">​退出所有帐户​</a>​

$0

1. <a class=​"end" href=​"#" onclick=​"document.logoutForm.submit()​;​ return false;​">​退出所有帐户​</a>​

$1 

    <div id="body-container">...</div>

  

 

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