上一篇文章我們說了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 激活面板,激活之后就會開啟里面內置的一些隱藏模塊

具體的一些性能優化提示自己看看英文的內容,不懂英文請百度
好的,所有的模塊大致上面已經說了一遍了,接下來的內容就是開始說說怎樣在實際應用中使用這些特性。
