[翻譯] 成為 Chrome Developer Tool 的高手吧！前端開發技巧更上層樓
（本篇文章來自 CodeTengu Weekly 碼天狗第93期）
你可能對 Chrome Developer Tool 的基礎功能有一定的暸解了：DOM檢視、樣式面板、JavaScript 的 console⋯⋯。但還有一些較少人知道的功能，能幫助你有效地提升應用程式除錯或開發的效率。
暗色佈景主題
Chrome 的開發者工具有內建的暗色主題。你可以點選面板的右上角三個點點的圖示，並點選設定來切換佈景主題。
我有時覺得暗色的主題對眼睛的負擔較小，而且很明顯的，這看起來比較酷：）
選取模式
Chrome 的開發者工具（DevTools）提供數種選擇頁面元件的方式 — — 最方便的一種就是選取模式。
這個功能可以點選開發者工具左上角的鼠標圖示（或是快捷鍵 Cmd+Shift+C）開啟，在頁面上點擊來選取元件。
開啟選取模式以後，你可以在頁面上任意移動滑鼠，預覽頁面的元件，並且藉由點擊來選取元素去檢視。
這個功能可以很快速的選取頁面上對應的元件，因為可以藉由快捷鍵 Cmd+Shift+C 開啟開發者工具並直接進入選取模式。
儲存全域變數
若 Console 記入的物件有許多鍵（key）或是太過複雜而難以手動分析，有的時候要仔細檢視它們可能相當麻煩。幸好，Chrome 透過 JavaScript 讓這些處理變得輕鬆了些。
在 Console 的物件上點擊右鍵，並選擇 “Store as Global Variable”。選擇的物件會被儲存為全域的變數並取名為temp1，之後操作時就可以取用。
動畫工具
最近，Chrome 開發團隊增加了一些動畫除錯與開發的新功能。
點選 Console 左邊三點的圖示開啟下拉式選單，可以開啟 Animation 分頁，操作網頁上所有動畫的播放速度。
你也可以把動畫通通暫停。這對一些有許多動畫的網站特別有用。
點選元件transition屬性可以觀看動畫的播放曲線，並且藉由紫色的圓形圖示（如上圖）調整其屬性。此外，你也能用方向鍵瀏覽預設的動畫效果並套用至元件上。
偽元素狀態模擬
另一個好用的樣式設定功能就是元件的狀態模擬。你可以點選右方 Styles 面板的:hov圖示開啟功能。
這個功能可以模擬元素不同的點擊狀態，包括 hover、focus、active，並且查看這些狀態對應的樣式設定。
點選:hover右方的＋圖示新增一個選取器，並且在該選取器名稱後面加上:狀態(hover, focus, active...) 來設定一些對應樣式。
你可以勾選:hover 狀態來模擬滑鼠移至該元件上時的狀態，測試樣式設定是否正確。
讓 CSS 和 JavaScript 變美麗
觀看壓縮（minified）的 CSS 或是 JavaScript 或是除錯是一件很困難的事。幸運地，開發者工具讓這件事變得容易不少。
在 Sources 面板開啟壓縮的檔案後，你可以點選大括號的圖示（如上圖紅色框框），開發者工具就會把程式碼變漂亮。
這項功能將 CSS 處理得相當好，而 JavaScript 則處理得還不錯，雖然有些資訊因為壓縮而遺失了（例如變數的名稱）。
Alt+方向鍵上 / Alt+方向鍵下
在 CSS 樣式面板可以點選一項屬性並用方向鍵上下調整該屬性的值。預設的情況下方向鍵會將屬性的值增加或減少 1 單位。然而，按住alt 鍵，可以將增加或減少改為 0.1 單位，對於浮點數的值相當有幫助。
相反地，按住shift 鍵則可以將增減改為 10 單位。
保存日誌
藉由勾選 Preserve Log，你可以在頁面重整時依然保留日誌內容。這對於網頁需要重新整理的情況相當合適，不然重新整理時 Console 的內容都會被清除。
當這項功能開啟時，Console 會多一筆 “Navigation” 日誌，紀錄頁面重整或是跳轉到其他頁面的事件。
網路＋日誌篩選
處理較多請求或 Console 日誌的應用程式時，篩選特定事件將會相當有用。
Chrome 的篩選語法支援不同的狀況，包括萬用字元＊。
若你輸入- ，Chrome 會顯示一串能夠篩選的清單。你也能勾選 Regex 來進行正規表達式的篩選。
程式覆蓋率
這項功能可以在執行應用程式後查看哪幾行的程式有被執行，而哪些沒有。這對處理較複雜或長期的應用程式相當有幫助，因為這些應用容易累積再也不被執行的程式碼。
要使用這項功能，首先要先確認 Chrome 的版本在 59 或以上。然後點選 Coverage 分頁。點選 Record 並開始使用你的應用程式。當你完成以後，Chrome 會顯示在執行過程中有被執行到的程式。
產品上市後的除錯
開發者工具只有在自己的電腦執行應用程式時可以使用。假如你想要暸解使用者在產品上市使用後遇到哪些問題以及該應用程式執行效率相關的問題，可以嘗試 LogRocket。
LogRocket 是一個前端日誌的工具，它可以在你自己的瀏覽器上重現發生的問題，讓你快速地知道是哪裡發生問題，而不需要瞎猜或向使用者要求螢幕截圖與錯誤訊息。它在不同框架的應用程式上都運作良好，也有 React，Angular 以及 Vue.js 的外掛插件以記錄更多的內容。
LogRocket 可以記錄 Console 日誌、請求與回應（包含標頭檔與內容）、瀏覽器的 metadata、Redux 的操作與狀態，以及執行效率的計時等。除此之外也能記錄頁面的 HTML 與 CSS，以及即便在複雜的單頁應用程式也能產生高畫質的影片。
你可以在這裡看看 LogRocket。（原文廣告打得真兇XD）
感謝你的閱讀。希望這些進階的技巧能幫助你費更少的勁，完成更好的應用程式。
