Chrome 控制檯

來源小冊地址正則表達式

Chrome-DevTools

快捷鍵及通用技巧

  1. Ctrl + Shift + D:切換DevTools窗口的佈局(下右)
  2. 切換DevTools選項卡
  • Ctrl + [ 或 ]: 向左和向右
  • Ctrl + 1 到 9:DevTools>Settings>Preferences>Appearance中打開
  1. 上下箭頭遞增/遞減 -> 調試樣式
  • Alt + 上下箭頭 0.1
  • 上下箭頭 1
  • Shift + 上下箭頭 10
  • Crtl + 上下箭頭 100
  1. Ctrl + F: 查找
  2. CMD + - 或 =: 可縮放鼠標對應區域

Command菜單

  1. Ctrl + Shift + P: 打開Command菜單
  2. 截圖:在Command菜單中輸入screen,可選擇節點截圖、全屏截圖等,圖片會直接下載到本地
  3. 輸入timestamps,開啓log時間戳

Snippets代碼塊

  1. Sources面板New snippet(新建一個代碼塊): 複用這些JavaScript代碼塊
  2. 右擊run運行

console

console中的'$'

  1. $_: 是對上次表達式的引用
  2. $i('lodash'): 可將npm包引入console進行測試(須要安裝Console Importer插件)

條件斷點

不再用在源碼裏添加console.log了npm

  1. Add conditional breakpoint...(添加條件斷點)
  2. 輸入console.log()或值爲true/false的條件表達式
  3. 不用時在Breakpoints右鍵remove all

騷操做

  1. console.log({ var1, var2 }): 用{}包起來,標記哪一個是哪一個數組

  2. console.table(): 適用於數組、類數組、對象編輯器

  3. console.dir(): 查看DOM關聯到的真實對象 li = $('li'): 能夠建立一個DOM元素函數

  4. console.time() — 開啓一個計時器 console.timeEnd() — 結束計時而且將結果在 console 中打印出來 能夠傳入一個標籤值佈局

  5. "眼睛" 符號, 定義任何JavaScript表達式測試

Network

  1. Overview: 不須要看時間軸信息時隱藏
  2. 過濾器: 能夠輸入字符串或正則表達式,過濾請求,Ctrl + Space顯示全部可能的關鍵字
  3. 請求表: 在表頭上右鍵能夠添加列(我常常添加Method)
  • initiator列: 顯示調用堆棧信息,顯示哪一個腳本的哪一行觸發了請求。
  • Response Headers: 控制響應頭的顯示

Elements

  1. H: 隱藏/顯示元素
  2. Ctrl + Shift + Z: 撤銷全部修改 CMD + Z: 撤銷上次修改
  3. Shadow editor 陰影編輯器: box-shadow或text-shadow屬性的陰影方形符號
  4. Timing function editor 定時函數編輯器: trasition、animation屬性

CSS perspective屬性: 一是開關,經過它來打開和關閉3D透視效果,二是設置透視的距離。插件

  1. 展開全部的子節點: expand recursively命令

Drawer:

  1. ESC: 打開/隱藏
相關文章
相關標籤/搜索