前端答疑-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