分享一些 Chrome 瀏覽器的前端調試技巧

前言

相信大部分前端同窗都是用Chrome瀏覽器進行開發，這篇博客要分享的基本上是除了咱們經常使用console.log以外的，Chrome開發者工具控制面板提供的調試方法~

首先在地址欄敲入：about:blank 建立一個空白頁，再打開控制檯~

開始操做演示~（多圖預警！~~

關於console

關於console對象，其實提供了很豐富的API，可自查文檔~

關於Console控制面板

如下示例方法只存在於Chrome控制檯Console面板~在JavaScripts中寫是沒有的哦!

$家族

$_

返回上一個被執行過的值~

雖然說很相似於命令行裏的!!，可是$_並不會再執行一次表達式，以下圖可證：

若是以前的值沒有保存在變量裏，能夠經過這個方法臨時訪問~（爲何說臨時，由於當你執行完下一個表達式後，$_已經更新了哈）

$0 - $4

$0、$一、$二、$三、$4五個指令至關於在Elements面板最近選擇過的五個引用。 好比我在Elements面板上隨意點擊了掘金網站上的五個DOM節點。從時間線上，$4是我第一個點擊的。而$0是我第五個，也便是最後一個點擊的。利用此方法能夠快速在Console面板調試你選中的節點！

補充一下，還有點相似正則匹配~以下所示

function replacer(match, $1, $2, $3, $4, $5) {
  return [$1, $2, $3, $4, $5].join(' - ');
}
const str = 'abc12345#$*%[hello]{world}'
    .replace(/([^\d]*)(\d*)([^\w]*)(\[.*\])(\{.*\})/, replacer);

console.log(str); // abc - 12345 - #$*% - [hello] - {world}
複製代碼

$

相似於document.querySelector()。不過比較少爲人知的應該是它的第二個參數。指定從哪一個節點開始選擇。有時候想減小範圍時，尤爲管用！

P.S. 函數簽名$(selector, [startNode])。

$$

相似於document.querySelectorAll()，可參考同上。

P.S. 函數簽名$$(selector, [startNode])

$x

根據XPath表達式去查找節點。以下圖示例：

查找掘金站內全部含有href屬性的a節點，而後遍歷過濾含有http或https的節點~ 固然好像目前來講，大部分狀況直接用$、$$能夠覆蓋，說不定特殊狀況下$x會頗有用。有須要的同窗能夠了解學習一下~ XPath表達式規則可參考：www.w3schools.com/xml/xpath_s…

P.S. 函數簽名$x(selector, [startNode])

API工具方法

如下方法一樣只存在於Chrome控制檯Console面板裏，同窗們請注意哦~

keys/values

見名知意。功能相似於Object.keys，Object.values

monitor/unmonitor

用來觀察函數調用的工具方法。在函數調用的時候，能夠同步輸出函數名以及參數。

當再也不須要觀察該函數時，調用unmonitor取消便可。

可是匿名函數不會生效，由於獲取不到名字.

monitorEvents/unmonitorEvents

能夠觀察對像的事件~

也能夠同時觀察對象的多個事件~

一樣，使用unmonitorEvents取消觀察。結合以上的$家族一塊兒使用更便利哦

P.S. 函數簽名：monitorEvents(object[, events])

copy

快速拷貝一個對象爲字符串表示方式到剪切板~

getEventListeners

獲取註冊到一個對象上的全部事件監聽器~

其實還有內置的inspect、debug/undebug等方法，你們能夠自行搜索，都頗有用~這裏就不一一介紹了~

關於斷點調試

斷點調試十分重要，以往咱們可能直接在代碼裏添加debugger，而後刷新瀏覽器調試。實際上除了這種方法外還有不少種斷點。

DOM breakpoint

在Elements面板，右鍵點擊節點喚出菜單，添加對應的DOM斷點，能夠監測指定節點的子樹修改、屬性修改、以及節點的移除。

Source breakpoint

有時候無需在源碼中添加debugger。直接在Source面板添加斷點便可調試。見下圖行號上的小藍色箭頭！

Conditional breakpoint

條件斷點。只有符合條件時，纔會觸發斷點。見下圖行號上的小橙色箭頭！

除此以外，還有blackbox、XHR(fetch) breakpoint等各類Chrome提供的工具，建議同窗們多去了解一下，說不定關鍵時候能夠發揮很大的做用~

小技巧

若是找不到對應的指令，能夠在控制檯使用快捷鍵Ctrl + Shift + P。MacOS的話就是Command + Shift + P（這個和編輯器是同樣的道理）。快速搜索你想要的控制面板工具~

小結

其實長久以來，我也一直只會用console.log和簡單的debugger來調試Web應用，有時候遇到複雜的問題時，匱乏的調試方法種類難以快速定位問題，從而下降工做效率。所以針對此類狀況，學習如何更好的調試相信是會對工做有極大的幫助！

最後，歡迎同窗們補充或指正這些調試工具方法~

固然，對你們若有幫助，不甚榮幸~