0.前言
或許你曾經零星的刷到過一些，關於Chrome開發者工具使用技巧的文章，讀完之後大爲震撼，發出“既然還能這麼玩”的感慨。越是讀到我越是想系統的學習下，然而雷同較多，想學到新知識的成本逐漸增大。作爲一名前端工程師，工作當中最經常使用的工具之一便是Chrome瀏覽器，開發者工具也是習慣性打開的。
其實，只要你的工作當中接觸到瀏覽器，深入瞭解下Chrome開發者工具也沒什麼不好，無論你是產品、測試、後端、UI，正所謂工欲善其事必先利其器，通過工具能夠更好的解決問題，避免無效溝通，增強協作效率，也有助於團隊氛圍的保護。
作爲普通網民的你，想要下載一些資源，複製文本等，卻發現一些常規的功能被屏蔽了，提供的資源相比於要求你登錄、付費之類的操作十分不合理，卻又束手無策，Chrome開發者工具能解決這個問題。
做爲測試的你是否厭煩了每次要給技術人員提供接口格式，復現場景，因爲無法分清是前端的問題還是後端的問題而遭到抗議，Chrome開發者工具能解決這個問題。
作爲前端，你是否厭倦了每次和別人說"你清一下緩存"，面對後端人員的"再試一次"十分火大，卻又無可奈何，提供接口信息的時候要給返回格式，傳參，一會說截圖方便，一會說複製文本方便。感覺調試網頁不夠便捷，但又不知道怎麼增進，優調性能不知如何下手，Chrome開發者工具能解決這個問題。
作爲UI的你面對前端說這個字體大小、顏色、間距就是按照設計稿來的，你雖然心存疑惑，卻也拿不出真憑實據，只能不了了之，Chrome開發者工具能解決這個問題。
作爲產品的你當發生問題時不知道該找誰，描述問題的時候被吐槽只是表象，對於解決問題無意，覺得產品體驗不好，但又不知道從哪個維度表達自己的不滿，Chrome開發者工具能解決這個問題。
作爲後端的你，是否因爲覺得自己的接口沒問題，但前端提供的東西無法滿足你對問題排查而苦惱，很多時間花在和前端要數據，溝通流程中，Chrome開發者工具能解決這個問題。
Chrome開發者工具的使用其實是每個工種必備的基礎能力，它一定程度抹平了技術上的差異，系列文章是我閱讀官方文檔，加上平時的使用體會編寫的，相信讀完之後，能夠提升你的工作體驗。
1.從打開Chrome開發者工具開始
鼠標右鍵網頁，選擇“檢查”。會打開Elements面板，等同於快捷鍵Command+Option+C (Mac) 或 Control+Shift+C（Windows、Linux、ChromeOS）。
打開Console面板 ，請按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、ChromeOS）
打開上一次關閉時選中的面板，按F12，或按Command+ Option+ I(Mac) 或Control+ Shift+ I。
可以通過更改程序的啓動命令，讓每個新建的標籤頁自動打開chrome devtools，"C:\Program Files\Google\Chrome\Application\chrome.exe" --auto-open-devtools-for-tabs。
切換爲中文
Ctrl + Shift + P，打開功能面板，輸入中文，選擇"Chinese - 中文"即可，然後點擊按鈕重啓Chrome開發者工具
切換爲英文則輸入 "English" , 開發者工具支持很多語言。
開發者工具位置
從左到右依次是
在獨立的窗口打開Chrome開發者工具
開發者工具位於當前網頁的左側
開發者工具位於當前網頁的下方
開發者工具位於當前網頁的右側
Ctrl + shift + D 可以切換到上一個位置
打開窗格
通過esc切換，可以再打開一層工具條，例如看到元素面板的同時，可以看控制檯面板，而不用左右切換
區域縮放
Ctrl + 、 Ctrl -，Ctrl + 0重置
切換面板
ctrl + [ 和 ctrl + ] 從當前面板分別向左和向右切換
也可以通過Ctrl + 1 到 ctrl + 9 切換，這個默認是禁用的，可以通過"設置"按鈕或F1
面板和窗格之間的交互
對於面板中固定打開的選項卡，右鍵點擊只能選擇"移至底部",到了底部右鍵點擊也只能選擇“移至頂部”。
可以添加更多選項卡到面板，例如通過界面
對於這種選項卡右鍵都會有更多操作
抽屜也可以添加更多選項卡,可以通過右鍵"移至頂部"來調整顯示
功能面板
按Control+ Shift+P或Command+ Shift+ P(Mac),打開命令菜單,大致瀏覽支持的功能，注意後面的標識。
文本框前會附加一個字符">",刪 除>字符並鍵入?以查看命令菜單中可用的其他操作。
- Help Release notes - 版本都更新了什麼；Report a DevTools issue - 反饋建議
- panel 在面板上顯示
- Drawer 在抽屜裏顯示。方便統一打開，也可已單獨打開。每一個功能針對性都很強。
- Global，全局的一些功能。
- Elments、Network、Performance、Mobile、Rendering、Sensors、Setting、Sources；這些在對應的頁籤裏也能設置
鍵盤快捷鍵
2.瀏覽最新的網頁
"你清一下緩存"，這可能是前端對測試、對後端對等說的最多的一句話。
當打開開發者着工具的時候，右鍵長按刷新按鈕，會出現一個彈窗
右鍵"請求行"也有兩個清除緩存的選項
或者勾選網絡面板的停用緩存，注意勾選這個會影響網頁的加載速度。對於開發來講，熱更新已經很大程度避免了緩存問題
或者Ctrl + Shift + P 打開命令菜單
在應用面板，也有本地存儲空間、會話存儲空間、IndexDB、Cookie等可以增刪改查。
這裏說一下本地存儲空間的
當你發現操作與預期不符，或者對顯示的內容有疑惑，可以嘗試點擊"黃色圈住的刷新按鈕"
"紫色的清除按鈕"可以清除全部的記錄
點擊單行記錄可以預覽，點擊"藍色的刪除按鈕"可以刪除單行
雙擊密鑰、值可以進行更改
點擊灰色圈住的空白區域可以新增
3.如何下載網絡上的資源
右鍵網頁，選擇"查看網頁源代碼",左上角有個"自動換行"，勾選後會方便查看。
瀏覽器會自上到下逐一解析這段文本，加載各種資源，最終使得網頁呈現在我們面前。
網絡面板
打開開發者工具的網絡面板，再次刷新網頁，請求的資源就會依次出現。
按住Ctrl，則可以同時選中多個類型，已"圖片"類型爲例，點擊"請求行"則默認進入"預覽"
右鍵圖片，點擊"圖片另存爲"即可下載圖片，通常在網頁中右鍵，也會找到此選項。
雙擊"請求行"則可在新窗口中打開圖片
元素面板
網頁就是通過一個個"標籤"來呈現的，當你把鼠標放在"標籤"上時，對應的元素會高亮
如果看不見元素，可以右鍵選擇"滾動到視野範圍內"
也可以通過網頁區域跳轉到對應的標籤。方法一是右鍵網頁，選擇"檢查"。
方法二是通過開發者工具的指針，點一下網頁上想看的區域即可，也可通過快捷鍵Ctrl + Shift + C
當你選中一個標籤時，可以鼠標右鍵"截取節點屏幕截圖"，也可以通過Ctrl + Shift + P 打開命令菜單，輸入"截圖":
- 當前節點屏幕截圖(需要選中節點)
- 截取區域屏幕截圖(通過鼠標拖拽)
- 截取屏幕截圖(可視區域)
- 截取完整尺寸的屏幕截圖
不過，上述兩種方式可能會造成迷惑，也可以在元素面板聚焦的時候按下Ctrl + F 進行搜素。
通過"設置按鈕"，可以選擇在鼠標懸浮的時候顯示標尺
比如<img
按下Enter 選中下一個，按下Shift + Enter,選中上一個。Ctrl + A可全選搜素詞，方便快速刪除。
右鍵"src="後面的部分，選擇"新標籤頁打開"。
當網頁中有正在播放的音頻(<audio), 新標籤頁打開，即可通過瀏覽器自帶的工具下載。
視頻(<video)，如果是http開頭也可通過上述方式下載，但現在大多數視頻網站會通過類似blob: 等方式，如上方式是行不通。
理論上來講，視頻播放總要拉取數據。注意，上面的技巧僅供個人學習。