谷歌開發者工具已經成為我們必不可少的調試工具，但用了這么久，你是否知道它一些實用的小技巧呢，下面聽我娓娓道來
①：直接用 ctrl + c 復制 HTML
大家都知道，如果要復制下圖箭頭里所指的代碼，可以雙擊復制或右鍵選擇copy選項里的copy-element
但很多人不知道的是，其實可以直接 ctrl + c （以前都不知道，感覺錯過了一個億）
②：切換工具欄窗口展示布局的快捷鍵—— ctrl + shift + D（根據谷歌版本不同，按此快捷鍵，有些是工具欄左右切換）
當你想把工具欄變成下圖獨立窗口展示的時候，如果不使用快捷鍵，是不是會讓你覺得很麻煩
你需要先按 F12（windows下的 ctrl+shift+i 快捷鍵等同於直接按F12），然后在選擇下圖箭頭所指的選項
此時用 ctrl + shift + D，就能輕松進行窗口的切換了
③：使用切 ctrl + [ 和 ctrl + ] 可以讓你在工具欄里切換選項卡，而不需要來回點鼠標
④：通過點擊鍵盤上的 'h' 元素隱藏文字信息
如下圖，你想截一個沒有 '請輸入邀請碼' 文字的圖，按照以前的方法要嘛手動雙擊刪除，要嘛直接在html源文件里手動刪除
現在只需要點擊鍵盤上的 'h' 鍵，就可以讓相應文字隱藏
⑤：右鍵選擇 expand recursively 選項
有時我們想要一次性打開頁面所以元素的節點，如下圖紅色框的小三角
以前可能我們會一個一個去點，現在只需要右鍵 選擇 expand recursively ，無論頁面層級多深都能全部打開
⑥：隱藏 network overview
通常來說，我們在 network 選項卡里面想要查看的是相關資源加載的信息，而不是下圖時間軸部分
所以我們可以點擊下圖箭頭所指的按鈕，關閉時間軸顯示，騰出更多空間
⑦：Shadow editor 陰影編輯器
有時我們給一個元素設置了box-shadow屬性后，當你想要調整該屬性值時操作就會變得繁瑣
比如下圖的box-shadow設置了5個值，你無法同時調整，就只能手動一個值一個值的調整，然后一邊看效果
此時點擊下圖箭頭所指圖標換出陰影編輯器就可以實時查看調試陰影效果了
⑧：查看顯示頁面哪些地方被 repaint（重繪）
下面截圖右邊為-設置頁面發生重繪的操作步驟（如箭頭所示）
下面截圖左邊為-當頁面發生重繪時，用綠色高亮顯示重繪區域
補充：下面是我之前單獨寫的谷歌開發者工具小技巧
①：chrome谷歌開發者工具（hover時候的css樣式怎么在瀏覽器調試）