對於前端開發者來說，
ChromeDevTools絕對是不可或缺的除錯工具，我們常用的除錯方法包含一些console等，而ChromeDevTools其實很強大，下面來聊聊一些你可能不知道的debug方法。
Scroll Into View 滾動如檢視內
在Elements 標籤中，檢視頁面元素的時候，如果當前這個元素不在檢視內，可以通過這個方法讓這個元素快速滾入檢視中。
操作：
- 在
Elements標籤頁中選擇一個不在檢視內的元素 - 右擊，選擇
Scrollintoview
Copy As Fetch 複製為 Fetch
在Network 標籤下的所有的請求，都可以複製為一個完整的Fetch 請求的程式碼。
操作：
- 在
Network標籤頁中，選中一個請求 - 右擊，選擇
Copy–>Copyasfetch
阻塞請求
在Network 標籤頁下，選中一個請求，右擊該請求，選擇Blockrequest domain 或Blockrequest URL，可以分別阻塞該請求所在domain 下的所有請求 和 該請求。
手動給元素新增一個點選事件監聽
在debug 的時候，有時候需要在元素的點選事件監聽函式中，將該點選事件物件列印出來。有個更方便的方式，是可以直接在Elements 標籤頁為頁面元素新增事件監聽事件。
操作：
- 在
Elements標籤頁中選中一個頁面元素（選中之後，預設可以通過$0變數獲取到該元素 ） - 在
Console標籤頁中，呼叫函式monitorEvents，輸入兩個引數，第一個是當前元素（$0），第二個是事件名（click） - 按
Enter後，當被選中的元素觸發了點選事件之後，Console標籤頁會將該點選事件物件列印出來
拖動頁面元素
在Elements 標籤頁，你可以拖動任何HTML 元素，改變它在頁面中的位置。
操作：如下圖。
DOM 斷點除錯
基本上大家都會用JavaScript 的斷點除錯，但是應該很多人不知道DOM 節點也可以進行斷點除錯。ChromeDevTools提供了三種針對DOM 元素的斷點除錯：子元素改變時、屬性改變時 和元素被移除時。
操作：
- 在
Elements標籤頁，選中一個元素 - 右擊，選擇
Breakon–>subtree modifications(或attribute modifications或node removal )
截圖
在新版本的Chrome 中，提供了一個截圖的API，你可以將整個頁面截圖或者擷取部分頁面元素，且擷取的圖片尺寸跟瀏覽器當前檢視中要擷取的內容所佔尺寸一致。截圖輸出的是png 格式的圖片，會自動通過瀏覽器下載到預設的目錄下。現在有三種擷取的方式：擷取整個頁面、部分元素 或當前檢視。
擷取頁面部分元素的操作：
- CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 開啟命令選單
- 在
Elements標籤頁，選中要擷取的頁面元素 - 選擇 Capture node screenshot
擷取完整頁面的操作
CMD + SHIFT + P(windows 中用CTRL + SHIFT + P) 開啟命令選單- 選擇 Capture full size screenshot （不需要選擇頁面元素）
擷取當前檢視內的頁面
- CMD + SHIFT + P (windows 中用CTRL + SHIFT + P) 開啟命令選單
- 選擇 Capture screenshot （不需要選擇頁面元素）
快取上一步操作的結果
在ChromeDevTools 上執行JavaScript 表示式的時候，可以使用$_ 來獲取到上一步操作的返回值。
Overrides 重寫
在ChromeDevTools上除錯css 或JavaScript時，修改的屬性值在重新重新整理頁面時，所有的修改都會被重置。如果你想把修改的值儲存下來，重新整理頁面的時候不會被重置，那就看看下面這個特性（Overrides）吧。Overrides 預設是關閉的，需要手動開啟，開啟的步驟如下。
開啟的操作：
- 開啟
ChromeDevTools的Sources標籤頁 - 選擇
Overrides子標籤 - 選擇
+Selectfolderforoverrides，來為Overrides設定一個儲存重寫屬性的目錄
小結
ChromeDevTools
也很歡迎大家留言，說說對你來說很好用的小技巧~