前端 Debug 的特點#
多平台
瀏覽器、Hybrid、NodeJs、小程序、桌面應用……
多環境
本地開發環境、線上環境
多工具
Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
多技巧
Console、BreakPoint、sourceMap、代理……
Chorme devTools#
Chorme devTools 谷歌瀏覽器自帶的調試工具，功能非常之強大，包括現在很多瀏覽器也採用了這個調試工具，它既可以動態的添加 / 刪除樣式並實時的顯示出來
強制狀態顯示#
可以將一些特定狀態下顯示的元素顯示出來（比如 hover、active 等）
也可以通過右側的樣式欄強制元素狀態 / 添加偽類等等
還可以篩選樣式
截圖#
是的沒錯，可以對節點進行截圖，非常的 amazing 啊（bushi
console#
js 中的 console.log 就會記錄在這兒，不用多說了吧，想必都用過～
不過有一點需要提及的是，也可以輸出帶樣式的文字方便調試時即時定位，如：
console.log('%s %o,%c%s', 'hello', {name:'我是姓名', age: 18}, 'font-size:20px; color:red; ', 'Welcome to bytedance!');
這裡的 % s 是輸出字符串，% o 輸出對象，% c 輸出樣式（用過 c/c++ 格式化輸出的都曉得，不過這裡的 % c 是樣式嗷）
console.table 可以具象化的展示一個對象數組，非常方便
const persons = [{id:1, name:'張三', age: 18, des: '好耶'},{id:2, name:'李四', age: 24, des: '我是李四'}, {id:3, name:'王五', age: 20, des: '這是什麼'}];
樹形結構 dir
Soure Tab#
顧名思義，展示源代碼中的內容，可以增加斷點、進行單步調試等。
在代碼中某行執行 debugger 或打個斷點就會在執行到這行的時候暫停，之後就可以繼續單步調試了，之後的調試就不做過多介紹了，直接上手試試就能明白。（後端調試多了這個很容易習慣 x 相當於打了個斷點）
其他還有當請求發生時打斷點：XHR/fetch breakpoints、給元素結構添加斷點（刪除等）、scope 可以查看作用域列表，（包括閉包 ）、CallStack 可以查看當前 JavaScript 代碼的調用棧等。
壓縮後的代碼如何調試？SouceMap#
前端代碼天生具有 “開源” 屬性，出於安全考量，JavaScript 代碼通常會被 webpack 等工具進行壓縮，而壓縮後的代碼通常只有一行，變量使用 a、b 等進行替換，整體變得不可閱讀，那麼壓縮後的代碼如何調試呢？
webpack 打包時可以多產出一個Source Map程序，會將壓縮後的代碼和真實的文件進行映射)，拋出異常時就將其映射出來，而在上線後將 Source Map 映射刪除。
Perfomance#
性能面板，可以生成報告，包括
NetWork#
查看網絡請求的面板，查看請求頭 / 響應等等。
Application#
該面板展示與本地存儲相關的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
小技巧：點擊該面板下的 Storage 面板中的 Clear Site Data 就可以清除該網頁的本地存儲數據，無需打開瀏覽器設置進行清除。
移動端 H5 調試#
真機調試#
ios#
-
使用 Lightning 數據線將 iPhone 與 Mac 相連
-
iPhone 開啟 Web 檢查器 (設置 -> Safari -> 高級 -> 開啟 Web 檢查器)
-
iPhone 使用 Safari 瀏覽器打開要調試的頁面
-
Mac 打開 Safari 瀏覽器調試 (菜單欄 -> 開發 -> iPhone 設備名 -> 選擇調試頁面)
-
在彈出的 Safari Developer Tools 中調試
沒有 iPhone 設備可以在 Mac AppStore 安裝 Xcode 使用其內置的 ios 模擬器
Android#
- 使用 USB 數據線將手機與電腦相連
- 手機進入開發者模式。勾選 USB 調試。並允許調試
- 電腦打開 Chrome 瀏覽器，在地址欄輸入: chrome://inspect/1devices 並勾選 Discover USB devices 選項
- 手機允許遠程調試，並訪問調試頁面
- 電腦點擊 inspect 按鈕 8622
- 進入調試界面
這種方法一般不推薦，直接使用手機掃碼查看體驗更佳
代理調試#
之前使用手機利用 fidder 改代理抓包，現在也可以使用代理工具在手機上調試前端頁面。原理如下：
- 電腦作為代理伺服器
- 手機通過 HTTP 代理連接到電腦
- 手機上的請求都經過代理伺服器
老師課堂上用的是 Charles 為例子，我就以之前手機上抓包為例了，親測可行，詳細步驟可以看這篇博客，需要安裝證書才能抓取到 HTTPS 請求【fiddler】用 fiddler 實現 android 手機抓包_michaelwoshi 的博客 - CSDN 博客_fiddler 手機抓包
改完代理就可以使用手機訪問開發環境頁面了！其他常用工具如下：
常用開發調試技巧#
線上及時修改 Override#
- 打開 Sources 面板下的 Overrides
- 點擊 Select folders for Overrides。選擇一個本地的空文件夾目錄。
- 允許授權
- 在 page 中修改代碼，修改完成後保存
- 打開 devTools ，點擊右上角的三個小點 -> More tools -> Changes，就能看到所有修改了
記錄的非常直觀，改完刷新也不會再消失了，還能查看修改了那些地方
利用代理解決開發階段的跨域問題#
瀏覽器本身有一個 同源策略 ，不同源的請求會產生跨域問題，即協議、ip、端口號這三者有任何一個不同，就會產生跨域問題
啟用本地 source map#
線上不存在 Source Map 時可以用 Map Local 網絡映射功能來訪問本地的 Source Map 文件
小黃鴨調試大法！#
傳說中程序大師隨身攜帶一隻小黃鴨，在調試代碼的時候會在桌上放上這隻小黃鴨，然後詳細地向鴨子解釋每行代碼，然後很快就將問題定位修復了。
——《程序員修煉之道》
原來是出自這嗎 233333，這是梳理自己問題邏輯的一個好方法。
總結感想#
前端開發的調試也是非常重要的一環，這節課非常詳細的講了 PC 端谷歌開發者工具的使用和移動端開發的調試，令人受益匪淺。
本文引用的內容大部分來自禿頭披風俠老師（？）的課、MDN 以及一篇外部博客，【fiddler】用 fiddler 實現 android 手機抓包_michaelwoshi 的博客 - CSDN 博客_fiddler 手機抓包