Chrome DevTools(開發者工具) 全攻略

      經過Chrome DevTools(開發者工具) 來了解 Chrome 瀏覽器，提升開發效率。

　                                                             console 面板

　        打開 console 面板的快捷鍵：  Windows：Control + Shift + J

　　　　　　　　　　　　　　　　       Mac：Command + Option + J

　　　　  首先來看下 console  有哪些方法：

　　　　　　　　　　　　　　　　　　　　

                   1、console.clear()：顧名思義，就是清空控制檯

　　　　　 2、console.log()，console.info()，console.warn()，console.error()

　　　　　　　　           

                            

 　　　　　          使用佔位符：

　　　　　　　　　支持使用逗號分割參數，不須要每一個參數都單獨打印。

　　　　　　　　　     

　　　　　　　　   佔位符：%s

　　　　　　　　　　                

 　　　　　　　　　　  佔位符 %s  所在的位置會替換成其所在字符串的後面的參數，有幾個佔位符就會替換幾個參數。

　　　　　　　　    佔位符 %c 

　　　　　　　　　　               

　　　　　　　　　　　佔位符參數以後的若干參數屬於佔位符的配置參數。

　　　　　　　　　　   其他的佔位符有：

　　　　　　　　　　　　　

 　　　　　    3、console.time() 和 console.timeEnd()

　　　　　　　　        time  和  timeEnd  通常放在一塊兒使用，傳入一個參數用來標識起始位置用於統計時間：

　　　　　　　　　　  

                                     

　　　　　　　　       會打印出來中間代碼的執行時間。

                         4、console.count()

　　　　　　　　　　 計數，能夠用來統計某個函數的執行次數，也能夠傳入一個參數，而且根據傳入的參數分組統計調用的次數。

　　　　　　　　　　              

 　　　　　　　5、console.trace()

　　　　　　　　　　  用於追蹤代碼的調用棧，不用專門斷點去看了。

　　　　　　　　　　  

　　　　　　　　　　  

　　　　　　　   6、console.table()

　　　　　　　　　　   console.table()  方法能夠將複合類型的數據轉爲表格顯示。  

　　　　　　　　　　　

　　　　　　　　　　

                             7、console.dir()

　　　　　　　　　　  按便於閱讀和打印的形式將對象打印

　　　　　　　　　　　         

 　　　　　　　　　　 輸出DOM結構

　　　　　　　　　　            

　　　　　　　　8、console.assert()

　　　　　　　　　　   斷言，用來進行條件判斷。當表達式爲 false 時，則顯示錯誤信息，不會中斷程序執行。

能夠用於提示用戶，內部狀態不正確（把那個說假話的揪出來）

 　　　　　　　　　　           

 　　　　　　　   9、console.group()，console.groupEnd()

　　　　　　　　　　   分組輸出信息，能夠用鼠標 摺疊 / 展開

　　　　　　　　　　        

 　　　　　　　　10、$ 選擇器

　　　　　　　　　　　$_  能夠記錄上次計算的結果，直接用於代碼執行。

　　　　　　　　　　    

 　　　　　　　　　　    $0，$1 ..... $4

　　　　　　　　　　　  表明最近5個審查元素選中過DOM節點。

　　　　　　　　　　　　

　　　　　　　　         $ 和 $$

　　　　　　　　　　     $(selector) 是原生 document.querySelector() 的封裝

　　　　　　　　　　　  $$(selector) 返回的是全部知足選擇條件的元素的一個集合，是 document.querySelectorAll()  的封裝。

　　　　　　　　　　　  $x  將所匹配的節點放在一個數組裏返回。

　　　　　　　　　　　　　　

　　　　　　　　　　　　　  $x('//li')  // 全部的 li

　　　　　　　　　　　　　  $x('//p')  // 全部的 p

                                       $x('//li//p')、$x('//li[p]')  // 全部的 li 下的 p

