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存儲的鍵值對

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