Chrome開發(fā)者工具各種技巧
- 曾經(jīng),在線調(diào)偽類樣式困擾過你?
- 源代碼快速定位到某一行!ctrl + p
- 聯(lián)調(diào)接口失敗時(shí),后臺(tái)老哥總管你要response?
- 你還一層層展開dom?Alt + Click
- 是不是報(bào)錯(cuò)了,你才去打斷點(diǎn)?
- 你是不是經(jīng)常想不起來,在哪綁定事件的?
- 你是不是打斷點(diǎn)時(shí)還要去改代碼?
- 看dom層級(jí)的最直觀的方式?
- 查一些特定的請(qǐng)求,過濾器用過嗎?
- 在Elements面板調(diào)整dom結(jié)構(gòu)很不方便?
- 想知道,某圖片加載的代碼在哪?Initiator!!
- 不想加載某個(gè)文件了?
對(duì)于每個(gè)前端從業(yè)者來說,除了F5鍵之外,用的最多的另外一個(gè)鍵就是F12了。
最近大神推薦我一個(gè)網(wǎng)站,才知道chrome還有各種騷姿勢。這個(gè)網(wǎng)站是:umaar.com/dev-tips/,本文分享一些實(shí)用且聰明的調(diào)試技巧。
1.曾經(jīng),在線調(diào)偽類樣式困擾過你?
2.源代碼快速定位到某一行 ctrl + p

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

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

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

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

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

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

9.查一些特定的請(qǐng)求,過濾器用過嗎?

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

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

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

多的就不列舉了,可以看看開頭的網(wǎng)站。看了有幾個(gè)功能我電腦(win10)是沒有的,應(yīng)該跟chrome版本有關(guān)。
開發(fā)者工具的功能確實(shí)挺多,多的有時(shí)根本用不上,官網(wǎng)教程建議大家都看看。