一些Chrome DevTools使用技巧

在前端開發調試中，咱們最常常用的就是Chrome DevTools了。以前在看《現代前端技術解析》這本書的時候，裏面提到了這麼一句話。

在Chrome瀏覽器中， 用F12打開控制檯後，一名優秀的前端工程師須要儘可能保證本身對裏面95%以上的操做和內容都很熟悉， 這樣才能夠說是基本運用自如。

95%這個數值感受有點高了，不過仍是說明了調試工具使用的重要性。因此我抽空把DevTools裏面的Document給閱讀了一遍，增強了一下本身的調試能力。

HTML、CSS

• Alt + Click 展開html全部節點

有時html的節點比較多，除了直接檢查（Ctrl + Shift + C）頁面元素來定位，還能夠經過Alt + Click來展開。

• Styles和Computed標籤欄中Filter要用起來

• 改變CSS值的快捷鍵

  • Alt+Up + 0.1
  • Up + 1
  • Shift+Up + 10
  • Ctrl+Up + 100

• Style欄中，.cls能夠添加新的類名，也能夠切換

這邊想到了以前直接調試加類名改變樣式的狀況，都是在左邊的DOM節點那邊直接編輯、刪除，如今想一想太蠢了。

• 更多操做工具條

添加顏色和陰影時能夠用到

• 顏色選擇

吸管工具能夠獲取頁面上的顏色，若是你想獲取網頁上的顏色又沒安裝chrome插件的話，能夠試試這個方法

JavaScript

• 能夠直接在 DevTools UI 內編輯 JavaScript 代碼， Ctrl+S保存更改

這個方法通常只能改會重複執行的代碼，只執行一次的改了話刷新的話又恢復到原來的代碼。

• 用斷點暫停代碼

斷點類型	使用場景
行斷點	特定區域的代碼
條件行斷點	特定區域的代碼，可是隻在某些條件下
DOM	改變、移除元素時，或者刪除子節點
XHR	URL包含某個字符串
事件監聽	在事件執行後觸發
異常	拋出的異常或者未拋出的異常
函數	某個特定函數執行時 debug(fn)

下面具體介紹你可能沒用到斷點方法：

條件行斷點：在左邊行號區域右鍵， 選擇 Add conditional breakpoint.

DOM改變斷點：

XHR斷點: 請求包含某個字符串時，會在XHR請求的地方斷點。

事件監聽斷點：事件觸發後產生斷點

函數斷點:

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();
複製代碼

• 調試中忽略一些代碼
  • 打開文件，右鍵選擇Blackbox script
  • 從執行棧中，右鍵操做

調試中若是能保證第三方庫沒問題，調試就能夠直接忽略文件，步進步出的時候就快一些。

• 格式化壓縮文件

Log

• $()是document.querySelector()

在控制檯中像jquery同樣快速查找元素

• $0 返回最近一次選擇的元素或 JavaScript 對象

• console.table() 以表格形式輸出，經常使用與打印後端返回的列表值

• console.dir() 能夠顯示一個對象全部的屬性和方法。

這個通常用來輸出DOM元素或者對象，還有一個技巧就是能夠打印原生對象的屬性和方法console.dir(Number)

• keys(object) 獲取對象的因此key值

• console.group() console.groupEnd() console.groupCollapsed() 信息按組輸出在控制檯

• console.count() 函數調用次數

• console.time() 和 console.timeEnd() 跟蹤代碼執行點之間通過的時間。

• getEventListeners(document) 獲取document元素上的因此事件監聽

總結

調試工具中還有分析運行性能、分析網絡情況、分析內存狀況，這些實踐性比較強一些，最好仍是本身去看下文檔，在找工做中一些項目練習一下。

其實，你可能看完了官方文檔，可是平時調試仍是和往常一下用之前的方法，因此還在須要在調試中多想一想有沒有更好的調試方法，固然前提是你接觸過這些方法。