? ? ? ? 今天整好遇到了shadow-box相關(guān)的內(nèi)容，于是進行了搜索和學習，并發(fā)現(xiàn)了一些比較實用的“Chrome開發(fā)者工具”的小技巧，給大家總結(jié)分享一下。
1. 打開Shadow DOM顯示
? ? ? ? 瀏覽器對例如Video、Password等組件進行了封裝，無法查看到組件的詳細代碼，不利于調(diào)試。幸好，通過配置能夠在元素標簽器中顯示被隱藏的組件代碼。
? ? ? 實現(xiàn)：More(‘三個點’圖標）→Settings →? Elements → Show user agent shadow DOM
2.選擇多個匹配項并編輯
? ? ? ? 當在Sources標簽下編輯文件時，按下Ctrl + D (Cmd + D) ，當前選中的單詞的下一個匹配也會被選中，有利于你同時對它們進行編輯。
3.格式化凌亂的js源碼
? ? ? ? Pretty Print的按鈕在Sources標簽的左下角。
4.強制改變元素狀態(tài)（方便查看不同狀態(tài)下元素的樣式）
? ? ? ? chrome控制臺有一個可以模擬CSS狀態(tài)的功能，例如元素的hover和focus,可以很容易的改變元素樣式。在CSS編輯器中可以利用這個功能查看不同狀態(tài)下元素的樣式。
5.顏色選擇器（快捷的獲取顏色值）
6.改變顏色格式
? ? ? ? 在顏色預覽功能使用快捷鍵Shift + Click，可以在rgba、hsl和十六進制表示法來回切換顏色的格式
7.設備傳感仿真
? ? ? ? 設備模式的另一個很酷的功能是模擬移動設備的傳感器，例如觸摸屏幕和加速計。你甚至可以惡搞你的地理位置。
實現(xiàn)：More(‘三個點’圖標）→More tools→? Sensors
8.設備模式（模擬H5頁面、APP進行調(diào)試）
? ? ? ? 試想一下，如果我們每在Visual studio工具上開發(fā)完一個功能又得跑到手機上調(diào)試，那得多煩，開發(fā)效率多低呀。
實現(xiàn)：修改UA：More(‘三個點’圖標）→More tools→ ?Network conditions
9.找到新添加的CSS樣式內(nèi)容（新添加內(nèi)容較多時，非常實用）
? ? ? ? 頁面中添加完元素之后，按圖示路徑查找到新添加的樣式。
? ? ? ? Chrome提供給開發(fā)人員的調(diào)試工具以及方法技巧非常多，本文僅舉幾個用到過的小栗子，更多內(nèi)容實例以后再行補充，更多功能及工具的使用方法有待大家多摸索、使用。
? ? ? ? 歡迎補充！??！
? ? ? ? （本文僅限經(jīng)驗分享）
? ? ? ? 原文鏈接：http://www.cnblogs.com/liyunhua/p/4544738.html（部分引用）
