工欲善其事必先利其器vue
命令菜單
按Cmd + Shift + P（若是使用Windows，則按Ctrl + Shift + P）打開「命令」菜單。node
或者webpack
截取DOM生成圖片
先打開命令行, 輸入 Screenshotweb
Screenshot Capture area screenshot
點擊後能夠在可視區相似微信截圖同樣的截取，會直接給你下載個png格式的圖片。下邊的也是同樣微信
這個很差截圖，本身試一下便知網絡
Screenshot Capture full size screenshot
全屏截圖 並不僅是頁面可視區域，而是包含滾動條在內的全部頁面內容。 頁面有多長就截取多長，很是給力了dom
Screenshot Capture node screenshot
這個須要先用小光標先選中一個dom元素，而後再點這個命令，就會把你剛纔選擇的dom節點截圖下來工具
Screenshot Capture screenshot
截取全屏這個只截取到可視部分測試
在控制檯中使用上次操做的返回值
使用$_能夠引用在控制檯執行的前一步操做的返回值。動畫
經過拷貝請求相關信息或者總體拷貝請求
Network面板內，對於某個請求
下邊這是個動圖可是不會循環，點出去看一眼就知道了
找到Copy
點卡以後會看到能夠複製 request header，能夠 複製 response header
還能夠複製 總體請求 as cURL 能夠直接複製到系統自帶命令行工具裏執行和查看
從新發起xhr請求
很是實用的功能，當想二次發起請求就不用刷新頁面了 直接 Replay XHR
編輯頁面上的任何文本
在控制檯輸入document.body.contentEditable="true"或者document.designMode = 'on'就能夠實現對網頁的編輯了。
這個仍是比較實用的，好比你要測試一個DOM節點文字太長時，樣式是否會混亂，或者要去直接修改頁面元素去知足一些業務需求時。
固然你去點a連接仍是會跳轉的
動畫檢查
DevTools 中有一個動畫面板，默認狀況下它是關閉的。它可讓你控制和操縱 CSS 動畫，而且可視化這些動畫是如何工做的。
要打開該面板，能夠在 DevTools 右上角菜單 → More tools 中打開 Animations ：
默認狀況下，DevTools 會「監聽」動畫。一旦觸發，它們將被添加到列表中。你能看到這些動畫塊如何顯示。在動畫自己上，DevTools 會向咱們展現哪些屬性正在更改，例如 background-color 或 transform。
而後，咱們能夠經過使用鼠標拖動或調整時間軸來修改該動畫。
網絡面板（Network）的幻燈片模式
這個功能好看但不實用
啓動Network 面板下的Capture screenshots就能夠在頁面加載時捕捉屏幕截圖
複製調試數據
比較實用
經過全局的方法 copy() 演示
有時候想要複製打印出來的數據
這個樣子模擬下
console中打印了一堆數據，能夠將它存儲爲一個全局變量。只須要右擊它，並選擇 「Store as global variable」選項。第一次使用的話，它會建立一個名爲 temp1 的變量，第二次建立 temp2，第三次 ... 。經過使用這些變量來操做對應的數據。
在網慢的設備和cpu差的設備進行測試
找到 Performance
在Chrome DevTools中經過CMD/Ctrl + Shift + p打開命令菜單。 而後命令行 Show Performance
CSS/JS 代碼使用率
打開命令菜單行，輸入 Drawer Show Coverage
點擊reload 按鈕開始檢測
點擊相應文件便可查看具體的覆蓋狀況（藍色的爲用到的代碼，紅色表示沒有用到的代碼，不一樣主題顏色不一樣）
保存資源中的圖片或者複製成爲base64
最後一個知識點，在webpack中設置source-map是能夠直接在vue文件下打斷點調試的
以爲不錯就點贊關注收藏。