【Chrome】914- 12 張動圖學習 Chrome 調試技巧

來自:掘金
作者:老姚
鏈接:https://juejin.cn/post/6844903604839514125
對于每個前端從業(yè)者來說,除了F5鍵之外,用的最多的另外一個鍵就是F12了。
今天,大神(@小魚二)推薦我一個網站,才知道chrome還有各種騷姿勢。
網站是:umaar.com/dev-tips/
所有的我都看了,這里隨便列舉幾個個人之前不了解,覺得挺有用的。
1.曾經,在線調偽類樣式困擾過你?

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

3.聯(lián)調接口失敗時,后臺老哥總管你要response?

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

5.是不是報錯了,你才去打斷點?

6.你是不是經常想不起來,在哪綁定事件的?

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

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

9.查一些特定的請求,過濾器用過嗎?

10.在Elements面板調整dom結構很不方便?

11.想知道,某圖片加載的代碼在哪?Initiator??!

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

多的就不列舉了,可以看看開頭的網站??戳擞袔讉€功能我電腦(win10)是沒有的,應該跟chrome版本有關。
開發(fā)者工具的功能確實挺多,多得有時根本用不上,官網教程建議每個前端人員都看看:
https://developers.google.com/web/tools/chrome-devtools/
中文版:
https://www.css88.com/doc/chrome-devtools/
======================
補充:
見評論中多人問gif制作軟件是什么。
搜索了一下,應該是www.techsmith.com/,看著說明,表示軟件太專業(yè)。。
但我用過兩個小軟件很不錯,非常容易上手:
錄屏:www.cockos.com/licecap/ 屏幕放大:https://docs.microsoft.com/zh-cn/sysinternals/downloads/zoomit
效果如下:


回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章
評論
圖片
表情
