chrome開發(fā)者工具各種騷技巧
來源:老姚
https://juejin.cn/post/6844903604839514125
對于每個前端從業(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…
效果如下:

本文完。
最后
評論
圖片
表情