　　　　　　　　　　　　   keys()，values()

　　　　　　　　　　　　　　跟 ES6 對象擴展方法，Object.keys()  和  Object.values()  相同

　　　　　　　　　　　　　　     keys(obj)，values(obj)

                                               copy()   能夠直接將變量複製到剪切板     copy(temp1)

　　　　　　　　　　　　    與  Save  global  variable  結合使用神器

　　　　　　　　　　　　　　　　　　　　　　　　　　Element 面板

　　　　　　打開 Element 面板： Windows：Control + Shift + C

　　　　　　　　　　　　　　　　　 Mac：Command + Option + C

　　　　　　　　1、css調試：

　　　　　　　　　 style  選中目標節點，element 面板，查看 style -> :hov，選擇對應的狀態便可。

 　　　　　　　　　　　

　　　　　　　　　 computed  有時候樣式覆蓋過多，查看起來很麻煩，可使用 computed

                                        

　　　　　　　　　點擊某個樣式能夠直接跳轉至對應 css 定義

　　　　　　　　　調整某個元素的數值

　　　　　　　　　　　　 選中想要更改的值，按方向鍵上下就能夠 + / -  1個單位的值

　　　　　　　　　　　　 alt + 方向鍵  能夠 x 10 調整單位值

　　　　　　　　　　　　 Ctrl + 方向鍵  能夠  x 100 調整單位值

　　　　　　　　　　　　 shift + 方向鍵   能夠 / 10 調正單位值

　　　　　　　　　html 調試  選中節點，直接按鍵盤 H 能夠直接讓元素 顯示 / 隱藏 ，不用手動敲樣式了，

　　　　　　　　　　　　效果等同  visibility: hidden，仍是要佔據盒模型空間的。(輸入法爲英文)

　　　　　　　　　將某個元素存儲到全局臨時變量中

　　　　　　　　　　   選中節點，右鍵，Store as global variable（在 network 面板中也能用，尤爲是篩選接口的返回值很方便）

　　　　　　　　　　　　　　  

　　　　　　　　　　　　　　         

　　　　　　　　　　滾動到某個節點

　　　　　　　　　　　　若是頁面很長，想找一個文本節點的顯示位置又不想手動滑動能夠試試  Scroll  into  view

　　　　　　　　　　　　選中節點，右鍵，選擇  Scroll  into  view

 

 　　　　　　　　　　DOM斷點

　　　　　　　　　　　 能夠監聽到 DOM 節點的變動(子節點變更 / 屬性變動 / 元素移除)，並斷點至變動 DOM 狀態的 js 代碼行

　　　　　　　　　　　 

 　　　　　　　　　　　　　　                                                  Network 面板

　　　　　　     打開 Network 面板的快捷鍵：Windows：Control  +  Shift + I

　　　　　　　　　　　　　　　　　　　　　　  Mac：Command + Option + I

　　　　　　　　按區域劃分大概分爲以下幾個區域：

　　　　　　　　

 　　　　　　　  一、Controls  控制  Network  功能選項，以及一些展現外觀。

                       二、Filters     控制  Requests Table 中顯示哪些類型的資源。

　　　　　　　　　 tips：按住 Cmd (Mac)  或者  Ctrl ( Windows / Linux )  並點擊篩選項能夠同時選擇多個篩選項。

　　　　　　　   三、Overview  此圖表顯示了資源檢索時間的時間線。若是看到多條豎線堆疊在一塊兒，則說明這些資源同時檢索。

　　　　　　　   四、Requests Table  此表格列出了檢索的每個資源。默認狀況下，此表格按時間順序排序，最先的資源在頂部，

　　　　　　　　　點擊資源的名稱能夠顯示更多信息。如：右鍵點擊 Timeline 之外的任何一個表格標題能夠添加或移除信息列。

　　　　　　　   五、Summary  能夠一目瞭然地看到頁面的請求總數、傳輸的數據總量、加載的時間。