DEV Community

Cover image for Cara Impor File HAR ke Apidog: Ubah Traffic Jadi Endpoint
Walse
Walse

Posted on • Originally published at apidog.com

Cara Impor File HAR ke Apidog: Ubah Traffic Jadi Endpoint

Anda melihat aplikasi membuat permintaan di browser dan responsnya muncul di tab Network. Langkah berikutnya adalah mengubah traffic tersebut menjadi endpoint terdokumentasi yang dapat disimpan, disimulasikan, dan diuji—tanpa mengetik ulang URL, header, atau body JSON secara manual.

Coba Apidog hari ini

File HAR menjembatani traffic yang bisa dilihat dengan endpoint yang bisa digunakan ulang. Browser merekam permintaan dan respons selama sesi berjalan; ekspor rekaman tersebut, lalu impor ke Apidog untuk mengubah panggilan yang terekam menjadi endpoint di proyek Anda. Untuk konteks lebih luas, lihat panduan alat penangkap paket dengan Apidog.

Anda dapat mengunduh Apidog secara gratis dan mengikuti langkah-langkah berikut.

Apa itu file HAR dan mengapa traffic yang terekam perlu disimpan

HAR adalah singkatan dari HTTP Archive. File .har berformat JSON dan mencatat interaksi browser dengan situs, termasuk permintaan, respons, header, body, serta data waktu.

Secara praktis, HAR adalah transkrip sesi browser. Karena formatnya JSON, file ini dapat dibagikan untuk laporan bug, dianalisis, atau diimpor ke tool API.

Mengimpor HAR memberi Anda titik awal berbasis traffic nyata:

  • Bentuk permintaan aktual: URL, query parameter, header, dan body yang benar-benar dikirim aplikasi.
  • Respons aktual: status code dan payload yang dapat digunakan sebagai contoh, mock, atau asersi pengujian.
  • Dokumentasi awal: endpoint internal yang belum terdokumentasi dapat diubah menjadi koleksi endpoint yang bisa diberi nama dan anotasi.

Alur ini berguna ketika Anda mewarisi layanan tanpa spesifikasi OpenAPI, ingin memahami komunikasi widget pihak ketiga dengan backend, atau perlu mereproduksi bug menggunakan permintaan yang sama persis.

Langkah 1: Rekam HAR di DevTools browser

Perekaman dilakukan di browser, bukan di Apidog. Chrome dan Edge menggunakan alur DevTools yang serupa.

Misalnya, Anda ingin merekam traffic pada halaman riwayat pesanan.

  1. Buka halaman yang ingin direkam. Login terlebih dahulu jika API membutuhkan sesi autentikasi.
  2. Buka Developer Tools:
    • Windows/Linux: F12 atau Ctrl+Shift+I
    • macOS: Cmd+Opt+I
  3. Buka tab Network.
  4. Refresh halaman atau lakukan aksi yang ingin direkam.
    • Contoh: membuka riwayat pesanan dapat memanggil /api/orders, /api/orders/{id}, dan endpoint terkait lainnya.
  5. Klik kanan pada salah satu request, lalu pilih Save all as HAR with content.
  6. Simpan file, misalnya order-history.har.

Untuk detail menu dan alur ekspor, lihat dokumentasi Chrome DevTools Network.

Gunakan opsi with content. Opsi ini menyertakan body respons. Tanpanya, hasil impor dapat memiliki detail request tetapi tidak memiliki contoh respons.

Sebelum melanjutkan, Anda dapat membuka file .har di editor teks. File tersebut berisi JSON dengan array entries; setiap entri biasanya memiliki objek request dan response.

Perlu diingat: HAR juga merekam aset halaman seperti gambar, stylesheet, dan JavaScript. Anda tidak perlu memfilter semuanya di browser karena Apidog menyediakan opsi untuk mengecualikan sumber daya statis saat impor.

Langkah 2: Impor HAR ke Apidog

Setelah file HAR tersimpan:

  1. Buka proyek di Apidog.
  2. Masuk ke Settings > Import Data > Manual.
  3. Pilih format HAR.
  4. Unggah file .har, misalnya order-history.har.

Sebelum mengonfirmasi impor, atur tiga opsi berikut.

Opsi 1: Penanganan BaseURL

Setiap request HAR memiliki URL lengkap, misalnya:

https://api.shop.example.com/v1/orders/123
Enter fullscreen mode Exit fullscreen mode

Apidog menyediakan dua pilihan:

  • Hardcode: mempertahankan BaseURL di setiap endpoint.
  • Hapus (Direkomendasikan): menghapus BaseURL sehingga path menjadi:
/v1/orders/123
Enter fullscreen mode Exit fullscreen mode

