API Inspector สำหรับ Chrome: ตัวดีบัก XHR และ Fetch API ที่มุ่งเน้น API Inspector - XHR & Fetch Debugger, โดย Vaishali, เป็นส่วนขยายของ Chrome ที่มุ่งเน้นการจราจร API สำหรับการดีบักที่มุ่งเน้น มันจับการเรียก Fetch และ XMLHttpRequest ในอินเทอร์เฟซที่เฉพาะเจาะจงเพื่อให้นักพัฒนาสามารถตรวจสอบ JSON payloads และ headers ขณะติดตามการเปลี่ยนแปลง schema ในเวลาจริง ส่วนขยายนี้ลดเสียงรบกวนที่ไม่ใช่ API และเพิ่มความเร็วในการค้นหา endpoint นักพัฒนาฝั่งหน้า วิศวกรฟูลสแต็ค และผู้ทดสอบ QA จะได้รับเครื่องมือที่กะทัดรัดสำหรับการตรวจสอบการสื่อสาร API ในระหว่างการพัฒนา。
มันแยกการร้องขอ API ได้แคบเพียงใด? API Inspector ตั้งใจที่จะทำให้มุมมองเครือข่ายแคบลงเฉพาะการแลกเปลี่ยน API HTTP แทนที่จะโชว์ทรัพยากรสถิต โดยส่วนขยายจะลบสิ่งรบกวนที่ไม่เกี่ยวข้อง ทำให้ค้นหาคู่การร้องขอ-การตอบสนองได้ง่ายขึ้นเมื่อแอปพลิเคชันออกภาพ, สไตล์ชีต, หรือสคริปต์จำนวนมาก วิธีการที่มุ่งเน้นนี้สนับสนุนการทำงานที่มีเป้าหมายเพื่อยืนยัน payload ของ REST หรือ GraphQL แทนที่จะทำโปรไฟล์ทรัพยากรของเบราว์เซอร์ทุกตัว
การตรวจจับการเปลี่ยนแปลงสคีมาของมันมีประสิทธิภาพเพียงใด? ส่วนขยายจะทำการดึงข้อมูลสคีมา JSON โดยอัตโนมัติและเน้นความแตกต่างทางโครงสร้าง ทำให้นักพัฒนาสามารถสังเกตเห็นฟิลด์ที่ถูกเพิ่ม, ลบ, หรือเปลี่ยนประเภท การเปรียบเทียบแบบข้างเคียงจะแสดงความแตกต่างในระดับฟิลด์ ซึ่งช่วยในการตรวจจับการเปลี่ยนแปลงที่ทำให้เกิดปัญหาระหว่างการทดสอบการรวม ระบบนี้สนับสนุนการตรวจสอบ API responses อย่างต่อเนื่องเมื่อการเปลี่ยนแปลงใน backend อาจส่งผลต่อการเรนเดอร์ด้านหน้า หรือไคลเอนต์ที่อิงตามสัญญา
มันเข้ากับการทำงานแก้ไขข้อผิดพลาดในชีวิตประจำวันได้อย่างไร? เครื่องมือจัดเตรียมฟีเจอร์ที่เร่งความเร็วในการตรวจสอบโดยไม่ต้องตั้งค่าภายนอก: JSON ที่พิมพ์สวยพร้อมการเน้นไวยากรณ์, การกรองที่ไม่สนใจตัวพิมพ์ใหญ่-ตัวพิมพ์เล็กอย่างต่อเนื่องเพื่อค้นหาจุดสิ้นสุดได้อย่างรวดเร็ว, การคัดลอกหัวข้อและเนื้อหาเพียงคลิกเดียว, และโหมดมืดสำหรับเซสชันในที่มืด มันประมวลผลข้อมูลในเครื่องในเบราว์เซอร์ ดังนั้นจึงไม่มีการวิเคราะห์หรือการอัปโหลดภายนอกเกิดขึ้น และมันเข้ากันได้กับ Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่นๆ
ขีดจำกัดที่ใช้งานได้ของส่วนขยายคืออะไร? ส่วนขยายมุ่งเน้นไปที่การรับส่งข้อมูล HTTP(S) Fetch และ XHR เท่านั้น ดังนั้นจึงไม่สามารถจับสตรีม WebSocket และไม่สามารถตรวจสอบ chrome:// หรือหน้าส่วนขยายภายในอื่นๆ ได้เนื่องจากความปลอดภัยของเบราว์เซอร์ ขอบเขตที่แคบนี้ทำให้มันไม่เหมาะสมเป็นการแทนที่แบบเต็มรูปแบบสำหรับแผงเครือข่ายของเบราว์เซอร์เมื่อจำเป็นต้องมีการจับเวลาแหล่งข้อมูลทั้งหมดหรือการติดตาม WebSocket
ใครควรเพิ่มเครื่องมือนี้ในกล่องเครื่องมือของพวกเขา? API Inspector เป็นตัวเลือกที่ใช้งานได้จริงสำหรับนักพัฒนาที่ต้องการมุมมองการสื่อสาร HTTP API ที่มีเสียงรบกวนลดลง แทนที่จะเป็นการตรวจสอบเครือข่ายแบบเต็มรูปแบบ มันสละความกว้างเพื่อเส้นทางที่เร็วขึ้นในการตรวจสอบการตอบสนองของ API ดังนั้นให้รวมมันกับแผงเครือข่ายในเบราว์เซอร์เมื่อคุณต้องการเวลา มุมมองทรัพยากรน้ำตก หรือการติดตามระดับโปรโตคอล เคล็ดลับ: ใช้เครื่องมือทั้งสองข้างกันเพื่อรักษาการตรวจสอบที่กว้างขณะใช้ส่วนขยายสำหรับการตรวจสอบ API อย่างรวดเร็ว.
ข้อดี จับภาพ Fetch และ XHR คำขอใน UI นักพัฒนาที่จัดเตรียมไว้เฉพาะ การดึง JSON schema อัตโนมัติและการเน้นการเปลี่ยนแปลงแบบข้างเคียง การกรองที่คงอยู่และไม่คำนึงถึงตัวพิมพ์สำหรับการค้นหาจุดสิ้นสุดอย่างรวดเร็ว ประมวลผลข้อมูลในท้องถิ่นโดยไม่มีการติดตามหรืออัปโหลดจากภายนอก ข้อเสีย ไม่มีการสนับสนุนการตรวจสอบ WebSocket ไม่สามารถตรวจสอบ chrome:// หรือหน้าเว็บภายในส่วนขยายอื่น ๆ ได้ ไม่ใช่การแทนที่ที่สมบูรณ์สำหรับการวิเคราะห์ทรัพยากร/เวลา จำกัดเฉพาะเบราว์เซอร์ที่ใช้ Chromium 
