來源小冊地址正則表達式
Chrome-DevTools
快捷鍵及通用技巧
- Ctrl + Shift + D:切換DevTools窗口的佈局(下右)
- 切換DevTools選項卡
- Ctrl + [ 或 ]: 向左和向右
- Ctrl + 1 到 9:DevTools>Settings>Preferences>Appearance中打開
- 上下箭頭遞增/遞減 -> 調試樣式
- Alt + 上下箭頭 0.1
- 上下箭頭 1
- Shift + 上下箭頭 10
- Crtl + 上下箭頭 100
- Ctrl + F: 查找
- CMD + - 或 =: 可縮放鼠標對應區域
Command菜單
- Ctrl + Shift + P: 打開Command菜單
- 截圖:在Command菜單中輸入screen,可選擇節點截圖、全屏截圖等,圖片會直接下載到本地
- 輸入timestamps,開啓log時間戳
Snippets代碼塊
- Sources面板New snippet(新建一個代碼塊): 複用這些JavaScript代碼塊
- 右擊run運行
console
console中的'$'
- $_: 是對上次表達式的引用
- $i('lodash'): 可將npm包引入console進行測試(須要安裝Console Importer插件)
條件斷點
不再用在源碼裏添加console.log了npm
- Add conditional breakpoint...(添加條件斷點)
- 輸入console.log()或值爲true/false的條件表達式
- 不用時在Breakpoints右鍵remove all
騷操做
-
console.log({ var1, var2 }): 用{}包起來,標記哪一個是哪一個數組
-
console.table(): 適用於數組、類數組、對象編輯器
-
console.dir(): 查看DOM關聯到的真實對象 li = $('li'): 能夠建立一個DOM元素
函數
-
console.time() — 開啓一個計時器 console.timeEnd() — 結束計時而且將結果在 console 中打印出來 能夠傳入一個標籤值佈局
-
"眼睛" 符號, 定義任何JavaScript表達式測試
Network
- Overview: 不須要看時間軸信息時隱藏
- 過濾器: 能夠輸入字符串或正則表達式,過濾請求,Ctrl + Space顯示全部可能的關鍵字
- 請求表: 在表頭上右鍵能夠添加列(我常常添加Method)
- initiator列: 顯示調用堆棧信息,顯示哪一個腳本的哪一行觸發了請求。
- Response Headers: 控制響應頭的顯示
Elements
- H: 隱藏/顯示元素
- Ctrl + Shift + Z: 撤銷全部修改 CMD + Z: 撤銷上次修改
- Shadow editor 陰影編輯器: box-shadow或text-shadow屬性的陰影方形符號
- Timing function editor 定時函數編輯器: trasition、animation屬性
CSS perspective屬性: 一是開關,經過它來打開和關閉3D透視效果,二是設置透視的距離。插件
- 展開全部的子節點: expand recursively命令
Drawer:
- ESC: 打開/隱藏