【1】DevTools觸發(fā)偽類

右鍵單擊Elements面板中的元素節(jié)點(diǎn)并選擇“ force state ”。或者在Sytle子窗格中單擊“：hov ”圖標(biāo)?？梢杂|發(fā)元素上的偽類來研究元素在懸停時(shí)的效果和樣式

?

【2】DevTools-在任何網(wǎng)頁(yè)上運(yùn)行預(yù)定義的代碼片段

DevTools中有一個(gè)叫做代碼段的特性，它允許您可以在網(wǎng)頁(yè)上運(yùn)行的測(cè)試代碼(這比在控制臺(tái)面板中重新鍵入JavaScript代碼要方便一些)單擊Sources，左側(cè)小窗口選擇snippets

單擊New snippet 新建

輸入文件名和需要測(cè)試的代碼片段

右擊文件并選擇Run(或Ctrl/Cmd+Enter)

單擊Console查看代碼運(yùn)行結(jié)果

?

【3】使用CSS選擇器搜索DevTools-DOM樹

當(dāng)使用Elements面板瀏覽DOM時(shí)，嘗試通過CSS選擇器搜索節(jié)點(diǎn)。

?

【4】DevTools-轉(zhuǎn)到特定列的行號(hào)打開Sources面板中的文件, 按快捷鍵ctrl + o

輸入：5：20 Enter

請(qǐng)注意，您被帶到了第5行第20欄！

?

【5】DevTools- Ctrl+單擊可以在Sources面板中添加多個(gè)游標(biāo)

?

【6】快速編輯HTML元素標(biāo)記

您可以雙擊Elements面板中節(jié)點(diǎn)的開始標(biāo)記來編輯它，結(jié)束標(biāo)記將隨著您的更改而自動(dòng)更新。

?

【7】ALT+單擊可以展開所有子節(jié)點(diǎn)

在Elements面板中,使用Alt+單擊可以展開該Dom節(jié)點(diǎn)下的所有Dom子節(jié)點(diǎn)

?

【8】在任何節(jié)點(diǎn)上顯示該節(jié)點(diǎn)綁定的事件

?

【9】擴(kuò)展CSS縮寫屬性

在Style窗格中，可以展開css縮寫屬性，如background或padding，并查看為您定義的全部屬性

?

【10】將元素滾動(dòng)到視圖中右擊Elements面板中的DOM節(jié)點(diǎn)。

選擇 Scroll into view

?

【11】ctrl+d 選擇下一個(gè)相同的單詞

在Sources面板編輯器中，可以使用ctrl + d 選擇多個(gè)相同的單詞做操作

?

【12】添加一個(gè)新的自定義維度設(shè)備作為預(yù)置

?

【13】DOM的改進(jìn)面包屑線索

Elements元素面板中有一個(gè)

面包屑痕跡，它可以幫助您在瀏覽DOM時(shí)跟蹤您的步驟。

?

【14】netWork網(wǎng)絡(luò)請(qǐng)求過濾器larger-than:100將 查找大于100個(gè)字節(jié)的資源并進(jìn)行篩選。

您可以通過在查詢前面加上“-”來否定查詢。例如：-larger-than:50K找到以下資源

不大于50K。

status-code: 200若要查找具有狀態(tài)代碼響應(yīng)的資源，請(qǐng)執(zhí)行以下操作200

mime-type 查找請(qǐng)求資源類型

?

【15】在DevTools控制臺(tái)面板中編輯HTML

?

【16】從DevTools生成的調(diào)色板中選擇一個(gè)新的顏色

?

【17】DOM屬性中的增量和遞減數(shù)

可以使用鍵盤上/下箭頭修改DOM屬性或樣式的數(shù)量值

?

【18】使用樣式規(guī)則工具欄增加常見樣式

?

【19】通過控制臺(tái)更好地記錄對(duì)象和數(shù)組

?

【20】通過控制臺(tái)了解JS代碼的速度

console.time和console.timeEnd這兩個(gè)方法可以用來讓W(xué)EB開發(fā)人員測(cè)量一個(gè)javascript腳本程序執(zhí)行消耗的時(shí)間。console.time方法是開始計(jì)算時(shí)間，console.timeEnd是停止計(jì)時(shí)，輸出腳本執(zhí)行的時(shí)間。這兩個(gè)方法中都可以傳入一個(gè)參數(shù)，作為計(jì)時(shí)器的名稱，它的作用是在代碼并行運(yùn)行時(shí)分清楚各個(gè)計(jì)時(shí)器。測(cè)試代碼寫在這兩個(gè)方法之間。

