(2)你真的會用Chrome devtool嗎?

本文首發於個人我的博客: teobler.com

Performance

Performance API

有的時候咱們可能會想測試一下用戶的某一個操做要消耗多少時間，而一般通常人會這麼作：

const start = new Date().getTime();
 // do your work  const end = new Date().getTime(); console.log(end - start); 複製代碼

使用 performance API，咱們能夠這麼作：

performance.mark("start");
 // do your work  performance.mark("end"); performance.measure("your work name", "start", "end");  console.log(performance.getEntriesByType("measure")); 複製代碼

以後在控制檯裏咱們能夠看到這樣的 console 信息

image-20200522145519948

同時在 chrome 的 performance tab 裏面，若是你進行相應的記錄，會產生一個在 User Timing 標題下的可視化的圖表

image-20200522145610966

Networking

network面板

首先老規矩咱們來介紹下面板：

image-20200522145644585

• 中間帶有毫秒數的部分是一個瀑布流，它顯示了該網頁中每個資源加載花費了多長時間，不一樣的顏色標識了不一樣的加載階段
• 下面的表格詳細展現了每個資源的信息

  • 第一欄是該資源的名字
  • 第二欄是該資源的加載情況，也就是網絡請求的狀態碼
  • 第三欄是類型，標識該資源是document / stylesheet / script...
  • 第四欄是該資源的調用者，這裏的index指的就是index.html調用的改資源，將鼠標放在某個資源上而後按住shift，devtool會用綠色爲你標識出該資源的調用者，紅色標識出該資源又調用了哪些其餘的資源
  • 第五欄是大小，可是注意這裏有兩個大小，第一個是該資源的實際大小，第二個是該資源壓縮後的大小，若是該資源來自於cache，這裏就會顯示cache
  • 第六欄是加載該資源花費的時間，一樣對應了壓縮前和壓縮後的時間
  • 最後一欄顯示了該資源的詳細加載的過程

其中最後一欄中有不一樣的顏色，它們表明了不一樣的意義：

• 白色 - 該資源在隊列中，這一般代表:

  • 這個資源被渲染引擎推遲加載以把時間讓給更重要的資源(好比styles和script)，一般圖片的渲染會被延遲
  • 端口被佔用在排隊
  • 瀏覽器的TCP鏈接滿了，因此在排隊(在HTTP1中瀏覽器只能一次同時創建6個鏈接)
  • 建立磁盤緩存所花費的時間也會被標記爲隊列等待
• 灰色 - 阻塞:

  • 你的請求還沒發出去，可能發生在代理查找或是隊列因爲不知道啥緣由阻塞了
  • 與代理服務器鏈接所花費的時間
• 深綠色 - DNS查找: 一般在你訪問一個你歷來沒有訪問過的域時會稍微長些，由於沒有緩存
• 橙色 - 鏈接初始化 / 正在鏈接: 創建鏈接的時間，好比TCP鏈接的三次握手 / 四次揮手
• 深橙色 - SSL鏈接正在創建
• 綠色 - 請求已經發送 / 正在發送 / 等待: 這段時間是請求發送的一瞬間到咱們接收到第一個字節的間隙，若是這段時間不一樣尋常的長的話，一般咱們的服務器網絡配置或者服務器自己有問題，好比一段sql查詢很慢，那麼綠色的這段時間就會很長
• 藍色 - 資源下載: 指的是資源開始下載到下載完成的這一段時間

實例

接下來咱們來看幾個例子，看看這些顏色到底有什麼用:

image-20200522145708160

這張圖很明顯是下載的文件太大了

image-20200522145721320

這張圖後端可能出問題了

image-20200522145734992

這張圖的總耗時並不長，可是能夠看到各類時間都挺長，從DNS查找的時長來看多是第一次訪問一個新的域名，致使全部的鏈接時間都比較長

image-20200522145750029

這張圖代表你一次性下載的資源過多，致使隊列等待時間過長

截圖

在network面板最上方有一個消攝像機的圖標，點擊後刷新頁面devtool會記錄下加載網頁過程當中的每一次重繪的時間點並截圖，你能夠從中看到整個網頁加載的過程，你可使用這個功能來測試你的網站若是在網絡環境比較差的狀況下如何加載的，用戶體驗是否友好等等。

在截圖完成後你能夠雙擊某一個圖片放大，而後使用左右箭頭來預覽不一樣時刻你的網頁加載狀況。

同時你能夠用這個功能來提高一些微小的性能問題，好比加載太多的圖片時如何加載比較好等等。好比你在加載一個比較大的資源的時候若是阻塞了其餘全部資源的加載的話是否能夠考慮將這個資源延遲加載會比較好，否則用戶將沒有辦法看到網頁上的數據。

Auditing

auditing能夠判斷你網頁的一些問題，好比加載時長，SEO，用戶體驗等等。

在auditing面板中google集成了Lighthouse，這是google開發的專門用於分析網頁問題(好比SEO，性能，最佳實踐等等)的一個工具，它的使用很簡單，打開audit面板，進入你想測試的網頁，勾上想要測試的內容，點擊generate report按鈕就能夠了，以後一段時間的分析，Chrome將爲你的網站進行一系列的分析和評分，在有問題的地方還可以給出一些建議，幫助你解決網站的各類問題。

image-20200522145802055

在報告的最上面能夠充看到報告的一個總體狀況，點擊某一個分數後就可以跳轉到相應的板塊，咱們以performance爲例

image-20200522145813872

在圖中咱們能夠看到Chrome認爲有問題的項目就會被標紅，點擊右邊的按鈕能夠獲得更多的信息，而後點擊learn more能夠看到一些google的建議，總的來講這個面板對於提高咱們的網站體驗有着不錯的效果。你能夠經過這個工具更加熟悉你的網站，能夠看到那些地方是還能夠改進的，哪些地方是作的不錯的。

在這裏能夠介紹一個差很少的網站叫作sonarwhal，它的功能也跟devtool裏面的audit相似

Node.js Profiling

在啓動node server的時候若是在命令行中加上--inspect的話，就能夠在Chrome中的console中看到一個Node的logo，點擊後能夠打開node專用的devtool，在這裏你能夠在sources中進行一切操做，同時這裏有一個profile頁面，選中相應的server並點擊start按鈕後，刷新相應的頁面，在刷新完成後再回來點擊stop，這時Chrome會展現在剛剛的一次刷新中你的server作了什麼:

image-20200522145826064

圖中的橫軸是時間，縱軸是此次刷新頁面server端的調用棧。那麼這玩意兒是幹嗎用的呢？profile是爲了可以讓開發者直觀地看到本身的Node server端的一些調用狀況，在出問題時能夠立刻看到一個調用消耗的時間很長，那麼就能夠定位到代碼中，看是否是相關的調用發生了不可預知的錯誤，及時修正。在這個profile中點擊相應的function將直接跳轉到相應的source code。

---

若是你喜歡個人文章，請幫我點個贊，還能夠關注個人公衆號

本文使用 mdnice 排版