วิธีอิมพอร์ตไฟล์ HAR เข้า Apidog (แปลงทราฟฟิกที่บันทึกเป็น API Endpoints)

คุณเห็นคำขอจากแอปในแท็บ Network ของเบราว์เซอร์และต้องการเปลี่ยนมันให้เป็น API Endpoint ที่นำกลับมาใช้ซ้ำได้—พร้อมเอกสาร, mock และการทดสอบ—โดยไม่ต้องคัดลอก URL, headers และ JSON body ด้วยมือ

ลองใช้ Apidog วันนี้

ไฟล์ HAR คือสะพานเชื่อมระหว่างทราฟฟิกที่จับได้กับ Endpoint ที่จัดการได้จริง: ส่งออก HAR จาก DevTools แล้วนำเข้าใน Apidog เพื่อแปลงแต่ละ request ที่บันทึกไว้เป็น Endpoint ในโปรเจกต์ของคุณ สำหรับภาพรวมเรื่องการจับทราฟฟิก ดูคู่มือ เครื่องมือจับแพ็กเก็ตด้วย Apidog

คุณสามารถดาวน์โหลด Apidog ได้ฟรีเพื่อทำตามขั้นตอนนี้

ไฟล์ HAR คืออะไร

HAR ย่อมาจาก HTTP Archive เป็นไฟล์ .har ในรูปแบบ JSON สำหรับบันทึกการโต้ตอบระหว่างเบราว์เซอร์กับเว็บไซต์ เช่น request, response, headers, payload และเวลาในการทำงาน

สำหรับนักพัฒนา HAR คือหลักฐานว่า API ทำงานอย่างไรในสถานการณ์จริง ไม่ใช่เพียงตามสเปก เมื่อแปลง HAR เป็น Endpoint คุณจะได้:

• รูปแบบ request จริง — URL, query parameters, headers และ body ที่แอปส่งจริง
• response จริง — status code และ payload ที่เซิร์ฟเวอร์ตอบกลับ
• จุดเริ่มต้นของเอกสาร — โดยเฉพาะ API ภายในที่ไม่มีเอกสารหรือไม่มี OpenAPI spec

แนวทางนี้มีประโยชน์เมื่อคุณต้องวิเคราะห์บริการที่ไม่มีสเปก, ตรวจสอบการสื่อสารของวิดเจ็ตภายนอก หรือทำซ้ำบั๊กจาก request ที่เกิดปัญหาจริง

ขั้นตอนที่ 1: ส่งออก HAR จาก Chrome หรือ Edge DevTools

ตัวอย่างนี้จะจับทราฟฟิกของหน้าประวัติคำสั่งซื้อ

1. เปิดหน้าที่ต้องการบันทึก และเข้าสู่ระบบก่อนหาก API ต้องใช้ session
2. เปิด DevTools:
   • Windows/Linux: F12 หรือ Ctrl+Shift+I
   • macOS: Cmd+Opt+I
3. เปิดแท็บ Network
4. รีเฟรชหน้า หรือทำ action ที่ต้องการจับ เช่น เปิดหน้าประวัติคำสั่งซื้อ
5. คลิกขวาที่ request ใดก็ได้ แล้วเลือก Save all as HAR with content
6. บันทึกไฟล์ เช่น order-history.har

หากต้องการรายละเอียดเพิ่มเติมเกี่ยวกับการส่งออก HAR โปรดดูเอกสาร Network ของ Chrome DevTools

ต้องเลือก with content เสมอ เพราะตัวเลือกนี้จะรวม response body ไปด้วย หากไม่มี response content Endpoint ที่นำเข้าจะมีเพียง request แต่ไม่มีตัวอย่าง response สำหรับ mock หรือทดสอบ

ตรวจสอบไฟล์ได้อย่างรวดเร็วด้วยการเปิด .har ใน text editor คุณจะเห็น JSON ที่มีอาร์เรย์ entries โดยแต่ละรายการประกอบด้วย request และ response

