實用 Chrome DevTool Tips

做爲前端工程師，咱們天天的工做離不開Chrome，特別是Chrome 的 DevTools，提供了不少強大實用的功能，熟練掌握這些工具，可以爲咱們的平常開發和調試工做節省大量時間，提升效率。

目前網絡上有不少此類介紹 chrome 開發者工具的文章，可是大多隻是功能的陳述，沒有結合實際的使用場景，致使看完以後，不知道能運用在什麼場景下，過幾天就忘了。

本文嘗試經過結合實際開發經驗，來爲你們介紹一些經常使用的 chrome 開發者工具的使用，但願可以幫助到你們。

Console

• 在任意麪板喚起 console

  • Ctrl + `
  • 使用場景：console 是咱們最經常使用的面板，咱們可能在其餘的面板下調試代碼時須要使用到console。若是直接點擊 console 面板來回切換的話，效率不高，能夠直接用快捷鍵喚起 console，而且可以保留當前正在查看的面板。

• $0 $1 $_

  • $0: 引用最後一次選中的dom節點
  • $1: 引用倒數第二個選中的dom節點
  • $_: 引用 console 中上一個表達式返回的值
  • 使用場景：在 console 中咱們可能常常要嘗試一些功能，寫一些測試代碼。$0 和 $1 可以讓咱們快速選中 dom 節點，對選中的 dom 作些操做。$_ 方便咱們在沒有給返回值賦給變量，但又須要引用這個值的狀況使用。

• store as global variable

  • 當你想將某些值存儲到變量（接口請求、返回參數，dom節點，debug時的某些變量）在console面板使用時
  • 當你在 console 打印出一些庫的對象時，使用 store as global variable 後可以直接調用這些庫的方法，好比 moment、antd 的 form 等

• copy()

  • 幫你快速的 copy 一些 console 中的變量

Elements

• computed style

  • 當項目變得複雜時，一個節點上的樣式可能會受到多處代碼的影響，computed style 可以查看真正使它生效的 CSS 樣式

• Break on

  • 當 DOM 狀態變化時打斷點
  • 使用場景：在中後臺項目中常常會基於 antd 的組件作一些改造，以 Dropdown Menu 舉例，咱們想自定義改造組件下拉的內容，來知足咱們的需求。這時候若是直接使用檢查元素來修改，會發現鼠標一旦移開後下拉就會收起，形成了調試的麻煩。這個時候就很適合使用 Break on 這個功能

• 提取節點樣式

  • 右擊節點 👉 copy 👉 copy styles

Network

• 禁用網絡緩存

  • 當新內容發佈後，頁面始終展現的仍是舊的內容時使用（開發調試時最好一直將其勾選）
  • Network 👉 Disable cache

• 網絡節流（模擬弱網環境）

  • 當開發移動端應用時，查看應用在弱網環境下是否還可以有較好的加載速度

• Block url

  • 阻止某個url的請求（當你不得不在線上debug時，把某些寫操做的請求給阻止，如表單提交等）

• advanced filter

  • 對網絡請求進行更精細的篩選

• is:from-cache

  • 查看哪些請求是走緩存的

• has-response-header:

  • 篩選出包含某些請求頭的接口

• larger-than:

  • 查看有哪些請求體積過大，便於分析性能、優化拆包等

• method:

  • 只查看某種方法的網絡請求（POST/GET）

• 太多了記不住？

  • 在篩選框裏輸入英文首字母，瀏覽器會爲你自動提示這些選項

• Header options

  • 在network 面板，右擊，能夠選擇在network面板中要展現的內容（cookie，cache-control）
  • 能夠將接口某個自定義的 header 展現出來，如咱們常見的 x-tt-logid，這樣就能很方便的將有問題的接口的 logid 快速的 copy 給後端同窗了

Sources Panel

• Conditional breakpoints

  • 當咱們在某處打了個斷點，卻只想在某些狀況下觸發時使用
  • 使用場景：當咱們打斷點調試react代碼時，常常會遇到state變化致使頁面屢次觸發 render，從而一直觸發斷點，而咱們只想在特定條件纔想斷點的狀況。下面這個例子示範瞭如何只在num有值的狀況下才斷點

• Blackbox（add script to ignore list）

  • 跳過工具庫的代碼（在調用棧上不顯示react、react-dom等工具庫的函數）

• Pause on exception

  • 當出現拋錯❌ 的時候斷點
  • 使用場景：當代碼由於某些狀況（接口數據異常、訪問了 undefined 等）致使頁面白屏，可使用此方法在出現異常的上下文環境查看致使異常的緣由

• Never Pause Here

  • 當你在某處打了斷點，可是你暫時不想關心這裏的具體狀況時
  • 結合上面說到的 Pause on exception，若是開啓這個的話會在任何有拋錯的地方打斷點，但有時候像一些老項目裏有不少報錯，可是不影響正常邏輯時，咱們能夠用這個方法忽略這個斷點

• Code Folding

  • Cmd + shift + p 👉 Code Folding
  • 線上查看代碼時，能夠將函數體收起

Other

• Cmd + shift + p

  • 在任意麪板按下這三個鍵，會彈出功能列表，能夠快捷的跳轉到某些面板、使用某些功能等

• Show paint rectangles

  • 高亮顯示頁面哪一個區塊在渲染

• screenshot

  • 對某個dom節點/全屏進行截圖