Pilih Hapus pada sebagian besar kasus. BaseURL kemudian dapat dikelola secara global melalui variabel lingkungan.

Dengan pendekatan ini, endpoint yang sama dapat diarahkan ke production, staging, atau local environment tanpa mengubah path endpoint.

Opsi 2: Kecualikan sumber daya statis

Aktifkan Sumber Daya Statis > Kecualikan.

Opsi ini mengabaikan file seperti:

  • gambar
  • CSS
  • JavaScript
  • aset halaman lain yang bukan endpoint API

Tanpa filter ini, satu page load dapat menghasilkan puluhan endpoint yang tidak relevan, misalnya logo.png atau bundle JavaScript. Dengan filter aktif, hasil impor lebih fokus pada request API seperti /api/orders.

Opsi 3: Buat kasus uji untuk setiap endpoint

Aktifkan Pembuatan Kasus Endpoint jika Anda ingin Apidog membuat kasus uji default untuk setiap endpoint hasil impor.

Kasus uji ini menyimpan invokasi endpoint beserta nilai yang terekam. Aktifkan opsi ini jika Anda ingin segera menjalankan atau mengembangkan pengujian dari hasil capture. Jika fokus Anda hanya dokumentasi, opsi ini dapat dimatikan dan kasus uji ditambahkan nanti.

Setelah konfigurasi selesai, konfirmasi impor. Apidog akan membaca file HAR dan membuat endpoint di proyek Anda.

Contoh endpoint hasil impor:

GET /v1/orders/123
Host: api.shop.example.com
Authorization: Bearer <token-from-capture>
Accept: application/json
Enter fullscreen mode Exit fullscreen mode

Contoh respons yang ikut terekam:

{
  "id": 123,
  "status": "shipped",
  "total": 48.5,
  "currency": "USD",
  "items": [
    { "sku": "TSHIRT-BLK-M", "qty": 2, "price": 19.25 }
  ],
  "createdAt": "2026-07-14T09:31:00Z"
}
Enter fullscreen mode Exit fullscreen mode

Respons nyata seperti ini dapat digunakan sebagai dasar simulasi atau asersi pengujian.

Langkah 3: Bersihkan endpoint hasil impor

Impor HAR adalah titik awal, bukan definisi API final. Luangkan waktu untuk merapikan hasilnya.

  • Hapus request yang tidak relevan

    Meski sumber daya statis sudah dikecualikan, Anda mungkin masih menemukan analytics ping, health check, atau request pihak ketiga. Hapus yang tidak dibutuhkan.

  • Ganti nama dan kelompokkan endpoint

    Path mentah seperti /v1/orders/123 memang berfungsi, tetapi kurang jelas. Ubah namanya menjadi, misalnya, Dapatkan pesanan berdasarkan ID, lalu kelompokkan endpoint ke folder yang sesuai.

  • Ubah nilai literal menjadi parameter path

    Request hasil capture:

  /v1/orders/123
Enter fullscreen mode Exit fullscreen mode

sebaiknya diubah menjadi:

  /v1/orders/{orderId}
Enter fullscreen mode Exit fullscreen mode

Dengan begitu, endpoint dapat digunakan ulang untuk ID pesanan lain.

  • Pindahkan rahasia ke environment variable

    HAR dapat membawa bearer token, cookie, dan header autentikasi aktif. Sebelum membagikan proyek, pindahkan nilai tersebut ke variabel lingkungan dan hapus kredensial dari contoh request. Prinsip ini sejalan dengan panduan Stripe tentang pengelolaan API key.

  • Periksa body request dan response

    Jika body kosong padahal seharusnya ada, kemungkinan file diekspor tanpa opsi Save all as HAR with content. Rekam ulang dan impor kembali.

Setelah dibersihkan, endpoint hasil impor dapat didokumentasikan, disimulasikan, dan diuji seperti endpoint lain di Apidog. Lanjutkan dengan panduan menulis skenario pengujian di Apidog atau cara menghasilkan kode klien dengan Apidog.

Variasi dan batasan

Belum ada perekam endpoint otomatis

Apidog tidak berjalan sebagai proxy yang merekam traffic browser secara langsung. Alur yang didukung adalah:

  1. Rekam traffic dengan DevTools browser.
  2. Ekspor file HAR.
  3. Impor HAR ke Apidog.
  4. Rapikan endpoint dan buat skenario pengujian bila diperlukan.

Jadi, prosesnya adalah perekaman manual di browser yang diikuti impor, bukan perekaman live otomatis.

Ekstensi Browser Apidog adalah tool yang berbeda

Ekstensi Browser Apidog tidak digunakan untuk merekam HAR. Ekstensi tersebut memungkinkan pengujian dan debugging API dari browser tanpa membuka klien desktop.

