chrome工具偵錯

專案偵錯的困境

程式開發總會遇到各種各樣的問題，為什麼實際結果和預期結果不一致？
這個時候如果能深入程式內部抽絲剝繭去一探究竟再好不過！
而chrome工具是前端開發的殺手鐗，經常聽到的一句話是：
出問題了？F12看看...
前端偵錯的手法一般就兩種：

1. 伺服器端（新增偵錯程式碼）
2. 使用者端（開發者工具）
   對於簡單的頁面來說，都能很快的找到問題所在
   面對大型的網站專案（react、vue），頁面成千上萬的組合巢狀。
   很多頁面很多相似的按鈕，當我們接受一份專案程式碼，如何快速的定位bug所在頁面？
   如果從專案結構上層層遞進，不僅專案時間不允許，而且容易陷入程式碼的海洋！
   如果從頁面斷點入手，現在的前後端分離專案，程式碼經過編譯，面對一串編譯壓縮後的字串，如同天書！
   怎麼辦？客戶和領導就在身後，問題解決完才能下班？怎麼能早點回家吃口熱飯？

chrome偵錯工具常用功能介紹

一、Elements（元素）

• Styles（樣式）
  
• 說明：選中元素的自身樣式、繼承樣式等，可以手動修改進行偵錯
• 場景：手動修改選中元素樣式、選中元素新增斷點偵錯

實戰1.1 修改元素樣式

實戰1.2 排查樣式來源

實戰1.3 檢視元素事件

二、Console（控制檯）

• 說明：進行簡單的變數輸出偵錯、伺服器端新增輸出資訊等
• 場景：debug過程種的變數輸出檢視、伺服器端偵錯資訊輸出

三、Source

• 說明：網站的原始碼，包含html、css、js、debug
• 場景：原始碼斷點偵錯、dom斷點、事件斷點

實戰3.1 新增程式碼斷點

斷點新增方式

• Elements選中元素，右鍵新增dom事件
• debug面板，新增滑鼠、鍵盤等事件（見下圖）

實戰3.2 斷點偵錯

技巧1：新增滑鼠、鍵盤事件後，呼叫堆疊首先看到的框架原始碼，怎麼快速進入自己的原始碼？

• 忽略框架程式碼，這樣就可以進到自己編寫的事件處理方法裡邊
  

技巧2：大型專案，如何快速攔截包含某種關鍵字的api，以快速定位程式碼位置？

• 在XHR/fetch Breakpoint裡新增/api/test關鍵字匹配串，這樣就會攔截所有包含該關鍵字的api請求
  

實戰3.3 tooltip滑鼠移開就沒了，如何偵錯？

• 前端使用setTimeout偵錯程式碼的小技巧

四、Network

• 說明：網站發起的所有遠端請求資訊詳情
• 場景：請求資訊詳情（header、param、body等資訊）

技巧1：大型專案，某一個請求報錯，如何快速定位請求的原始碼js位置？

• 檢視initiator面板的請求堆疊資訊，找到對應的原始碼發起位置
  

五、Application

• 說明：cookie、session、localStorge等儲存資料的位置
• 場景：檢視cookie的失效時間、編輯localStorge儲存的鍵值對

其它的頁籤不常用，在本文不做介紹。