devtools的ctrl加r_Chrome DevTools调试技巧
【1】DevTools觸發偽類
右鍵單擊Elements面板中的元素節點并選擇“ force state ”?；蛘咴赟ytle子窗格中單擊“：hov ”圖標?？梢杂|發元素上的偽類來研究元素在懸停時的效果和樣式
?
【2】DevTools-在任何網頁上運行預定義的代碼片段
DevTools中有一個叫做代碼段的特性，它允許您可以在網頁上運行的測試代碼(這比在控制臺面板中重新鍵入JavaScript代碼要方便一些)單擊Sources，左側小窗口選擇snippets
單擊New snippet 新建
輸入文件名和需要測試的代碼片段
右擊文件并選擇Run(或Ctrl/Cmd+Enter)
單擊Console查看代碼運行結果
?
【3】使用CSS選擇器搜索DevTools-DOM樹
當使用Elements面板瀏覽DOM時，嘗試通過CSS選擇器搜索節點。
?
【4】DevTools-轉到特定列的行號打開Sources面板中的文件, 按快捷鍵ctrl + o
輸入：5：20 Enter
請注意，您被帶到了第5行第20欄！
?
【5】DevTools- Ctrl+單擊可以在Sources面板中添加多個游標
?
【6】快速編輯HTML元素標記
您可以雙擊Elements面板中節點的開始標記來編輯它，結束標記將隨著您的更改而自動更新。
?
【7】ALT+單擊可以展開所有子節點
在Elements面板中,使用Alt+單擊可以展開該Dom節點下的所有Dom子節點
?
【8】在任何節點上顯示該節點綁定的事件
?
【9】擴展CSS縮寫屬性
在Style窗格中，可以展開css縮寫屬性，如background或padding，并查看為您定義的全部屬性
?
【10】將元素滾動到視圖中右擊Elements面板中的DOM節點。
選擇 Scroll into view
?
【11】ctrl+d 選擇下一個相同的單詞
在Sources面板編輯器中，可以使用ctrl + d 選擇多個相同的單詞做操作
?
【12】添加一個新的自定義維度設備作為預置
?
【13】DOM的改進面包屑線索
Elements元素面板中有一個
面包屑痕跡，它可以幫助您在瀏覽DOM時跟蹤您的步驟。
?
【14】netWork網絡請求過濾器larger-than:100將 查找大于100個字節的資源并進行篩選。
您可以通過在查詢前面加上“-”來否定查詢。例如：-larger-than:50K找到以下資源
不大于50K。
status-code: 200若要查找具有狀態代碼響應的資源，請執行以下操作200
mime-type 查找請求資源類型
?
【15】在DevTools控制臺面板中編輯HTML
?
【16】從DevTools生成的調色板中選擇一個新的顏色
?
【17】DOM屬性中的增量和遞減數
可以使用鍵盤上/下箭頭修改DOM屬性或樣式的數量值
?
【18】使用樣式規則工具欄增加常見樣式
?
【19】通過控制臺更好地記錄對象和數組
?
【20】通過控制臺了解JS代碼的速度
console.time和console.timeEnd這兩個方法可以用來讓WEB開發人員測量一個javascript腳本程序執行消耗的時間。console.time方法是開始計算時間，console.timeEnd是停止計時，輸出腳本執行的時間。這兩個方法中都可以傳入一個參數，作為計時器的名稱，它的作用是在代碼并行運行時分清楚各個計時器。測試代碼寫在這兩個方法之間。
?
【21】使用切換元素類功能進行即時視覺反饋
在樣式窗格中，單擊.cls標簽，可顯示隱藏Dom元素的類名
?
【22】DevTools黑色主題
?
【23】在沒有瀏覽器擴展的情況下捕獲全尺寸屏幕截圖
在控制臺中按快捷鍵Ctrl + Shift + p進入命令菜單再輸入screenshot
?
【24】用DevTools實現JavaScript代碼庫的現代化
新的“copy for fatch”功能擴展了NetworkPanel上下文菜單,右擊網絡請求，然后以curl形式復制。用FETCH API替換代碼庫中現有的Ajax調用。如果要驗證剪貼板中的FETCH API調用，可以將其粘貼到控制臺面板中，并在其前綴加上await
?
【25】查看WebSocket消息
?
【26】console.dir顯示一個對象所有的屬性和方法
如果說你想要查看Dom節點所關聯到的真實的Javasript對象，并且想要查看他的屬性就可以使用console.dir
?
【27】通過h來隱藏
可以按下h來隱藏在元素面板中被你選中的元素。再次按下h使它出現。某些時候這是很有用的，例如你想截圖，但是又不想里面包含一些敏感信息。
?
【28】隱藏netWork請求的時間軸
如果你僅僅只是查看請求列表- 來確認狀態，大小和響應，那么你可以選擇隱藏請求的時間軸，因為它占了你將近一半的空間
?
【29】Console的代碼換行
在Console面板中調試多行代碼時，使用Shift + Enter組合鍵進行換行，Enter鍵將直接執行代碼
?
【30】DOM 斷點調試
基本上大家都會用JavaScript的斷點調試，但是應該很多人不知道Dom節點也可以進行斷點調試，DevTools提供了三種針對Dom元素的斷點調試：子元素改變時、屬性改變時 和元素被移除時。在Elements 標簽頁，選中一個元素
右擊，選擇 Breakon->subtree modifications(子元素改變時斷點)、attribute modifications (屬性改變時斷點)、node removal(元素被移除時斷點)
?
【31】緩存上一步操作的結果$_
在DevTools上運行JavaScript表達式的時候，可以使用$_來獲取到上一步操作的返回值。
?
【32】console中的 $0-$4
在Elements面板中，
$0是當前我們選中的html節點的引用。理所當然，$1 就是我們上一次選擇的節點的引用，$2 是在那之前選擇的節點的引用，一直到 $4
?
【33】選擇dom節點$和?
如果你沒有在App中定義過 $ 變量 (例如JQ)的話，它在console中就是對這一大串函數document.querySelector的別名。
如果是 ? 就更加厲害了，還能節省更多的時間，因為它不僅執行document.querySelectorAll并且它返回的是一個節點的數組
?
總結
以上是生活随笔為你收集整理的devtools的ctrl加r_Chrome DevTools调试技巧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 类和对象 经常用吗_pyt
- 下一篇： 单调有界定理适用于函数吗_《实变函数》—