HAR İle Dosya İsteklerinin Derlenmesi ve Analizi

Görüntülenen bir web sayfası yüklenme sürecinde gerçekleştirilen istekleri (GET, POST, vb.) ve istekler neticesinde iletilen ve/veya dönen yanıtları Network aracılığı ile izleyebilmekteyiz.

İlgili istekleri genel olarak ya da belirli bir formata göre listeleyerek ilgili alan üzerine sağ tıkladığımızda karşımıza Save all as HAR with content seçeneği çıkar. Bu seçenek sayesinde ilgili istekler HAR formatında (*.har) bilgisayarımıza indirilebilmektedir. Aşağıda JS isteklerini içeren örnek bir HAR içeriği yer almaktadır.

Peki, HAR nedir?

HTTP Archive (HAR) Formatı

HTTP Archive (HAR), bir web tarayıcısının bir siteyle etkileşiminin günlüğe (logging) JSON biçiminde arşivlenerek kaydedilmesi sonucu oluşan bir dosya formatıdır. Bu arşiv ilgili isteklerle ilgili ayrıntılı performans verilerini (header, metadata, cookies, form data, vs.) içerir ve bu bilgiler dışa aktarılabilir^{1 2 3}.

Bu biçim, World Wide Web Konsorsiyumu'nun (W3C) Web Performansı Çalışma Grubu tarafından üretilmiştir ancak hiçbir zaman yayınlanmamıştır¹.

Aşağıda JS isteklerini içeren örnek bir HAR arşiv içeriği yer almaktadır.

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [],
    "entries": [
      {
        "_initiator": {
          "type": "script",
          "stack": {
            "callFrames": [
              {
                "functionName": "send",
                "scriptId": "65",
                "url": "https://script.bugpilot.io/d1d055a0-ece1-4f91-9ac1-9ae73f43df0d/adopto.js",
                "lineNumber": 572,
                "columnNumber": 665
              },
              {
                "functionName": "Ta",
                "scriptId": "164",
                "url": "https://www.clarity.ms/s/0.7.7/clarity.js",
                "lineNumber": 1,
                "columnNumber": 40543
              },
              {
                "functionName": "",
                "scriptId": "164",
                "url": "https://www.clarity.ms/s/0.7.7/clarity.js",
                "lineNumber": 1,
                "columnNumber": 39956
              },
              {
                "functionName": "",
                "scriptId": "164",
                "url": "https://www.clarity.ms/s/0.7.7/clarity.js",
                "lineNumber": 1,
                "columnNumber": 7773
              },
              {
                "functionName": "",
                "scriptId": "164",
                "url": "https://www.clarity.ms/s/0.7.7/clarity.js",
                "lineNumber": 1,
                "columnNumber": 7878
              },
              {
                "functionName": "o",
                "scriptId": "164",
                "url": "https://www.clarity.ms/s/0.7.7/clarity.js",
                "lineNumber": 1,
                "columnNumber": 6595
              }
            ]
          }
        }
      }],
      // ...
  }
}

HAR dosyaları çeşitli araçlar aracılığı ile görüntülenebileceği^{4 5} gibi ilgili dosyaların (web sitesinin görüntülendiği süreçte gerçekleşen tüm etkileşimleri içerecek şekilde) indirilmesi için de kullanılabilmektedir^{6 7 8}.

Github. "swiss-army-scripts". altında yayınladığım har-js-analyzer/js-file-downloader.py ile bir HAR dosyasında yer alan (örnek dosya bu işlemi JS formatlı dosyalar için gerçekleştirmekte) dosyaların indirilmesi sağlanabilmekte. har-js-analyzer/js-analyzer.py ile ise ilgili HAR içeriği için temel bir analiz gerçekleştirilebilmekte.

Temel HAR Analiz İşlemi

Örnek kod parçacığı JS dosyalarına ait istekleri içermekte ve analiz işlemi de yine bu dosyalar bağlamında gerçekleştirilmekte. Elbette dosya formatı değiştirilebileceği için format seçeneği kaldırılarak ilgili işlemler tüm istekler için gerçekleştirilebilir.

...

import json
from haralyzer import HarParser, HarPage

with open('har_data.har', 'r') as f:
    har_parser = HarParser(json.loads(f.read()))

print har_parser.browser
# {u'name': u'Firefox', u'version': u'25.0.1'}

print har_parser.hostname
# 'humanssuck.net'

for page in har_parser.pages:
    assert isinstance(page, HarPage, None)
    # returns True for each

har-image-analyzer.py dosyasında yer alan Python kod parçacığı ile entry sayısı, entry kapsamındaki sütunlar, isteklerle ilgili özet (min, max, mean, vb.) bilgiler, görsellerin isim ve boyutları gibi bilgilere ulaşabilir, görselleri gruplandırabilir ve toplam yüklenme sürelerini karşılaştırabilirsiniz.

• Entry sayısı 38
• Görsel isteği sayısı: 18