HAR มักมี request ของรูปภาพ, CSS และ JavaScript ปะปนอยู่ด้วย ไม่ต้องกรองเองในเบราว์เซอร์ เพราะคุณจะเลือกไม่ให้นำเข้าทรัพยากรเหล่านี้ได้ในขั้นตอนถัดไป

ขั้นตอนที่ 2: นำเข้า HAR ใน Apidog

1. เปิดโปรเจกต์ใน Apidog
2. ไปที่ Settings > Import Data > Manual
3. เลือกฟอร์แมต HAR
4. อัปโหลดไฟล์ เช่น order-history.har

ก่อนยืนยันการนำเข้า ให้ตั้งค่าตัวเลือกเหล่านี้

1. ตั้งค่า BaseURL เป็น Remove

HAR จะเก็บ URL เต็ม เช่น:

https://api.shop.example.com/v1/orders/123

Apidog มีสองวิธีจัดการ BaseURL:

• Hardcode — เก็บ URL โฮสต์ไว้ใน Endpoint ทุกตัว
• Remove (แนะนำ) — เหลือเฉพาะ path เช่น /v1/orders/123 แล้วจัดการโฮสต์ด้วย environment variables

เลือก Remove ในกรณีส่วนใหญ่ วิธีนี้ช่วยให้ Endpoint เดิมทำงานกับ Production, Staging และ Local ได้ด้วยการสลับ environment แทนการแก้ไขทุก Endpoint ดูแนวทางการจัดการเอกสารและ environment เพิ่มเติมในคู่มือย้ายเอกสาร Swagger API ไปยัง Apidog

2. ตั้งค่า Static Resource เป็น Exclude

ตั้งค่า Static Resource เป็น Exclude เพื่อไม่ให้นำเข้าไฟล์ที่ไม่ใช่ API เช่น:

• รูปภาพ
• CSS
• JavaScript
• asset อื่นของหน้าเว็บ

ผลลัพธ์จะเหลือเฉพาะ request API ที่เกี่ยวข้อง เช่น /api/orders แทนที่จะมี logo.png หรือ bundle JavaScript หลายสิบรายการ

3. เปิด Endpoint Case Generation เมื่อต้องการทดสอบ

เปิด Endpoint Case Generation หากคุณต้องการให้ Apidog สร้าง test case เริ่มต้นสำหรับแต่ละ Endpoint ที่นำเข้า

เปิดตัวเลือกนี้เมื่อคุณต้องการ:

• รัน request ที่จับมาได้ทันที
• ใช้ request/response ที่บันทึกไว้เป็นจุดเริ่มต้นของการทดสอบ
• สร้าง test scenario ต่อจาก Endpoint ที่นำเข้า

หากเป้าหมายคือสร้างเอกสารก่อน คุณสามารถปิดตัวเลือกนี้และเพิ่ม test case ภายหลังได้

หลังยืนยันการนำเข้า คุณจะได้ Endpoint ที่สร้างจากทราฟฟิกของเบราว์เซอร์ ตัวอย่าง request:

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

และตัวอย่าง response ที่ HAR บันทึกไว้:

{
  "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"
}

response จริงนี้สามารถใช้เป็นฐานสำหรับ mock และ assertions ของการทดสอบได้

ขั้นตอนที่ 3: ทำความสะอาด Endpoint ที่นำเข้า

HAR เป็นข้อมูลจาก session จริง จึงควรจัดระเบียบก่อนนำไปใช้เป็น API definition ระยะยาว

• ลบ request ที่ไม่เกี่ยวข้อง
  
  แม้จะเลือก Static Resource: Exclude คุณอาจยังเจอ analytics ping, health check หรือ request จาก third-party ลบ Endpoint ที่ไม่ใช่ API ของคุณออก

• เปลี่ยนชื่อและจัดโฟลเดอร์
  
  เปลี่ยนชื่อจาก path ดิบ เช่น /v1/orders/123 เป็นชื่อที่สื่อความหมาย เช่น รับคำสั่งซื้อตาม ID แล้วจัดกลุ่มตาม resource หรือ domain ของ API

