ตัวแสดงกราฟ JSON
แสดง JSON ที่ซ้อนกันเป็นต้นไม้แบบอินเทอร์แอกทีฟ พร้อมย่อ/ขยาย branch สถิติโหนด และ path สไตล์ JSONPath ฟรี ทำงานในเบราว์เซอร์ ไม่มีการอัปโหลด
Loading tool...
ตัวแสดงกราฟ JSON คืออะไร?
ตัวแสดงกราฟ JSON เป็นเครื่องมือฟรีในเบราว์เซอร์ที่เปลี่ยนเอกสาร JSON เป็นต้นไม้แบบอินเทอร์แอกทีฟ: ย่อ/ขยาย branch ของ object และ array ดูสถิติโหนดได้ในช็อตเดียว และคัดลอก path สไตล์ JSONPath ของทุกโหนด
ประโยชน์หลัก
- เข้าใจ response จาก API ที่ซ้อนกันลึกโดยไม่ต้องอ่าน JSON ดิบ
- ย่อส่วนที่ไม่เกี่ยวแล้วขยายเฉพาะ branch ที่กำลัง debug
- คัดลอก path ที่แม่นยำไปใช้ใน test, เอกสาร หรือคิวรี jq/JSONPath
- เป็นส่วนตัว: parse ในเบราว์เซอร์ทั้งหมด ไม่มีการอัปโหลด
กรณีการใช้งาน
- •สำรวจ response จาก API ขนาดใหญ่ก่อนเขียน client เรียกใช้
- •ตรวจโครงสร้าง package.json, tsconfig หรือ config ของ CI ตอน code review
- •หา null ที่ไม่คาดคิดหรือ array ที่ type ปนกันใน payload ฝั่ง backend
- •ทำเอกสารโครงสร้าง payload ด้วยการส่งออกต้นไม้เป็นข้อความ
วิธีใช้ตัวแสดงกราฟ JSON
- วาง JSON: วาง response จาก API, package.json หรือเอกสาร JSON ใด ๆ หรือกดโหลดตัวอย่างเพื่อทดลองใช้
- สำรวจต้นไม้: คลิก branch (object หรือ array) เพื่อย่อหรือขยาย ใช้ปุ่มขยายทั้งหมดหรือย่อทั้งหมดสลับระหว่างภาพรวมกับรายละเอียด
- ตรวจดูโหนด: เลือกโหนดเพื่อดู type ค่าจริง และตำแหน่งแบบ JSONPath โดยมี $ เป็นรากและ [index] สำหรับ array
- คัดลอก path หรือส่งออก: คัดลอก path ที่เลือกไว้ใช้ใน test หรือคิวรี หรือดาวน์โหลดต้นไม้เป็นไฟล์ข้อความแบบย่อหน้า ทำงานในเบราว์เซอร์ทั้งหมด
คุณสมบัติหลัก
- ต้นไม้อัปเดตสดทันทีที่พิมพ์หรือวาง JSON
- ย่อ/ขยาย branch ของ object และ array ได้ทีละโหนด
- สถิติโหนด: จำนวนโหนดทั้งหมด, branch, leaf และความลึกสูงสุด
- path สไตล์ JSONPath ใช้ $ เป็นรากและ [index] สำหรับ array
- ส่งออกต้นไม้ทั้งหมดเป็นข้อความไว้ทำเอกสารและ code review
คำถามที่พบบ่อย
สถิติโหนดแต่ละตัวหมายความว่าอะไร?
โหนด คือจำนวนรวมของทุก key และสมาชิก array รวมรากด้วย Branch คือ object และ array, leaf คือค่า scalar และความลึกสูงสุดคือจำนวนระดับที่ข้อมูลซ้อนกันลงไป
ปุ่มคัดลอก path ใช้รูปแบบอะไร?
แบบ JSONPath: รากของเอกสารคือ $, key ของ object ต่อกันด้วยจุด (config.retries) และสมาชิก array ใช้วงเล็บเหลี่ยม (maintainers[0].name) คัดลอกไปใช้กับ JSONPath query หรือแนบใน bug report ได้เลย
JSON ขนาดใหญ่แค่ไหนรับได้?
ไม่จำกัดขนาด เพราะ parse ด้วย JSON.parse ของเบราว์เซอร์โดยตรง แต่เอกสารใหญ่มาก (สิบกว่าเมกะไบต์) อาจช้าเวลาพิมพ์ แนะนำให้ย่อ branch ระหว่างสำรวจ
JSON ของฉันถูกอัปโหลดไหม?
ไม่ การ parse และแสดงผลทำงานในเบราว์เซอร์ของคุณทั้งหมด เมื่อโหลดหน้าเวบแล้วเครื่องมือทำงานได้แม้ออฟไลน์