優雅且高效的使用Chrome Developer Tools

主要內容：

1. 記錄ex的 $_
2. 記錄現任的 $0
3. 簡潔的 $(selector) 和 $$(selector)
4. 拷貝Object的 copy(Object)
5. 更優雅的打斷點 debug(function)
6. 列出對象的全部屬性 dir(objcet) 和 列出事件的getEventListeners(object)
7. 記錄方法的 monitor(function) 和 記錄事件的 monitorEvents(object[, events])
8. 表格化顯示object table(data[, columns])

記錄ex的 $_

$_是上一次表達式的計算結果。

舉個例子： 須要計算天天,每一年都有多少秒。

很簡單：

image

記錄現任的 $0

調試的時候，很方便的取到選擇的dom節點

image

另外$1 $2 $3 $4 是前幾回選擇的dom，不過這幾個就更不經常使用了。

簡潔的 $(selector) 和 $$(selector)

不少時候，頁面沒有引入jQuery之類的庫或者是這些庫被做爲模塊加載到頁面中，那麼window中就不會有dom選擇器，這時候咱們通常會用：

1	document.querySelector()

或者是

1	document.querySelectorAll()

其實在Chrome中他們有兩個好基友，分別是$(selector) 與 $$(selector)。有了這兩位之後，不再要輸入那麼長的API了。

image

拷貝Object的 copy(Object)

右鍵複製HTML？不，有更好的：

image

更優雅的打斷點 debug(function)

不少時候，咱們須要在運行到某一個方法的打個斷點，以前的方式是打開這個文件，而後點一下，設置一個斷點，但如今有一種很優雅的方式來作到這個：

好比，我想在jQuery.data方法的時候中斷下：

對了，這幅圖，還複習了前面兩個優雅的方法。

image

而後，就會跳轉到sources調試的地方，這對於被壓縮的代碼，更是一種方便。

image

對了，取消的只要一行代碼：

1	undebug( function)

列出對象的全部屬性 dir(objcet) 和 列出事件的getEventListeners(object)

舉個例子，咱們想看一個dom節點的全部屬性：

image

若是想看這個dom上都有一些什麼事件：

image

是否是很優雅~

記錄方法的 monitor(function) 和 記錄事件的 monitorEvents(object[, events])

仍是用jQuery的data來舉例，有時候咱們只是想知道這個方法被調用幾回還有參數之類的，那麼能夠

image

若是須要監控事件被調用了幾回、event對象是什麼：

image

1 2 3 4

monitorEvents( window, "resize"); unmonitorEvents( window, "resize"); monitorEvents( window, [ "resize", "scroll"]) unmonitorEvents( window, [ "resize", "scroll"])

能夠監控的事件有：

Event type	Corresponding mapped events
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」

表格化顯示object table(data[, columns])

和後臺開發扯皮數據的時候特別有用，丟這截圖給他，用你的優雅，亮瞎他，揮一揮衣袖，哈哈哈。

image

主要內容：

1. 隨意的文件跳轉
2. 隨意的方法跳轉
3. 靈活的斷點設置，我要你停你才停
4. 快速打開關閉Console
5. Elements頁卡中幾個有用的快捷鍵
6. 指定的XHR斷點
7. 快速模擬移動設備

以前有分享到咱們能夠經過 Command Line API 來提升咱們的開發效率。除此以外，還有一些比較有趣的快捷鍵和調試方法，也能幫助提升你們的生產效率。
幾個小事項：

1.文中提到的快捷鍵 command 在WIN下都是對應Ctrl；
2.當焦點在dev tools上時，快捷鍵纔有效~。

隨意的文件跳轉

使用Sublime的同窗，必定很是喜歡command + p，這種隨意的文件跳轉，其實dev tools中也有相似的跳轉，並且快捷鍵也是：

1 2	command + p // 跳轉到對應文件 command + p + : + 數字 // 跳轉到對應文件對應行

隨意的文件跳轉

是否是不再用在Sources中，用鼠標一個一個找文件了。

隨意的方法跳轉

Sublime中，command + R是跳轉到方法，漂亮的是 dev tools中也有相似的快捷鍵：

1	command + shift + o

來，咱們先用command + p打開一個文件，而後command + shift + o,跳轉到任意一個方法。

隨意的方法跳轉

靈活的斷點設置，我要你停你才停

不少時候，須要在循環中打個斷點，着實麻煩，不得不一次又一次的運行循環，直到咱們須要的那個條件時候中止，手快的時候多按了，那就只好從頭再來一次了。

咱們在斷點的時候是能夠設置一個 Breakpoint 的,知足條件的時候才中止，下圖演示了一個，當消息id爲所肯定消息時候，斷點才生效。

靈活的斷點設置

快速打開關閉Console

屏幕不是很大的時候，通常都都會關掉Console，使得代碼的可視範圍能大一些，而後經過點擊右上角的Show/Hide drawer按鈕來打開或者關閉Console。其實這時候，能夠快捷的使用ESC鍵來打開或者關閉Console。

快速打開關閉Console

Elements頁卡中幾個有用的快捷鍵

1.方向鍵快速選擇，上下鍵快速導航，左右鍵收起展開；

2.enter快速編輯屬性；

3.tab屬性切換；

4.H鍵快速隱藏dom，知道這個快捷鍵以前，我要麼刪除dom看效果，要麼手工輸入display:none，有H就方便多了。

Elements

指定的XHR斷點

有時候，咱們須要在指定的xhr請求的時候，有一個斷點，那能夠這樣：

指定的XHR斷點

而後能夠經過call stack快速的找到對應的代碼。

快速模擬移動設備

打開dev tools，而後執行如下快捷鍵：

1 2	command + shift + M // 切換模擬Device command + shift + R // 刷新頁面。

模擬移動設備

另外，強烈建議你們都升級到chrome 38以上版本，能夠模擬網絡環境，對移動開發真是在好不過了。