客戶投訴不斷，本地卻無法重現？

頁面加載較慢是用戶經常會反饋的問題，也是前端非常關注的問題之一。但定位、排查解決這類問題就通常會花費非常多的時間，主要原因如下：

頁面是在用戶端的瀏覽器上加載執行，復現困難

頁面上線前，開發同學都會進行測試，在測試環境下頁面加載一般都是正常的才會正式上線。用戶在訪問頁面時，頁面的加載是在用戶端的瀏覽器上進行的，由于頁面的加載耗時與地域、網絡情況、瀏覽器或者運營商等有關系，想知道用戶在訪問頁面時的具體情況，復現是非常困難的。

監控信息缺少，導致無法深入排查

大部分前端監控會通過PerformanceTiming對象，獲取完整的頁面加載耗時信息，但這類監控就缺失了頁面靜態資源的加載情況，無法直接復現現場，從而無法深入定位性能瓶頸。

為了方便用戶更快地定位性能瓶頸，阿里云ARMS前端監控推出一新功能:?會話追蹤，提供頁面靜態資源加載的性能瀑布圖，根據頁面性能數據可深入定位頁面資源加載情況。

如何通過會話追蹤幫助你快速定位問題

在阿里云ARMS前端監控SDK上將sendResource配置為true，重新部署應用后，在頁面onload時會上報當前頁面加載的靜態資源信息。從而在阿里云前端監控平臺即可以對慢頁面加載問題快速進行定位。

SDK配置

在阿里云ARMS前端監控SDK部分，默認是不上報頁面加載的靜態資源信息的，如果想獲取頁面加載的靜態資源信息，只需在SDK的config部分將sendResource配置為true，重新部署后，就可以上報相關信息。具體配置如下：

<script> !(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"atc889zkcf@8cc3f63543da641",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true}; with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d) })(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl"); </script>

注意：靜態資源加載信息的上報是在頁面onload時會觸發，上報信息量較大，如果對于頁面性能要求很高的應用，可以不開啟該配置。

問題排查過程

1. 發現問題

進入訪問速度菜單后，發現頁面的性能較差，11點鐘的頁面完全加載時間達到35s，如下：

2. 慢頁面會話追蹤

在慢頁面會話追蹤模塊，提供該頁面在指定時間段內加載較慢的TOP20，這樣可以快速發現哪些會話加載較慢，如下圖所示。
在該模塊，你可以快速發現在11點鐘有一次會話的頁面加載時間在36.72s，這次訪問應該是直接導致頁面加載時間詳情中折線圖突然暴增的原因了。

其中在在模塊有7次會話訪問的頁面加載時間在7s以上，點擊對應的頁面，可以直接進入到會話詳情頁面，從而直觀查看頁面靜態資源加載的瀑布圖。

通過頁面資源加載的瀑布圖，可以快速定位到資源加載的性能瓶頸，同時可以查看本次訪問的客戶端IP地址、瀏覽器、操作系統等UA信息，從而進一步確認是由于網絡原因還是其他原因導致的，針對性進行相應的優化。

3. 其他發現問題入口

會話追蹤

也可以進入“會話追蹤”菜單，可以看到該應用下的會話列表。會話列表中會根據頁面完全加載時間排序，展示TOP100，幫助用戶可以快速發現耗時較長的會話信息。同時支持按照頁面、會話Id、瀏覽器、瀏覽器版本號進行過濾，展示相關的會話信息。點擊操作后，是該會話的頁面資源加載詳情。

訪問明細

如果當前會話列表中無法找到你要排查的會話信息，可以通過訪問明細查找到相應的日志詳細信息，在param中找到對應的sid即會話Id，然后在會話列表中查找相應的會話Id，即可以定位到想排查的會話信息。

例如：在已知用戶的客戶端IP的情況下，想定位相應的會話信息，即可以在訪問明細中，通過t=res and 117.136.32.110?進行搜索，找到對應的會話Id。

根據查找到的會話Id, 就可以在會話列表中進行過濾，定位到具體的會話內容。

使用入口指南

進入訪問速度菜單，如果發現頁面性能較差，可以在"慢頁面會話追蹤Top20"中查看訪問較慢的會話情況

• 點擊詳情后，可以查看具體的頁面資源加載瀑布圖
• 如果Top20不滿足，可以點擊"更多"，從而進入"會話列表"

進入會話追蹤菜單，展示的是TOP100的會話列表信息，根據頁面完全加載時間從高到底排序，排查頁面資源加載情況

至此，慢頁面會話追蹤功能及使用方法介紹完成。該功能可以幫助你復現用戶在訪問頁面時的頁面資源加載情況，快速定位性能瓶頸問題。

?

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的如何使用阿里云ARMS轻松重现用户浏览器问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。