เครื่องมือจัดรูปแบบ ตรวจสอบ และย่อ JSON

จัดรูปแบบ ตรวจสอบ และย่อ JSON ได้เลยในเบราว์เซอร์

JSON ย่อมาจาก JavaScript Object Notation คือภาษากลางของเว็บยุคใหม่ เกือบทุก REST API ที่คุณเรียกใช้จะส่งข้อมูลกลับมาในรูป JSON ไฟล์คอนฟิกส่วนใหญ่ก็พึ่งพา JSON และข้อมูลมหาศาลที่ไหลระหว่างเซอร์วิสกับ front-end ล้วนถูก serialize เป็น JSON ทั้งสิ้น ความนิยมนี้มีเหตุผลที่ดี: รูปแบบเรียบง่าย ไม่ขึ้นกับภาษาใดภาษาหนึ่ง และแมปได้ลงตัวกับออบเจกต์ อาร์เรย์ สตริง และตัวเลขที่นักพัฒนาคุ้นเคยอยู่แล้ว แต่ความกะทัดรัดนั้นก็มีด้านเสียเช่นกัน ทันทีที่เซิร์ฟเวอร์ส่ง response บรรทัดเดียวซึ่งยัดคีย์ซ้อนกันนับร้อยมาให้ โครงสร้างที่เคยดึงดูดใจก็หายไปในกองตัวอักษรที่ดูไม่รู้เรื่อง

JSON Formatter ของ speedor.net มีไว้เพื่อคืนโครงสร้างนั้นให้คุณ เพียงวางข้อมูลแล้วเครื่องมือจะจัดรูปแบบ ตรวจสอบ และย่อ JSON ได้ทันที ทั้งหมดทำงานภายในแท็บเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลไปยังเซิร์ฟเวอร์ใดๆ ซึ่งสำคัญมากเมื่อ payload ที่คุณกำลังตรวจสอบเป็น API response ที่มีโทเค็น ข้อมูลลูกค้า หรือ identifier ภายใน

เหตุใดการย่อหน้าจึงทำให้ JSON อ่านได้อีกครั้ง

การจัดรูปแบบ หรือที่เรียกว่า beautifying หรือ pretty-printing คือการนำ JSON แบบกะทัดรัดหรือ minified มาเพิ่มการขึ้นบรรทัดใหม่และการย่อหน้าที่สม่ำเสมอ ข้อมูลยังคงเหมือนเดิมทุกประการ เปลี่ยนเพียงช่องว่าง แต่ช่องว่างนั้นแหละที่ช่วยให้สายตาของคุณติดตามความลึกของการซ้อน สังเกตว่าออบเจกต์หนึ่งจบตรงไหนและอีกอันเริ่มตรงไหน รวมถึงแยกแยะอาร์เรย์สามรายการออกจากอาร์เรย์สามร้อยรายการได้ เมื่อคุณกำลังดีบักการ integration ตีสองตีสาม ความแตกต่างระหว่างต้นไม้ที่อ่านได้กับสตริงไม่มีช่องว่างคือความแตกต่างระหว่างการเจอบั๊กกับการพลาดมันไป

นอกจากนี้ formatter ที่ดีจะยังคงลำดับของคีย์และค่าต่างๆ ไว้ครบถ้วน ดังนั้นสิ่งที่คุณอ่านคือสิ่งที่ API ส่งมาจริงๆ ไม่ใช่การแสดงผลโดยประมาณ คุณกำลังมองไบต์เดิมทุกตัว เพียงแต่จัดวางไว้ให้มนุษย์อ่านได้ง่ายพอๆ กับที่เครื่องอ่าน

การตรวจสอบและข้อผิดพลาดที่สะดุดทุกคน

การจัดรูปแบบเป็นเพียงครึ่งหนึ่งของงาน ก่อนที่ JSON จะถูกจัดรูปแบบได้เลย มันต้องถูกต้องก่อน และกฎที่เข้มงวดของรูปแบบนี้จับข้อผิดพลาดได้มากกว่าที่คนส่วนใหญ่คาดไว้ ตัวตรวจสอบจะ parse input ของคุณและบอกว่ามันผิดตรงไหน โดยปกติจะชี้ไปยังบรรทัดและตำแหน่งเพื่อไม่ให้คุณต้องค้นหาแบบตาบอด ข้อผิดพลาดไม่กี่อย่างต่อไปนี้คิดเป็นส่วนใหญ่ของ JSON ที่เสียทั้งหมด:

