ใน Google Chrome 117 นั้น ทำการเพิ่มความสามารถใน DevTool เยอะเลย
หนึ่งในนั้นคือ การ override content ของ XHR/fetch request ได้
นั้นหมายความว่า สามารถทำการ mock api ต่าง ๆ
ที่เรียกจาก web browser ออกไปได้

โดยจะสามารถ override content ต่าง ๆ ได้ดังนี้

  • XHR/Fetch
  • Image
  • Font
  • Script ต่าง ๆ เช่น JS และ CSS เป็นต้น
  • HTML

การใช้งานเบื้องต้นเป็นดังนี้

ทำการ inspect ดูในส่วนของ network

จากนั้นทำการ allow permission ใน browser ให้สามารถ access ไปยัง disk ของเครื่อง
เพื่อทำการบันทึกการ override

สุดท้ายลองreload ใหม่ จะแสดงผลการเข้าส่วนที่ override ไว้ดังนี้

เท่านี้ก็ใช้งานได้แล้ว ง่ายมาก ๆ
ลอง Download ไปใช้กันดูครับ