前端答疑-chrome開發者工具正確食用-調試代碼

之前寫過前端答疑-chrome開發者工具正確食用-看網頁源碼，其中涉及到了 Sources 和 Network 兩個標籤。

不曾想現在的世界越來越看不懂了
昨天吧，一個朋友突然聯繫我了（應該是校友吧，不過我沒見過本人，大我十屆？我也是奔三的人了，突然好難過）。
問我360 瀏覽器如何調試 js。這個時候應該配圖了[黑人問號臉]。調試應該是每個開發必會的技能吧，即使不會，難道沒有網絡嗎？網上連教程都沒有嗎？

那麼好了，基於上面的吐槽，我們開始今天內容。

所需知識

1. chrome 開發者工具之 Console
   主要就是打日誌，然後分析日誌
2. chrome 開發者工具之 Sources
   主要是調試js。包括調試工具（步入、步出、調用堆棧等）
3. chrome 開發者工具之 Element
   主要是查看 DOM，以及修改 CSS。
   目前來說不如jQuery時代用的多，我基本就是改css了。
4. chrome 開發者工具之 Network
   看每次請求和響應，包括參數，headers這些。
5. chrome 開發者工具之 Application
   一些前端本地存儲。cookie、localstroage 等等

chrome 開發者工具之 Console

log 是一個開發利器。 hello world 大概就是我們的每個人的第一條 log。

java system.out.println('hello world')
python print('hello world')
js console.log('hello world') 當然，有的時候我們會使用 alert 來打。這裏推薦一下 fundebug，一行代碼搞定BUG監控，也可以打log，有一部分的免費額度。

F12 或者 Control+Shift+i（PC平臺）/ Alt+Command+i（Mac平臺）打開我們的控制檯

console API 介紹

JavaScript 原生中默認是沒有 Console 對象。是宿主對象提供的，也就是說console 是瀏覽器提供的內置對象。
用於訪問調試控制檯, 在不同的瀏覽器裏效果可能不同。
IE低版本沒有（當然你裝了高版本，然後打開控制檯他又能用console了）。

日誌級別 API

提供了日誌級別api。可以方便我們根據類型，更快的定位需要關注的問題。

1. console.log('普通-文本')與console.dir('普通-對象')
   不同之處在於輸出dom節點對象類型是會有一些差別。
   
2. console.info('信息') console.log 的別名，輸出信息，部分瀏覽器會增加一個藍色標誌。
3. console.warn('警告') 黃色警告標識，也有堆棧信息。
4. console.error('錯誤') 輸出信息時，在最前面加一個紅色的叉，表示出錯，同時會顯示錯誤發生的堆棧。
   
5. console.debug('調試') 從 Chromium 58 開始，Chromium 瀏覽器只有勾選了控制檯中的 “Verbose” 日誌級別纔可見。

支持多種寫法

1. 多參數
   console.log('auther:', 'lilnong.top')
2. 佔位符格式，支持的佔位符有：字符（%s）、整數（%d或%i）、浮點數（%f）、可展開的DOM（%o）、列出DOM的屬性（%O）、根據提供的css樣式格式化字符串（%c）
   console.log('auther:%s', 'lilnong.top')
console.log('%cauther:%s', "color: red; font-size: 20px",'lilnong.top'); 更適合封裝起來使用。

功能性的 API

1. console.assert(location.protocol=='https:', "https防止劫持哦~") 接受兩個參數，第一個參數是表達式，第二個參數是字符串。只有當第一個參數爲false，纔會輸出第二個參數，否則不會有任何結果。
   
2. console.clear() 清除當前控制檯的所有輸出。
3. console.count('count') 提供計數功能。比如說有個排序算法，我們想統計時間複雜度。
   Console.countReset() 我們也可以重置指定標籤的計數器值。
   
4. console.group('第一層');console.groupEnd(); 提供將顯示的信息分組功能，可以把信息進行摺疊和展開。
   console.groupCollapsed('第一層');console.groupEnd(); 同上，不同點是默認是摺疊狀態
   
5. console.table(arr); 提供將複合類型的數據轉爲表格顯示。還可以進行排序等操作。
   
6. console.time('task');console.timeEnd('task'); 提供了統計代碼執行用時的功能。不準，波動會比較奇怪，多統計，然後求平均值吧
   
7. console.trace(); 追蹤函數的調用過程，也可以理解爲把打印堆棧。
   

Console 面板介紹

上面介紹了API。接下來我們介紹一下面板的使用。

1. 控制的是，級別篩選欄的隱藏與顯示。

   1. messages 是所有消息類型

   2. user messages 是指所有用戶日誌，瀏覽器產生的不算。如下，產生的錯誤就不算

      document.body.addEventListener('touchmove', (e)=>e.preventDefault())
      // VM275:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

   3. errors 是指錯誤級別的日誌
   4. warning 是指警告級別的日誌
   5. info 是指信息級別的日誌
   6. verbose 是指調試級別的日誌
2. 是指清空當前面板內容。
   快捷鍵 ctrl+l 對應的命令是 console.clear();
3. 是指當前的作用域。如果有iframe的話，可以切換作用域爲對應的iframe。然後就可以快樂的在控制檯調用iframe裏面的變量了。
4. 創建一個動態監聽。實時監聽一個變量，如果變化了，這裏也會變化
   
   
5. 通過關鍵詞過濾日誌
6. 描述有多少條記錄被隱藏

