那些不須要你知道的Chrome DevTool - 使用技巧篇

前提

默認讀者已經具有了基本的Chrome DevTools 的知識，即瞭解Chrome開發者工具中每個面板的基本用法。

若是還沒有了解，請自助查看同事寫的基本介紹。

固然，你也能夠選擇繼續往下讀。

快捷鍵

經常使用幾個面板的快捷鍵以下：

1. Elements Panel Command+Option+C (Mac) 或 Control+Shift+C (Windows, Linux, Chrome OS).

2. Console Panel

   Command+Option+J (Mac) 或 Control+Shift+J (Windows, Linux, Chrome OS)

3. 打開上一次停留的面板

   Command+Option+I (Mac) 或 Control+Shift+I(Windows, Linux, Chrome OS)

4. 調用命令菜單欄

   Command+Shift+P(Mac)或Control+Shift+P(Windows, Linux, Chrome OS)

對於剩下 DevTools 全部的快捷鍵，請自行查看。

Elements Panel

1. 如何快速定位一個元素，並出如今視窗中？

   能夠再面板中進行搜索Command+F，元素主面板會喚起一個搜索條，搜索條中能夠輸入 CSS 選擇器進行過濾，找到對應元素後，右鍵點擊scroll to view，即可以再視窗中查看到該元素。

2. 如何定位元素上綁定的事件？

   定位到了目標元素，而後元素面板中的幅面版切換至 Event Listeners，點開事件查看函數配置，選中 handler 右鍵點擊 Show Function Definition，DevTools會自動跳轉Source面板對應函數申明的地方。

   

3. 如何監聽一個DOM節點變化，是由那部分的JavaScript腳本控制的？

   在 Elements Panel 中選中目標的元素節點，而後右鍵查看 Break on ，查看不一樣的監聽方式

   

   • Subtree modifications

     當選中節點的子節點發生變化(添加、移除、內容改變)都會觸發，可是子節點屬性變化以及選中節點任何變化都不會觸發。

   • Atrribute modifications

     當選中節點屬性變化(添加、移除、屬性值變動)都會觸發。

   • node removal

     當選中節點被移除時候觸發。

4. 如何頁面的accessibility？從元素是否正確標記角度。

點擊Elements Panel 右側的 Accessibility Tab，你能夠查看整個頁面中的Accessibility Tree，該 Tree 是DOM tree 的子集，對應節點是由對屏幕閱讀器（screen reader）有關和有用的展現內容。

能夠查看每一個節點的ARIA Attributes，該屬性是確保屏幕閱讀器(screen reader)如何從Accessibility Tree以合適的方式展現頁面內容。

爲何要提升頁面的accessibility，這項性能呢？

Web Accessibility is a way to make everyone including the disabled to have access to the web and internet in whole.

Web accessibility means that people with disabilities can use the Web

from Why Web Accessibility Is Important and How You Can Accomplish It

就是爲了讓每個人都能得到訪問網站的權利。

那如何審查本身的網站accessibility的情況呢？

1. 能夠安裝axe查看進行審查，該插件還會給出對應的解決方案，以及能夠幫助你快速定位問題元素在 Elements Panel 的位置

2. 使用 Audits Panel 只勾選 Accessibility 選項，而後進行審查，會有對應的報告給出而後結合經驗進行修復。

3. 如何查看頁面中 CSS 和 JavaScript 使用狀況？

   解釋「使用狀況」，最理想的狀況頁面中使用到的 CSS 和 JavaScript 每一行都被頁面使用到，但保不齊開發途中咱們忘記剔除無用的代碼？

   使用「快捷鍵」中調用命令菜單欄的命令，輸入「show coverage」，即可以查看 Coverage 面板。點擊面板中的刷新按鈕，最後即可以獲得頁面中 CSS 和 JavaScript 使用狀況。注：此時的表示的使用率狀況是頁面加載的使用率。若是想得到更全的使用率狀況請點擊Recording 按鈕進行操做。

   雙擊點擊任意 CSS 和 JavaScript 腳本，會自動調整到自動格式化好的 Sources Panel 中左側會出現紅綠標記，前者表示該行在頁面中還沒有使用，後者即是改行在頁面中被使用。

4. 如何展開全部的元素節點 ？

   選中父級節點，右鍵選中「Expand recursively」，Elements Panel 會將全部子節點展開，方便導航。固然對應的快捷鍵是 Option + click(Mac) 或 control + alt + click (Windows, Linux, Chrome OS)

Console Panel

首先 console 面板你們主要工做都是在這邊查看更多代碼中的日記，而console下有許多好用的API，這些 API 能夠幫助你在諸多的 log 中以不一樣形式的方式查看，但這裏邊步一一贅述API了，自助查看官網。

感興趣的能夠查看一篇文章：Getting creative with the Console API! 中文翻譯

可是筆者鍾愛time/timelog/timeEnd，這些 API 能夠幫助你的代碼快速粗糙的性能測試。

