Har文件解析工具

一、安卓手機如何打開har文件

Har文件是JSON格式文件，可以使用任何文本編輯器打開。然而在安卓手機上打開har文件時，可以使用以下兩種方式：

1、使用「文本編輯器」等第三方軟件打開。在手機上安裝一個支持查看代碼的App，如，文本編輯器、QuickEdit、OfficeSuite等。可以通過從手機端的存儲空間直接訪問har文件，打開後，可以看到JSON代碼格式的文件。

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(filePath));
intent.setDataAndType(Uri.fromFile(new File(filePath)), "text/plain");
try {
    context.startActivity(intent);
} catch (ActivityNotFoundException e) {
    Toast.makeText(context, "No handler for this type of file.", Toast.LENGTH_SHORT).show();
}

2、使用HarViewer。該應用是一款專門查看har文件的應用，用戶可以方便的導入har文件，並可以將其進行解析。使用該應用可以直觀的查看har文件的內容和性能數據。

二、Har文件解析工具的相關功能

Har文件解析工具主要用於解析har文件，提取其中的性能數據和網絡請求數據，可以獲取以下信息：

1. 性能數據

可以獲取頁面加載的性能數據，如總下載時間、DOM加載時間、頁面渲染時間等。可以幫助開發者定位並優化頁面性能瓶頸。

function getPerformanceTiming () {
    var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
    var timing = performance.timing || {};

    function getTimeStamp (name) {
        return timing[name] ? timing[name] - timing.navigationStart : '';
    }

    var tpl = [];
    tpl.push('Redirect time: ' + getTimeStamp('redirectEnd'));
    tpl.push('DNS query time: ' + getTimeStamp('domainLookupEnd'));
    tpl.push('TCP handshake time: ' + getTimeStamp('connectEnd'));
    tpl.push('Time to first byte: ' + getTimeStamp('responseStart'));
    tpl.push('Content loading time: ' + getTimeStamp('responseEnd'));
    tpl.push('DOM parsing time: ' + getTimeStamp('domComplete'));
    tpl.push('Page rendering time: ' + getTimeStamp('loadEventEnd'));
    tpl.push('Total load time: ' + (timing.loadEventEnd - timing.navigationStart) + 'ms');

    return tpl.join('\n');
}

2. 網絡請求數據

可以獲取網絡請求的相關信息，如請求URL、請求方法、請求參數、響應時間、狀態碼、響應頭等。可以幫助開發者找到網絡請求出現的問題，並優化接口的性能。

var entries = log.entries;
for (var i = 0, len = entries.length; i < len; i++) {
    var entry = entries[i];
    var request = entry.request;
    var response = entry.response;

    var url = request.url || '';
    var method = request.method || '';
    var params = request.postData ? JSON.parse(request.postData.text) : {};
    var status = response.status || '';
    var responseTime = entry.time;
    var responseHeaders = response.headers || [];

    console.log('URL:', url);
    console.log('Method:', method);
    console.log('Params:', params);
    console.log('Status:', status);
    console.log('Response Time:', responseTime + 'ms');
    console.log('Response Headers:', responseHeaders);
}

三、Har文件解析工具的使用場景

Har文件解析工具適用於以下幾個方面的場景：

1. 頁面性能優化

通過解析頁面的性能數據，開發者可以判斷頁面的性能是否達標，找到性能瓶頸並進行優化。同時也可以對比不同頁面的性能數據，看看哪些頁面需要進一步優化。

2. 接口性能優化

通過解析請求數據，可以分析接口的性能表現，發現問題並進行優化。

3. 接口調試

通過解析請求數據，可以查看接口的請求參數和響應數據，方便開發者對接口進行調試和排查問題。

4. 接口復盤

通過保存接口請求和響應數據到har文件中，以備後續查看和復盤。該方法可以在接口出現異常的時候，將問題數據保存下來作為參考，以便排查問題。

四、Har文件解析工具的其他使用技巧

除了以上的基本使用之外，Har文件解析工具還有以下幾個技巧：

1. 結合Chrome DevTools進行網絡請求抓包

通過Chrome的DevTools工具，可以方便的抓取當前頁面的網絡請求，並將其保存為har文件，再用Har文件解析工具進行解析和分析。

2. 結合Postman使用

在Postman中發送請求時，可以保存請求和響應數據到har文件中，使用Har文件解析工具可以解析和分析該文件，方便開發者查看請求和響應數據。

3. 使用Charles抓包

使用Charles等抓包工具抓取網絡請求時，可以將抓取到的數據保存為har文件，再使用Har文件解析工具分析和查看數據。

4. 結合其他前端性能分析工具使用

可以將Har文件導入到其他性能分析工具中，如Webpage Test、Google PageSpeed等，以獲得更為精細的分析結果。