7. 設置功能，裏面是一些控制開關。

   1. 隱藏網絡請求相關的錯誤，比如404
      
   2. 持續日誌功能。正常來講，我們刷新頁面或者跳轉其他頁面，日誌會清空。開始持續日誌後，跳轉刷新等操作不會清空日誌。更方便我們比對兩次請求的差異
      
   3. 配合 top，只顯示當前作用域內的日誌。
   4. 把一些錯誤合併到一起。和默認的合併效果不太一樣。
   5. 爲每次請求的打印日誌
      
   6. 可以理解爲及早求值，當你在控制檯輸入一個表達式的時候，下面會出現他的結果，這個時候你還沒有按下回車
      
   7. 提供記錄你歷史輸入，方便快捷輸入選擇。

chrome 開發者工具之 Sources

API 介紹

相關的應該只有debugger了吧。
當控制檯是打開狀態，走到debugger會進入調試模式。反之沒打開控制檯，不會進入調試模式。
測試地址，爲什麼會有 ajax 的 debugger 測試呢？因爲問我的那個人，說兼聽不到ajax的。

面板介紹

這裏介紹兩部分 代碼區和調試工具區

代碼區

如下圖所示，可以看到我們當前程序的代碼。
在左邊行數顯示的位置我們可以直接打斷點，也可以右鍵，執行更多斷點操作

1. Add breakpoint 就是設置斷點，和單擊效果是一樣的
2. Add conditional breakpoint 添加條件斷點，可以滿足一定的條件再觸發
   
3. Add logpoint 是打一個日誌點，每次執行到這裏可以打日誌
   
   
4. Never pause here 在當前點增加一個條件爲false的條件斷點
   
5. Blackbox script 屏蔽當前文件，比如這個文件中有debugger也不會執行斷點。常用於一些開源類庫，打斷點不希望跳入到裏面。
6. 如果一行有多個操作，會在後面出現斷點標識
   
7. shift+單擊，可以臨時關閉當前斷點
   

調試工具區

下面我們介紹一下每個按鈕的功能

1. 當有斷點的時候是個三角，意思是放過這個斷點。
   當無斷點的時候會在下次調用的時候停住。
   
2. 下一行，如果是方法不會跳進去
3. 步入，如果是方法，可以跳進去
4. 步出，跳出當前方法
5. 下一步（我沒用過）
6. 當前狀態是捕獲調試。藍色的時候是不捕獲調試，會跳過 debugger。
   方便你打了斷點，然後又想測試效果
7. 這個是捕獲錯誤。當前是不捕獲。

工具欄介紹完了，我們看一下其他區域

1. Threads 當前線程
2. Watch 可以監聽一些常用變量，方便排查問題
3. Call Stack 可以理解爲當前的調用堆棧信息
4. Scope 爲當前上文環境中變量的值，切換call stack，scope中變量也會切換。
5. Breakpoints 是當前所有的斷點
6. XHR/fetch Breakpoints 對接口訪問的斷點
7. DOM Breakpoints 爲所有dom上的斷點，可以監聽subtree modified、Node removed、attribute modified
8. Global Listeners 所有已監聽的事件
9. Event Listener Breakpoints 所有Event的監聽

常規用法

1. vue中，created打個斷點，然後把this綁在全局方便排查問題
2. 某些不確定的地方打斷點，然後單步調試
3. 異步內容打斷點，查看返回是否正常

chrome 開發者工具之 Element

DOM樹（左邊）

左邊部分是我們的DOM樹，一般來說看看層級。具體找DOM的活，我們都是在對應的元素上右鍵-檢查。

1. 可以改屬性，標籤
2. 右鍵可以操作
   

樣式（右邊）

右邊部分是我們當前DOM的css相關，一般來說可以在這邊改改樣式，看看效果。支持鍵盤上下切換當前值。

還有一些便捷操作的控件

1. 顏色選擇
   
2. box-shadow
   

常規用法

1. 微調css，及時可見
2. 查看當前盒子模型
3. 當前DOM所有事件
4. 查詢當前DOM樣式繼承問題。
5. 查詢當前DOM最重計算值

chrome 開發者工具之 Network

1. 看接口的返回值
2. 看接口的請求頭，響應頭
3. 查看資源的加載速度
4. 查看資源的大小，緩存情況，響應情況（cdn、waiting 等時間）

Network 之 preserve log

該功能爲長日誌功能，正常來說看到的都是當前頁面的。
如果跳轉頁面或者說刷新之後就沒了。通過打開 preserve log，我們可以長久的保留內容。
那它有什麼作用呢？

1. 我們可以看到一些中間頁的跳轉，省去了抓包的麻煩。
2. 可以和上個頁面的數據比對。

Network 之 disable cache

前端緩存也是比較麻煩的一個事情。經常需要強刷，清緩存一頓的操作。
當我們打開 disable cache 之後，我們就不需要關了，每次都是無緩存的加載

Network 之 offline

比如說在測試 PWA。或者說弱網的情況下的一種快速配置。

Network 之 過濾行

請求比較多的頁面，我們有可能需要過濾。
工具欄提供了，路徑過濾（支持正則），類型過濾（All,XHR,js），

Network 拿響應

其實很簡單啊，找到頁面的請求，然後看 response 裏面不就是嗎？

Network 看headers

這個其實也是昨天碰到的，有個朋友說他下載文件失敗。我打開看到他response的header的Content-Disposition寫錯了。

chrome 開發者工具之 Application

可以查看對應數據，更改對應數據，還可以清空。

微信公衆號：前端linong

資源

1. 20個Chrome DevTools調試技巧 --Fundebug