<h3>debug</h3>javascript
<p>當你已經厭煩於各類斷點的時候,或者有的javascript代碼chrome暫時沒法格式化時,能夠直接使用debug方法</p>java
<pre><code>debug(ExampleApp.exampleFunction) </code></pre>chrome
<p>這樣每次<code>ExampleApp.exampleFunction</code>執行時都會自動斷點。若是須要關閉,再調用</p>數組
<pre><code> undebug(ExampleApp.exampleFunction) </code></pre>dom
<h3>monitor</h3>函數
<p>若是隻須要知道函數是否執行以及傳入函數的參數,使用<code>monitor</code>和<code>unmonitor</code></p>google
<h3>monitorEvents(object[, events])</h3>spa
<p>監控指定對象的相應事件,事件名能夠是一個字符串,也能夠是一個數組以監控多個事件,如</p>.net
<pre><code> monitorEvents(window, "resize"); monitorEvents(window, ["resize", "scroll"]) </code></pre>debug
<p>你也能夠指定下述某一特殊類型事件,它們都對應一類事件</p>
<table> <colgroup> <col style="text-align:left;"/> <col style="text-align:left;"/> </colgroup>
<thead> <tr> <th style="text-align:left;">事件名</th> <th style="text-align:left;">匹配事件</th> </tr> </thead>
<tbody> <tr> <td style="text-align:left;">mouse</td> <td style="text-align:left;">“mousedown”, “mouseup”, “click”, “dblclick”, “mousemove”, “mouseover”, “mouseout”, “mousewheel”</td> </tr> <tr> <td style="text-align:left;">key</td> <td style="text-align:left;">“keydown”, “keyup”, “keypress”, “textInput”</td> </tr> <tr> <td style="text-align:left;">touch</td> <td style="text-align:left;">“touchstart”, “touchmove”, “touchend”, “touchcancel”</td> </tr> <tr> <td style="text-align:left;">control</td> <td style="text-align:left;">“resize”, “scroll”, “zoom”, “focus”, “blur”, “select”, “change”, “submit”, “reset”</td> </tr> </tbody> </table> <p>當須要取消監控時,調用unmonitorEvents(object[, events])</p>
<h3>$_</h3>
<p>返回最新一次表達式執行的結果 <img src="http://static.oschina.net/uploads/space/2014/0318/150348_eXRA_1471654.png" alt="在此輸入圖片描述" /></p>
<h3>$(selector)</h3>
<p>等價於document.querySelector(selector)</p>
<h3>$$(selector)</h3>
<p>等價於document.querySelectorAll(selector)</p>
<h3>$0 - $4</h3>
<p>chrome會記住最近5個你在tab或者Profiles panel中選中的dom元素,$0是當前選中的,$1是上一個選中的,以此類推。</p>
<h3>$x(path)</h3>
<p>根據xpath表達式選擇元素</p>
<pre><code>$x("//p[a]") </code></pre>
<img src="http://static.oschina.net/uploads/space/2014/0318/150530_NBAX_1471654.png" alt="在此輸入圖片描述" />
<p>關於更多xpath的內容,能夠<a href="http://www.w3schools.com/xpath/xpath_syntax.asp">參考w3c相關內容</a></p>
<h3>clear()</h3>
<p>不用多說,清空console</p>
<h3>copy(object)</h3>
<p>複製指定對象的字符串描述到控制檯中</p>
<pre><code>copy($0); </code></pre>
<h3>dir(object)</h3>
<p>展現給定對象的屬性信息,等價於console.dir() 下面代碼展現了直接調用dir( document.body)和 document.body的區別</p>
<pre><code>document.body; dir(document.body); </code></pre>
<img src="http://static.oschina.net/uploads/space/2014/0318/150613_ZjmT_1471654.png" alt="在此輸入圖片描述" />
<h3>dirxml(object)</h3>
<p>相似於上述上面例子中document.body的展現信息</p>
<h3>inspect(object)</h3>
<p>比較有用的一個方法,能夠直接定位到須要調試的元素,如在控制檯中輸入</p>
<pre><code>inspect(document.body.firstChild); </code></pre>
<img src="http://static.oschina.net/uploads/space/2014/0318/150632_YbMS_1471654.png" alt="在此輸入圖片描述" />
<h3>getEventListeners(object)</h3>
<p>返回指定對象綁定的事件結果爲一個對象,對象每一個屬性爲事件名,結果爲一個數組,表示相應事件綁定的函數</p>
<img src="http://static.oschina.net/uploads/space/2014/0318/150645_IAoc_1471654.png" alt="在此輸入圖片描述" />
<h3>keys(object),values(object)</h3>
<p>返回指定對象全部屬性或者屬性值</p>
<h3>profile([name])和profileEnd([name])</h3>
<p>參考<a href="https://developers.google.com/chrome-developer-tools/docs/console#controlling_the_cpu_profiler">Controlling the CPU profiler</a></p>