1. 如何從不一樣類型的 log 中過濾如何自定義條件的log ？

   存在歷史遺留問題的項目中，會在 console 面板看到各處（代碼中/瀏覽器）留下的 log 。爲了過濾出本身想看到的log，你能夠根據console panel 中的 Filter 進行過濾。

   Filter 會有一些智能的提示關鍵詞：

   • url: 查看對應腳本的log或是不一樣網址或是插件中的log。
   • source: 能夠根據產生log的來源來過濾。
   • context: 能夠根據不一樣的上下文，由於若是內嵌 <iframe>的時候會產生新的上下文。

   Filter 一樣支持正則表達式進行過濾，若是想同時支持多個條件，用空格隔開。

   固然若是僅僅是爲了查看一條指定的log，一樣可使用搜索，快捷鍵就是和你想的同樣。

2. 如何在 Console Panel 監聽元素事件呢？

   咱們可使用$0-$4表示咱們以前在 Elements Panel 中選中過的倒數四個元素。而後咱們想要監聽對應的元素的事件時，咱們可使用使用控制檯提供的工具API ——monitorEvents(<DOM_NODE>, <Event_TYPE>)。而後當被監聽元素觸發對應事件的時候，控制檯會打印對應的Event對象出來。

3. 如何在其餘面板中，調起另外一個Console Panel？

   在Chrome DevTool中存在一個 drawer 的Tips，該面板中一樣存在一個Console Panel，只要在開發者工具開啓的時候，按ESC即可喚起，這樣方便後續的調試。

4. 如何複製變量到粘貼板中？

   Console 工具API 一樣提供了一個copy(anything)，由於咱們以後每個變量咱們只要選中右鍵均可有一個「Store as global variable」的功能，先存在 Console Panel中，而後可使用該方法將對應的變量複製到粘貼板中。由於不少的時候一樣的接口在不一樣場景返回不一樣的數據，首先咱們須要一份原始數據，經過這樣的方法生成一份mock數據，而後進行修改調試。固然有時候咱們僅僅想獲取這個對應全部的key值或是value值時，能夠配合keys(object)或values(object)。

5. 如何經過Console關聯到Element Panel中的DOM節點或對應的函數？

   Console 工具API 一樣提供了一個inspect(<DOM_NPDE>/function)。輸入對應的類型，DevTool會自動幫你定位到對應面板的對應位置。

   若是是定位DOM節點的時候，配合$或是$$使用，它倆分別是document.querySelector() 和 document.querySelectorAll()的縮寫。

   若是是定位函數時，可使用getEventListeners(<DOM_NODE>)獲取對對應的函數，而後經過該方法找到對應的函數定位。

   固然有時候，一不當心早按了回車以及「Store as global variable」不想輸入那麼長的變量名，則可使用工具API中的$_代替。

   固然你也能夠經過這樣的方式進行定位到對應函數。

   

如何你想查看更多的控制檯提供的工具API，請查看。

Network Panel

其實這個是工做中最經常使用的Panel，咱們常常在這裏看各樣的數據。

1. 如何查看各類請求之間的依賴關係？

   其實答案已經在咱們眼前，可是咱們不多關注這一點。在Network中有一列叫Initiator，而這一列展現的信息就是請求之間相互依賴的關係。

   固然你一樣能夠按住shfit,而後鼠標hover在每個請求的Name這一列，你可會發現有些請求會被高亮成綠色，有些高亮成紅色。而綠色就是該請求的initiator，而紅色就是該請求附屬的後續請求。

2. 如何過濾出知足你預想的請求？

   其實咱們都知道每個Panel中都有一個Filter的輸出框這個交互，可是咱們最多寫寫正則匹配匹配就行了，可是每每沒有嘗試一些開發者工具根據全部請求歸類了許多的特殊字段給咱們使用。

   好比說，前不久在優化系統的時候，有一個系統中是否存在還沒有壓縮的資源。

   固然咱們能夠選擇把全部請求的Size這一列一個個看過來，上面展現的壓縮事後的大小，下面灰色展現爲壓縮前的大小，當兩個數字一致時則正面資源還沒有壓縮。

   咱們知道若是一個資源壓縮過，請求對應的響應頭會存在一個Content-Encoding字段。而後咱們能不能根據每一個請求的響應頭進行搜索呢？答案是顯而易見的，咱們能夠在 Filter 中根據has-response-header:Content-Encoding這樣的條件，過濾出響應頭含有Content-Encoding的響應頭，而後取反即可以知足需求了。

   若是你知道更多Chrome幫咱們歸類好的過濾條件，請查看官網。

3. 如何屏蔽暫時無用請求？

   開發階段存在一對多的狀況下，可是同時要上線，因此前端很容易出現開發中看到許多的干擾請求，如404之類的。

   這時候你能夠選中的對應的請求，右鍵選中「Block request url」，而後刷新頁面繼續在當前環境開發了。

   可是請記得在切換環境的時候，請將以前屏蔽的接口繼續開啓。這時候你須要使用喚起命令行菜單欄的快捷鍵，而後輸入「show request blocking」，就能夠再當前面板進行管理了。