• Trailing commas. JSON ห้ามใส่ comma หลังองค์ประกอบสุดท้ายของออบเจกต์หรืออาร์เรย์ JavaScript ยอมรับได้ ซึ่งนั่นแหละคือเหตุที่นักพัฒนามักวางมันเข้าไปโดยความเคยชิน
• Single quotes. สตริงและคีย์ต้องใช้ double quotes เท่านั้น การยก object literal จากโค้ดโดยตรงมักทิ้ง single quotes ไว้ และ parser จะปฏิเสธ
• Unquoted keys. ทุกคีย์ต้องเป็น quoted string คีย์เปล่าๆ แบบที่ใช้งานได้ใน JavaScript object นั้น ไม่ถูกต้องใน JSON
• Missing or mismatched brackets. วงเล็บ { หรือ [ ที่ยังไม่ปิด หรือวงเล็บปิดที่หลงมา จะทำให้เอกสารทั้งหมดพัง formatter จะเน้นจุดที่ความสมดุลขาด
• Comments และ undefined values. JSON ไม่มี comments และไม่มี undefined อนุญาตเฉพาะ null boolean ตัวเลข สตริง อาร์เรย์ และออบเจกต์เท่านั้น

รัน payload ที่น่าสงสัยผ่านตัวตรวจสอบก่อน แล้วปัญหาเหล่านี้จะปรากฏภายในไม่กี่วินาที แทนที่จะต้องผ่าน chain ของ deploy ที่ล้มเหลวสร้างความงงงวย

การ Minify เพื่อลดขนาด payload

การดำเนินการย้อนกลับก็มีประโยชน์พอๆ กัน Minifying ลบช่องว่างทางเลือกทุกไบต์ ทำให้ JSON ของคุณยุบลงเป็นรูปแบบบรรทัดเดียวที่กระชับที่สุด นั่นคือสิ่งที่คุณต้องการเมื่อข้อมูลกำลังจะถูกส่งผ่านเครือข่ายหรือใส่ไว้ใน config value เพราะ payload ขนาดเล็กหมายถึง bandwidth น้อยและส่งได้เร็วขึ้น workflow ที่พบบ่อยคือ beautify response ขณะที่คุณศึกษา แก้ไขสิ่งที่ผิด แล้ว minify ผลลัพธ์ก่อน commit หรือวางลงใน environment variable เครื่องมือเดียวจัดการได้ทั้งสองด้าน

การประมวลผลในเครื่องช่วยรักษาความเป็นส่วนตัวของข้อมูลสำคัญ

เนื่องจากทุกขั้นตอนทำงานใน JavaScript ภายในเบราว์เซอร์ของคุณเอง JSON ที่คุณวางจึงไม่ออกจากเครื่องของคุณ นี่ไม่ใช่แค่คำโฆษณา แต่เป็นการรับประกันที่ใช้ได้จริง คุณสามารถวาง API response ดิบที่เต็มไปด้วย bearer tokens ข้อมูล export ของผู้ใช้ หรือ config ของบริการภายในได้โดยไม่ต้องกังวลว่าเซิร์ฟเวอร์ของบุคคลที่สามจะบันทึกมัน ปิดแท็บแล้วข้อมูลก็หายไป สำหรับผู้ที่ทำงานภายใต้กฎการจัดการข้อมูล การประมวลผลในเครื่องเท่านั้นช่วยขจัดความเสี่ยงในหมวดหมู่นั้นทั้งหมด

เมื่อ JSON ของคุณสะอาดแล้ว คุณอาจต้องการนำไปใช้ต่อ สำรวจเครื่องมือสำหรับนักพัฒนาส่วนที่เหลือของเรา แปลงโครงสร้างด้วย JSON เป็น YAML หรือถอดรหัสค่าที่ฝังอยู่โดยใช้ Base64 เครื่องมือทุกอย่างตามหลักการเดียวกัน: เร็ว ฟรี และประมวลผลทั้งหมดในเบราว์เซอร์ของคุณ

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