Untuk merekam traffic yang akan diimpor, tetap gunakan DevTools dan ekspor HAR.

Saat menggunakan ekstensi browser untuk testing, browser dapat membatasi header tertentu seperti Cookie, Host, Origin, dan Content-Length. Browser juga tidak mengirim body pada request GET atau HEAD, serta tidak dapat menjangkau kode atau database lokal di balik mesin Anda. Untuk kebutuhan debugging dengan kontrol header lebih penuh, gunakan Klien Desktop Apidog.

Format lain juga dapat diimpor

Layar Settings > Import Data > Manual juga mendukung format lain seperti OpenAPI, Swagger, Postman, WSDL, dan Insomnia.

Jika Anda sudah memiliki spesifikasi OpenAPI atau Swagger, impor spesifikasi biasanya menghasilkan endpoint yang lebih rapi daripada capture HAR. Lihat panduan berikut:

Gunakan HAR saat spesifikasi tidak tersedia dan traffic browser adalah sumber informasi terbaik yang Anda miliki.

Otomatiskan impor dengan Apidog CLI

Untuk workflow berbasis skrip atau pipeline, Anda tidak harus mengimpor HAR melalui GUI. Apidog CLI menyediakan perintah import untuk membaca HAR secara langsung.

npm install -g apidog-cli
apidog login --with-token <YOUR_ACCESS_TOKEN>

# Turn a captured HAR into endpoints in your project
apidog import --project <PROJECT_ID> --format har --file ./capture.har
Enter fullscreen mode Exit fullscreen mode

Flag --format juga mendukung openapi, postman, wsdl, insomnia, dan format lainnya.

Setelah endpoint disimpan sebagai skenario pengujian, jalankan skenario tersebut di CI tanpa antarmuka grafis:

apidog run --access-token $APIDOG_ACCESS_TOKEN \
  -t <SCENARIO_ID> -e <ENV_ID> -r cli
Enter fullscreen mode Exit fullscreen mode

Keterangan:

  • -t: ID skenario pengujian
  • -e: ID environment
  • -r cli: output reporter di terminal

Untuk menyusun pengujian, gunakan panduan skenario pengujian Apidog, lalu integrasikan ke pipeline melalui panduan Apidog CLI CI/CD.

FAQ

Browser apa yang dapat mengekspor file HAR?

Browser berbasis Chromium seperti Chrome dan Edge mendukung ekspor HAR dari tab Network melalui menu Save all as HAR with content. Browser lain dapat memiliki label menu yang berbeda.

Mengapa daftar endpoint hasil impor sangat besar?

Kemungkinan sumber daya statis ikut diimpor. Impor ulang file HAR dengan opsi Sumber Daya Statis diatur ke Kecualikan, lalu hapus request sisa yang tidak relevan.

Haruskah memilih Hardcode atau Hapus untuk BaseURL?

Pilih Hapus (Direkomendasikan) pada hampir semua kasus. Dengan opsi ini, BaseURL dikelola melalui environment variable sehingga endpoint dapat digunakan di production, staging, maupun local environment tanpa mengedit path. Pendekatan yang sama digunakan oleh skenario pengujian Apidog.

Apakah HAR menyertakan token autentikasi?

Ya. HAR merekam header aktual selama sesi browser, termasuk bearer token atau cookie aktif. Perlakukan file HAR sebagai data sensitif: jangan unggah ke issue publik, dan pindahkan kredensial ke environment variable setelah impor.

Bisakah HAR diimpor dari command line?

Ya. Gunakan:

apidog import --project <id> --format har --file <path>
Enter fullscreen mode Exit fullscreen mode

CLI cocok untuk impor berbasis skrip, server, pipeline CI, atau workflow agen. GUI tetap berguna saat Anda ingin mengatur BaseURL dan filter sumber daya statis secara interaktif. Setelah impor, gunakan apidog run untuk menjalankan ulang skenario pengujian.

Ringkasan

File HAR mengubah traffic browser menjadi endpoint API yang dapat digunakan ulang.

Alur implementasinya:

  1. Rekam traffic di DevTools.
  2. Pilih Save all as HAR with content.
  3. Impor melalui Settings > Import Data > Manual.
  4. Pilih Hapus untuk BaseURL.
  5. Atur Sumber Daya Statis ke Kecualikan.
  6. Ganti nama endpoint, parameterkan path, dan hapus rahasia.
  7. Dokumentasikan, simulasikan, atau uji endpoint hasil impor.

Siap mengubah capture browser menjadi endpoint nyata? Unduh Apidog dan coba gratis tanpa kartu kredit.

Top comments (0)