4. 如何評價這個接口性能？

   一般狀況下，前端去評價一個接口的性能更可能是由該接口返回數據時長來判斷，而由此產生的問題就是如何查看接口的對應的時間呢？

   在Network Panel 中有名爲「Waterfall」的一列，你能夠在這裏查看每個接口何時開始請求，何時完成請求的，以及中途的信息，以下圖所示：

   

   咱們能夠看到瀏覽器將整個接口請求到響應分爲幾個階段。理解每一個接口的含義是什麼會幫助咱們更好的評估這個接口的性能如何。

   • Queueing

     瀏覽器將請求都存在發送請求隊列中，發生請求以下：

     • 前者發送的請求優先級較高
     • 對於當前源(origin)已經創建了6個TCP連接，限制了後續請求(僅適用於HTTP/1.0和HTTP/1.1)
     • 瀏覽器在從磁盤緩存中發配空間

   • Stalled

     請求可能由於Queueing中描述的任何緣由進而擱置

   • DNS Lookup

     瀏覽器正在解析請求的IP地址

   • Proxy negotitation

     瀏覽器正在與代理服務器協商請求

   • Request sent

     正在發送請求

   • ServiceWorker Preparation

     瀏覽器正在啓動 service worker

   • Request to ServiceWorker

     請求正在發送給 service worker

   • Waiting (TTFB)

     瀏覽器正在等待響應的第一個字節

     TTFB是Time To First Byte的縮寫

     This timing includes 1 round trip of latency and the time the server took to prepare the response.

     這個時長包括1個往返的延遲和服務器準備響應所用的時間

   • Content Download

     瀏覽器正在接收響應

   • Receiving Push

     瀏覽器接受這個響應的數據，是由HTTP/2服務器推送而來

   • Reading Push

     瀏覽器正在讀取之前接收到的本地數據

   以上是基本的概念，咱們一般看到的瀏覽器Timing下分類的維度是這樣的：

   

   固然你想找一些例子，看看對應分析一下請求的性能能夠查看，以及對應的階段出現問題的解決思路，請查看。

Sources Panel

考驗工程師debug能力了。

1. 如何 breakpoint 任意請求？

   在上圖中，咱們能夠看到有一處「XHR/fetch Breakpoints」功能欄。這裏就能夠添加咱們須要中斷的請求，設置的過濾請求條件能夠根據請求URL上是否含有特定的字符串。

2. 如何 breakpoint 任意代碼任意環境的報錯？

   由於我司主要的技術棧是 Vue，而本身維護的項目中有個別組件寫法是Vue.extend爲主，致使後續會出現異常，但控制檯並不會輸出，因此增添了部分定位問題的困難度。

   而 Chrome DevTool 提供了一個炒雞炒雞好用的功能，就是「 Pause on exceptions 」，只要已開啓這個功能。代碼中出現任何報錯，他都會暫停到對應的錯誤那裏，以及會在對應輸出欄中顯示錯誤的緣由，幫助咱們進行推理。

   一個用來就用學習其餘Debug技巧的功能。

3. 如何在debugger中作到TimeTravel？

   在斷點期間，咱們都是一個階段一個階段的排查對應位置的代碼段。偶爾會發生進入下一個階段的代碼段的時候，忽然意識到上一階段的代碼段存在部分問題，這時候每每咱們都是默默走一遍全流程，感受 DevTool 並無提供咱們一個良好的功能進行TimeTravel。

   直到我發現了Call Stack這一功能欄，這一欄中展現就是代碼段執行上下文環境。而DevTool提供了一個從新回到上個函數執行的功能，就是「Restart Frame」。

   

4. 如何成爲一個issue提問好手？

   一直很好奇別人填寫 issue 的時候，那麼整齊又齊全的 Call Stack 是怎麼來的。難不成是在底層函數打印一個console.trace()嗎？想一想這樣的作法也太蠻煩了，每一次都要打印一次。

   想一想 Call Stack 應該也會提供這樣的功能，而後進行右鍵，果不其然看到了「Copy Stack Trace」的功能，點擊當即複製到粘貼板中。

   

5. 如何減小底層依賴庫的干擾？

   有沒有遇到打斷點，打着打着就打到依賴的底層依賴庫中了。極少可能性問題出如今底層依賴庫，這時候咱們想屏蔽後續斷點今日這個底層依賴庫？

   咱們能夠找到對應的底層依賴腳本文件，而後在內容區域右鍵會出現一個「Blackbox Script」的功能，而後今後斷點不會進入到這個底層依賴腳本了。就像這樣：

6. 如何判斷頁面依賴 JavaScript 到什麼程度？

   若是相差本身頁面若是沒有 JavaScript 的狀況，你能夠調用命令行而後輸入「Disable JavaScript」即可關閉頁面執行JavaScript，而後刷新頁面查看吧。從新恢復的話，只要輸入「Enable JavaScript」。