หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

JSON Formatter - ต้นฉบับ

ส่วนขยาย Chrome ที่จัดรูปแบบ JSON อัตโนมัติเมื่อคุณดูในแท็บเบราว์เซอร์

คุณสมบัติ

  • รวดเร็ว แม้ในหน้า JSON ที่ยาวมาก
  • โหมดมืด
  • การเน้นไวยากรณ์
  • ต้นไม้พับได้พร้อมไกด์เยื้อง
  • URL ที่คลิกได้
  • ผลกระทบด้านประสิทธิภาพเล็กน้อยในหน้าที่ไม่ใช่ JSON (น้อยกว่า 1 มิลลิวินาที)
  • ใช้งานได้กับหน้า JSON ที่ถูกต้อง – URL ไม่สำคัญ
  • ปุ่มสำหรับสลับระหว่าง JSON แบบดิบและแบบแยกวิเคราะห์
  • JSON ที่แยกวิเคราะห์จะถูกส่งออกเป็นตัวแปรส่วนกลาง json ดังนั้นคุณจึงตรวจสอบได้ในคอนโซลได้ -

*การพิมพ์ json ในคอนโซลไม่ทำงานตั้งแต่ Manifest v3 หากคุณต้องการวิธีแก้ปัญหา ให้วางข้อมูลโค้ดนี้ลงในคอนโซล: 

 json = JSON . parse ( document . getElementById ( "jsonFormatterRaw" ) . querySelector ( "pre" ) . innerText )

เอกสาร JSON บางส่วนสำหรับการทดสอบบน: https://callumlocke.github.io/json-formatter/

การติดตั้ง

ตัวเลือก 1 (แนะนำ) – ติดตั้งจาก Chrome เว็บสโตร์

ตัวเลือก 2 – ติดตั้งจากแหล่งที่มา (ดูด้านล่าง)

การพัฒนา

ข้อกำหนด: Deno (และ Node ในตอนนี้)

การตั้งค่าเริ่มต้น:

  • โคลน repo
  • เรียกใช้ pnpm i เพื่อรับการพิมพ์ TypeScript สำหรับ Chrome (หรือใช้ npm i หากคุณต้องการ)
  • ทางเลือก: หากใช้ VSCode และคุณต้องการยุ่งกับสคริปต์ Deno build ให้ติดตั้งปลั๊กอิน Deno อย่างเป็นทางการและตั้งค่า "deno.enablePaths": ["tasks"]

วิธีสร้าง:

  • รัน deno task build

การสร้างและสร้างใหม่ทุกครั้งที่ไฟล์มีการเปลี่ยนแปลง:

  • เรียกใช้ deno task dev

เพื่อติดตั้งบิลด์ในเครื่องของคุณลงใน Chrome

  • เปิด Chrome และไปที่ chrome://extensions
  • เปิดใช้งาน "โหมดนักพัฒนาซอฟต์แวร์"
  • คลิก "โหลดแกะกล่อง"
  • เลือกโฟลเดอร์ dist ที่คุณสร้างไว้ด้านบน

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

เหตุใดตัวเลขจำนวนมากจึงแสดงไม่ถูกต้อง

นี่เป็นข้อจำกัดของ JavaScript และด้วยเหตุนี้จึงเป็นข้อจำกัดของ JSON ตามที่เว็บเบราว์เซอร์ของคุณตีความ

  • สิ่งใดก็ตามที่อยู่เหนือ Number.MAX_SAFE_INTEGER ( 2^53 - 1 หรือ 9007199254740991 ) จะถูกปรับลงไปที่ตัวเลขนั้น
  • อะไรก็ตามที่ต่ำกว่า Number.MIN_SAFE_INTEGER ( -2^53 + 1 หรือ -9007199254740991 ) จะถูกปรับเป็นตัวเลขนั้น
  • ตัวเลขทศนิยมที่แม่นยำอย่างยิ่งจะถูกปัดเศษเป็น 16 หลัก

ไม่ใช่ JSON Formatter ที่ทำสิ่งนี้ แต่เป็น JSON.parse ดั้งเดิมใน V8 JSON Formatter จะแสดงค่า ที่แยกวิเคราะห์ เหมือนกับที่คุณจะเห็นหลังจากโหลด JSON ใน JavaScript ทุกประการ

หากตำแหน่งข้อมูล API ของคุณจำเป็นต้องแสดงตัวเลขที่อยู่นอกช่วงความปลอดภัยของ JavaScript จริงๆ ก็ควร อ้างอิงตัวเลขเหล่านั้นเป็นสตริง

เหตุใดบางครั้งคีย์อ็อบเจ็กต์จึงอยู่ในลำดับที่ไม่ถูกต้อง

สิ่งที่คุณเห็นใน JSON Formatter คือการแสดงวัตถุ/อาร์เรย์ ที่แยกวิเคราะห์ เป็นลำดับเดียวกับที่คุณจะได้รับจาก Object.keys( JSON.parse(json) ) ใน JavaScript

ในอดีต มาตรฐาน JavaScript ระบุไว้อย่างชัดเจนว่าคีย์อ็อบเจ็กต์สามารถวนซ้ำในลำดับใดก็ได้ และ V8 ใช้ประโยชน์จากสิ่งนี้โดยการย้ายคีย์สตริงตัวเลข (เช่น "1" หรือ "99999" ) ไปด้านบนเพื่ออำนวยความสะดวกในการเพิ่มประสิทธิภาพเล็กน้อย รายละเอียดการใช้งาน V8 นี้ได้กลายเป็นมาตรฐานตั้งแต่นั้นมา

แต่ฉันแค่อยากจะดูว่าเซิร์ฟเวอร์พูดถึงอะไร

สำหรับตอนนี้ ตัวเลือกที่ดีที่สุดของคุณคือเพียงใช้ปุ่ม "Raw" เพื่อดู Raw JSON นี่คือสิ่งที่เซิร์ฟเวอร์ส่งมา ปุ่ม "แยกวิเคราะห์" แสดงถึงสิ่งที่คุณจะได้รับจาก JSON.parse

ในอนาคต JSON Formatter อาจเปลี่ยนจากการใช้ JSON.parse เป็นตัวแยกวิเคราะห์ที่กำหนดเอง (หากประสิทธิภาพอนุญาต) เพื่อตรวจจับเมื่อค่าถูก 'เปลี่ยนแปลง' โดยการแยกวิเคราะห์และแสดงคำเตือนที่เหมาะสม

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด