Chrome 開發者工具各種騷技巧

1、曾經,在線調偽類樣式困擾過你?2、源代碼快速定位到某一行!ctrl + p3、聯調接口失敗時,後臺老哥總管你要response?4、你還一層層展開dom?Alt + Click5、是不是報錯了,你才去打斷點?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、後端、架構的技術群。

來吧,騷年~