chrome開發(fā)者工具各種騷技巧

對于每個前端從業(yè)者來說，除了F5鍵之外，用的最多的另外一個鍵就是F12了。

今天，大神（@小魚二）推薦我一個網(wǎng)站，才知道chrome還有各種騷姿勢。

網(wǎng)站是：umaar.com/dev-tips/

所有的我都看了，這里隨便列舉幾個個人之前不了解，覺得挺有用的。

1.曾經(jīng)，在線調(diào)偽類樣式困擾過你？

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

3.聯(lián)調(diào)接口失敗時，后臺老哥總管你要response？

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

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

6.你是不是經(jīng)常想不起來，在哪綁定事件的？

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

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

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

10.在Elements面板調(diào)整dom結(jié)構(gòu)很不方便？

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

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

多的就不列舉了，可以看看開頭的網(wǎng)站。看了有幾個功能我電腦（win10）是沒有的，應(yīng)該跟chrome版本有關(guān)。

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

developers.google.com/web/tools/c…

中文版：

www.css88.com/doc/chrome-…

======================

補充：

見評論中多人問gif制作軟件是什么。

搜索了一下，應(yīng)該是www.techsmith.com/，看著說明，表示軟件太專業(yè)。。

但我用過兩個小軟件很不錯，非常容易上手：

• 錄屏：www.cockos.com/licecap/
• 屏幕放大：docs.microsoft.com/zh-cn/sysin…

效果如下：

本文完。