• แปลงค่าคงที่เป็น path parameter
  
  หาก HAR บันทึก path นี้:
  

  /v1/orders/123

และ 123 คือ ID ของคำสั่งซื้อ ให้แก้เป็น:

  /v1/orders/{orderId}

การเปลี่ยนนี้ทำให้ Endpoint ที่เคยใช้ได้กับข้อมูลเพียงรายการเดียว กลายเป็น Endpoint ที่นำกลับมาใช้ได้กับทุกคำสั่งซื้อ

• ย้ายข้อมูลลับไป environment variables
  
  HAR สามารถมี bearer token, cookies หรือ credentials ที่ใช้งานจริงได้ ก่อนแชร์โปรเจกต์หรือ commit การเปลี่ยนแปลง ให้ลบข้อมูลลับออกจาก request ตัวอย่างและย้ายไปเก็บใน environment variables แนวทางนี้สอดคล้องกับคำแนะนำของStripe เกี่ยวกับการจัดการ keys

• ตรวจสอบ response body
  
  หาก response ว่าง ทั้งที่ควรมีข้อมูล ให้ส่งออก HAR ใหม่โดยเลือก Save all as HAR with content

หลังทำความสะอาดแล้ว Endpoint จะใช้งานเหมือน Endpoint อื่นใน Apidog: ทำเอกสาร, สร้าง mock และเขียนการทดสอบได้ทันที อ่านต่อได้ที่คู่มือการเขียนสถานการณ์ทดสอบใน Apidog หรือการสร้างโค้ดไคลเอ็นต์ด้วย Apidog

ข้อจำกัดและกรณีที่ควรรู้

Apidog ยังไม่มีตัวบันทึก Endpoint อัตโนมัติ

Apidog ไม่ได้ทำงานเป็น live proxy ที่บันทึก HTTP traffic แบบอัตโนมัติในเบื้องหลัง

โฟลว์ที่รองรับในปัจจุบันคือ:

1. จับทราฟฟิกด้วย Browser DevTools
2. ส่งออกไฟล์ HAR
3. นำเข้า HAR เข้า Apidog
4. สร้างหรือรัน test scenario จาก Endpoint ที่ได้

ดังนั้น หากต้องการบันทึก request ให้ใช้ DevTools และ HAR export เป็นหลัก

ส่วนขยายเบราว์เซอร์ Apidog ไม่ใช่เครื่องมือจับ HAR

มีส่วนขยายเบราว์เซอร์ Apidog สำหรับใช้งาน API testing และ debugging ในเบราว์เซอร์ แต่ไม่ได้มีไว้จับทราฟฟิกแล้วส่งออก HAR

โปรดคำนึงถึงข้อจำกัดของเบราว์เซอร์เมื่อใช้ส่วนขยาย:

• อาจบล็อก headers เช่น Cookie, Host, Origin และ Content-Length
• ไม่ส่ง request body กับ GET หรือ HEAD
• ไม่สามารถเข้าถึงโค้ดภายในเครื่องหรือฐานข้อมูลหลังเครื่องของคุณ

ใช้ DevTools สำหรับจับ HAR และใช้ Apidog Desktop เมื่อต้องการควบคุม request และ headers ได้มากกว่า

หากมี OpenAPI หรือ Postman collection อยู่แล้ว ให้ใช้ไฟล์เหล่านั้นก่อน

หน้าจอ Settings > Import Data > Manual รองรับหลายฟอร์แมต ไม่ใช่แค่ HAR

หากคุณมี OpenAPI หรือ Swagger อยู่แล้ว การนำเข้าสเปกมักได้ผลลัพธ์ที่สะอาดกว่า HAR เพราะมีโครงสร้าง API ที่กำหนดไว้ล่วงหน้า ดูคู่มือ:

• ย้ายเอกสาร API ของ Swagger ไปยัง Apidog
• ย้าย environment และ collection ของ Postman ไปยัง Apidog

ใช้ HAR เมื่อไม่มีสเปก และทราฟฟิกที่จับได้คือข้อมูลที่ดีที่สุดที่มี

