你可能不知道的 10 個 Chrome DevTools 技巧

Chrome DevTools 對前端工程師來講，幾乎天天都會用到，可是有些技巧你可能不知道，讓咱們來了解一下吧~

1. 輕鬆獲取某個審查元素的引用

打開控制檯，在 Elements 界面下，對着某個 dom 標籤點擊右鍵，選擇 Store as global variable。

2. 建立並釘住一個動態表達式

你能夠在控制檯建立一個動態表達式，而且把它釘到控制檯頂部，這對觀察頁面上某個變化的元素很是有用。

3. 模擬弱網環境

在 Network 界面下能夠模擬多種不一樣的網絡環境，利用它能夠觀察你的應用在不一樣環境下的加載時間。

4. 禁用緩存和保存日誌

緩存有時候會形成不少難以排查的 bug，爲了排除這個因素，你能夠勾選Network 界面下的 Disable cache 選項（它只在 DevTools 窗口打開時生效）。

Preserve log 可讓你在切換頁面的時候也能保存控制檯中的打印日誌。

5. 在控制檯直接建立截圖

Chrome Devtools 有一個內置的截圖工具。打開控制檯，而後按下 Ctrl+Shift+P，輸入 screenshot ，便可選擇針對當前網頁進行截圖。若是選擇 Capture node screenshot 還能夠針對當前選中的元素建立截圖。

6. 不僅是 console.log

除了 console.log，還有幾個經常使用的方法:

console.warn, console.error

console.warn 能夠打印出黃顏色的警告信息，也能夠配合 filter 方便查詢。

console.table

若是你有一個數組，用 console.table 來打印就再合適不過了。

還有更多的方法如： console.assert，console.group，你能夠在這裏找到：Google Developers

7. $_ 返回最近那個表達式

使用 $_ 能夠打印出你在控制檯最後使用的表達式的值。

8. 直接使用 $

你能夠直接使用 $ 來查詢元素，這不須要 jquery，由於它就是 document.querySelector 的別名。

同時 $$ 也是 document.querySelectorAll 的別名。

9. 觸發元素的 hover 狀態

在審查元素時，能夠在 Styles 頁面點擊 :hov ，便可打開 Force element state 面板，而後就能輕鬆調試元素的特殊狀態。

10. Ctrl+Click 查找 CSS 屬性

若是想知道某個具體的 css 規則在哪定義的，只須要在 Style 面板中，在那個規則上使用 Ctrl+Click （Mac 下用 CMD+Click）。

歡迎關注

碼力全開（codingonfire）

每週更新一篇原創或翻譯文章~