chrome調試工具高級不完整使用指南(優化篇)


上一篇文章我們說了chrome調試工具的一些比較基礎功能的用法,接下來我們要在這一篇文章中說一說,其他一些chrome調試工具的使用方法

2.2 優化模塊介紹

2.2.1 Network模塊

 

在netWork模塊中,大致上可以分成四塊模塊,

1- 這個模塊相當於是一個功能菜單,左邊的四個按鈕依次表示的是:

1-1 停止捕獲請求

1-2 清除所有的請求

1-3 對請求進行快照

1-4 是否開啟過濾選項,也就是是否開啟圖中的2

除此之外里面的Disable Cache是用來請求請求緩存,Preserve log 用來保存請求記錄  offine斷網,其他的具體使用與分析會在后面的課程中講解

 

2- 這個模塊主要是用來過濾請求的類型的

 

3- 這個的功能是相當於查看各個請求的發送時間,完成時間的一個總的概況,主要是用來全局分析用的

 

4- 查看里面的各個請求的具體情況

 

2.2.2  Performance模塊

 

 上面的這樣圖是博客園的首頁的一張圖片

根據博主的經驗我們重點要看的就是第一和第二,然后其他部分博主一般也沒有使用到,具體用法不詳,知道的同學請在留言中補充一下

1- 功能菜單模塊

主要要講解一下前5個按鈕功能,

1-1 用於觸發監控頁面,從而輸出性能分析圖

1-2 重新刷新請求性能分析

1-3 清除所有的分析信息

1-4 上傳分析報告圖

1-5 下載分析報告圖

 

2- 這一部分主要涉及到火焰圖的分析,具體可以賺到阮一峰大大的相關博文

 

2.2.3 Memory模塊

這個模塊是用來對內存占用情況進行分析的。其中里面有3個小的功能

 圖中上面的1-3分別代表的功能是:

1- 內存堆棧快照 這個功能主要是用來查看當前(沒有被垃圾回收機制回收的)的各項資源的占用情況與內存的一個比例。

2- 用於動態監控從start啟動之后內存的一個占用情況

3- 通過一個時間軸圖來動態監控占用情況,這個相比於2的一個好處是可以動態的監控不需要手動控制,另外一個就是可以通過圖的形式直觀地顯示

 

2.2.4 Security 模塊

這個模塊主要是用來判斷當前頁面中是否使用了有效的HTTPS證書,不起到其他的作用

 

2.2.5 audits模塊

這個模塊主要是chrome提供的用來自動分析頁面的情況的,但是由於這個需要翻牆所以推薦大家使用舊的版本Legacy audits來進行分析頁面

開啟方式如下:

使用Ctrl+Shift+P 激活面板,激活之后就會開啟里面內置的一些隱藏模塊

具體的一些性能優化提示自己看看英文的內容,不懂英文請百度

好的,所有的模塊大致上面已經說了一遍了,接下來的內容就是開始說說怎樣在實際應用中使用這些特性。

 

 chrome調試工具高級不完整使用指南(基礎篇)

 chrome調試工具高級不完整使用指南(優化篇)

 chrome調試工具高級不完整使用指南(實戰一)

 chrome調試工具高級不完整使用指南(實戰二)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM