Chrome 開發者工具各種騷技巧

• 1、曾經，在線調偽類樣式困擾過你？
• 2、源代碼快速定位到某一行！ctrl + p
• 3、聯調接口失敗時，後臺老哥總管你要response？
• 4、你還一層層展開dom？Alt + Click
• 5、是不是報錯了，你才去打斷點？
• 6、你是不是經常想不起來，在哪綁定事件的？
• 7、你是不是打斷點時還要去改代碼？
• 8、看dom層級的最直觀的方式？
• 9、查一些特定的請求，過濾器用過嗎？
• 10、在Elements面板調整dom結構很不方便？
• 11、想知道，某圖片加載的代碼在哪？Initiator！！
• 12、不想加載某個文件了？

對於每個前端從業者來說，除了F5鍵之外，用的最多的另外一個鍵就是F12了。最近大神（@小魚二）推薦我一個網站，才知道chrome還有各種騷姿勢。這個網站是：umaar.com/dev-tips/，本文分享一些實用且聰明的調試技巧。

1、曾經，在線調偽類樣式困擾過你？

2、源代碼快速定位到某一行！ctrl + p

3、聯調接口失敗時，後臺老哥總管你要response？

4、你還一層層展開dom？Alt + Click

5、是不是報錯了，你才去打斷點？

6、你是不是經常想不起來，在哪綁定事件的？

7、你是不是打斷點時還要去改代碼？

8、看dom層級的最直觀的方式？

9、查一些特定的請求，過濾器用過嗎？

10、在Elements面板調整dom結構很不方便？

11、想知道，某圖片加載的代碼在哪？Initiator！！

12、不想加載某個文件了？

多的就不列舉了，可以看看開頭的網站。看了有幾個功能我電腦（win10）是沒有的，應該跟chrome版本有關。

開發者工具的功能確實挺多，多得有時根本用不上，官網教程建議每個前端人員都看看：

中文版：https://www.html.cn/doc/chrome-devtools/

來源：http://rrd.me/enqVF
作者：老姚
 

:-D 搜索微信號（ID：芋道源碼），可以獲得各種 Java 源碼解析、原理講解、面試題、學習指南。

:-D 並且，回覆【書籍】後，可以領取筆者推薦的各種 Java 從入門到架構的 100 本書籍。

:-D 並且，回覆【技術群】後，可以加入專門討論 Java、後端、架構的技術群。

來吧，騷年~