你真的會用Chrome嗎？

• 2019 年 11 月 12 日
• 筆記

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

對於每個IT從業者來說，除了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.不想加載某個文件了？

多的就不列舉了，可以看看之前給的網站（https://umaar.com/dev-tips/）。看了有幾個功能win10是沒有的，應該跟chrome版本有關。

開發者工具的功能確實挺多，多的有時根本用不上，官網教程建議大家都看看。

作者：老姚

來源: juejin.im/post/5af53823f265da0b75282b0f