ทำงานอัตโนมัติด้วย Apidog CLI

คุณไม่จำเป็นต้องนำเข้า HAR ผ่าน GUI เสมอไป Apidog CLI รองรับการนำเข้า HAR โดยตรง เหมาะกับการทำงานบนเซิร์ฟเวอร์, pipeline หรือสคริปต์อัตโนมัติ

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

แฟล็ก --format ยังรองรับ openapi, postman, wsdl, insomnia และฟอร์แมตอื่น

เมื่อสร้าง test scenario จาก Endpoint แล้ว ให้รันใน CI แบบ headless:

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

ความหมายของพารามิเตอร์:

• -t — ID ของ test scenario
• -e — ID ของ environment
• -r cli — ใช้รายงานผลใน console

เริ่มจากคู่มือการเขียนสถานการณ์ทดสอบใน Apidog แล้วเชื่อมคำสั่งเข้ากับ pipeline ตามคู่มือ Apidog CLI CI/CD

คำถามที่พบบ่อย

เบราว์เซอร์ใดส่งออก HAR ได้บ้าง?

Chrome และ Edge ซึ่งใช้ Chromium DevTools สามารถส่งออกได้จากแท็บ Network ด้วยเมนู Save all as HAR with content เบราว์เซอร์อื่นอาจรองรับเช่นกัน แต่ชื่อเมนูอาจต่างกัน

ทำไมมี Endpoint ถูกนำเข้าจำนวนมาก?

สาเหตุทั่วไปคือไม่ได้ตั้งค่า Static Resource เป็น Exclude ทำให้รูปภาพ, CSS และ JavaScript ถูกนำเข้ามาด้วย ให้นำเข้าใหม่โดยเปิด Exclude หรือลบรายการที่ไม่เกี่ยวข้องออกด้วยตนเอง

ควรเลือก Hardcode หรือ Remove สำหรับ BaseURL?

เลือก Remove (แนะนำ) เกือบทุกกรณี เพราะช่วยให้ใช้ environment variables สลับระหว่าง Production, Staging และ Local ได้โดยไม่ต้องแก้ Endpoint แต่ละรายการ วิธีนี้ยังทำงานร่วมกับสถานการณ์ทดสอบใน Apidogได้สะดวกกว่า

HAR มี token สำหรับยืนยันตัวตนหรือไม่?

มีได้ HAR บันทึก headers จริงของ session รวมถึง Bearer token หรือ cookies ให้ถือว่าไฟล์ HAR เป็นข้อมูลลับ: อย่าโพสต์ใน public issue และล้าง credentials ออกจากตัวอย่างก่อนแชร์

นำเข้า HAR ผ่าน CLI ได้หรือไม่?

ได้ ใช้คำสั่งนี้:

apidog import --project <id> --format har --file <path>

CLI เหมาะกับ server-side capture และงาน CI ส่วน GUI เหมาะเมื่อคุณต้องการตั้งค่า BaseURL และ Static Resource แบบโต้ตอบ หลังนำเข้าแล้ว คุณสามารถใช้ apidog run เพื่อรันสถานการณ์ทดสอบซ้ำได้

สรุป

HAR ช่วยเปลี่ยนทราฟฟิกที่มองเห็นได้ในเบราว์เซอร์ให้กลายเป็น Endpoint ที่นำกลับมาใช้ซ้ำได้:

1. ส่งออกด้วย Save all as HAR with content
2. นำเข้าผ่าน Settings > Import Data > Manual
3. เลือก Remove สำหรับ BaseURL
4. ตั้งค่า Static Resource เป็น Exclude
5. เปลี่ยนชื่อ Endpoint, เพิ่ม path parameters และล้างข้อมูลลับ
6. ใช้ Endpoint ที่ได้สำหรับเอกสาร, mock และการทดสอบ

พร้อมเปลี่ยน HAR ถัดไปให้เป็น Endpoint จริงแล้วหรือยัง? ดาวน์โหลด Apidog และทดลองใช้ฟรีโดยไม่ต้องใช้บัตรเครดิต