?

【21】使用切換元素類功能進(jìn)行即時(shí)視覺反饋

在樣式窗格中，單擊.cls標(biāo)簽，可顯示隱藏Dom元素的類名

?

【22】DevTools黑色主題

?

【23】在沒有瀏覽器擴(kuò)展的情況下捕獲全尺寸屏幕截圖

在控制臺(tái)中按快捷鍵Ctrl + Shift + p進(jìn)入命令菜單再輸入screenshot

?

【24】用DevTools實(shí)現(xiàn)JavaScript代碼庫(kù)的現(xiàn)代化

新的“copy for fatch”功能擴(kuò)展了NetworkPanel上下文菜單,右擊網(wǎng)絡(luò)請(qǐng)求，然后以curl形式復(fù)制。用FETCH API替換代碼庫(kù)中現(xiàn)有的Ajax調(diào)用。如果要驗(yàn)證剪貼板中的FETCH API調(diào)用，可以將其粘貼到控制臺(tái)面板中，并在其前綴加上await

?

【25】查看WebSocket消息

?

【26】console.dir顯示一個(gè)對(duì)象所有的屬性和方法

如果說你想要查看Dom節(jié)點(diǎn)所關(guān)聯(lián)到的真實(shí)的Javasript對(duì)象，并且想要查看他的屬性就可以使用console.dir

?

【27】通過h來隱藏

可以按下h來隱藏在元素面板中被你選中的元素。再次按下h使它出現(xiàn)。某些時(shí)候這是很有用的，例如你想截圖，但是又不想里面包含一些敏感信息。

?

【28】隱藏netWork請(qǐng)求的時(shí)間軸

如果你僅僅只是查看請(qǐng)求列表- 來確認(rèn)狀態(tài)，大小和響應(yīng)，那么你可以選擇隱藏請(qǐng)求的時(shí)間軸，因?yàn)樗剂四銓⒔话氲目臻g

?

【29】Console的代碼換行

在Console面板中調(diào)試多行代碼時(shí)，使用Shift + Enter組合鍵進(jìn)行換行，Enter鍵將直接執(zhí)行代碼

?

【30】DOM 斷點(diǎn)調(diào)試

基本上大家都會(huì)用JavaScript的斷點(diǎn)調(diào)試，但是應(yīng)該很多人不知道Dom節(jié)點(diǎn)也可以進(jìn)行斷點(diǎn)調(diào)試，DevTools提供了三種針對(duì)Dom元素的斷點(diǎn)調(diào)試：子元素改變時(shí)、屬性改變時(shí) 和元素被移除時(shí)。在Elements 標(biāo)簽頁(yè)，選中一個(gè)元素

右擊，選擇 Breakon->subtree modifications(子元素改變時(shí)斷點(diǎn))、attribute modifications (屬性改變時(shí)斷點(diǎn))、node removal(元素被移除時(shí)斷點(diǎn))

?

【31】緩存上一步操作的結(jié)果$_

在DevTools上運(yùn)行JavaScript表達(dá)式的時(shí)候，可以使用$_來獲取到上一步操作的返回值。

?

【32】console中的 $0-$4

在Elements面板中，

$0是當(dāng)前我們選中的html節(jié)點(diǎn)的引用。理所當(dāng)然，$1 就是我們上一次選擇的節(jié)點(diǎn)的引用，$2 是在那之前選擇的節(jié)點(diǎn)的引用，一直到 $4

?

【33】選擇dom節(jié)點(diǎn)$和?

如果你沒有在App中定義過 $ 變量 (例如JQ)的話，它在console中就是對(duì)這一大串函數(shù)document.querySelector的別名。

如果是 ? 就更加厲害了，還能節(jié)省更多的時(shí)間，因?yàn)樗粌H執(zhí)行document.querySelectorAll并且它返回的是一個(gè)節(jié)點(diǎn)的數(shù)組

?

總結(jié)

以上是生活随笔為你收集整理的devtools的ctrl加r_Chrome DevTools调试技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。