chrome調試中使用Command Line API

<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, &quot;resize&quot;); monitorEvents(window, [&quot;resize&quot;, &quot;scroll&quot;]) </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;">&#8220;mousedown&#8221;, &#8220;mouseup&#8221;, &#8220;click&#8221;, &#8220;dblclick&#8221;, &#8220;mousemove&#8221;, &#8220;mouseover&#8221;, &#8220;mouseout&#8221;, &#8220;mousewheel&#8221;</td> </tr> <tr> <td style="text-align:left;">key</td> <td style="text-align:left;">&#8220;keydown&#8221;, &#8220;keyup&#8221;, &#8220;keypress&#8221;, &#8220;textInput&#8221;</td> </tr> <tr> <td style="text-align:left;">touch</td> <td style="text-align:left;">&#8220;touchstart&#8221;, &#8220;touchmove&#8221;, &#8220;touchend&#8221;, &#8220;touchcancel&#8221;</td> </tr> <tr> <td style="text-align:left;">control</td> <td style="text-align:left;">&#8220;resize&#8221;, &#8220;scroll&#8221;, &#8220;zoom&#8221;, &#8220;focus&#8221;, &#8220;blur&#8221;, &#8220;select&#8221;, &#8220;change&#8221;, &#8220;submit&#8221;, &#8220;reset&#8221;</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(&quot;//p[a]&quot;) </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>

相關文章
相關標籤/搜索