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

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

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

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

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

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

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

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

4.你還一層層展開(kāi)dom？Alt + Click

5.是不是報(bào)錯(cuò)了，你才去打斷點(diǎn)？

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

7.你是不是打斷點(diǎn)時(shí)還要去改代碼？

8.看dom層級(jí)的最直觀的方式？

9.查一些特定的請(qǐng)求，過(guò)濾器用過(guò)嗎？

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

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

12.不想加載某個(gè)文件了？

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

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

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

中文版：

www.css88.com/doc/chrome-…

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

補(bǔ)充：

見(jiàn)評(píng)論中多人問(wèn)gif制作軟件是什么。

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

但我用過(guò)兩個(gè)小軟件很不錯(cuò)，非常容易上手：

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

效果如下：

本文完。