คำถามที่พบบ่อยเรื่องการใช้เครื่องมือ: ข้อมูล ไฟล์ และการส่งออก

สรุปสั้น ๆ: การ parse, format, diff และ query ทำงานทั้งหมดในเบราว์เซอร์ของคุณและใช้ต่อได้แม้ออฟไลน์ ให้ล้างประวัติใน localStorage หลังจัดการข้อมูลที่ละเอียดอ่อน และเมื่อไฟล์เกิน 10 MB ให้เปลี่ยนไปใช้เครื่องมือ streaming บน command line แทนการวางไฟล์ลงในเบราว์เซอร์

ก่อนวาง payload ที่ละเอียดอ่อนลงในเครื่องมือออนไลน์ ควรรู้ว่ามันไปที่ไหน บทความนี้พูดถึงเฉพาะพฤติกรรมการทำงานของเครื่องมือ ไม่ได้พูดถึงไวยากรณ์

1. ข้อมูลและความเป็นส่วนตัว

formatter JSON ออนไลน์อัปโหลดข้อมูลของฉันขึ้นเซิร์ฟเวอร์ไหม?

ไม่ การ parse, format, minify, diff และ query เกิดขึ้นในเบราว์เซอร์ทั้งหมด และหน้าเว็บไม่เคยส่งสิ่งที่คุณวางไปยัง application server

คุณไม่จำเป็นต้องอ่าน privacy statement เพื่อรู้ว่าเครื่องมือออนไลน์อัปโหลดข้อมูลหรือไม่ network panel ของเบราว์เซอร์ก็เพียงพอ:

1. เปิด developer tools สลับไปที่แท็บ Network แล้วเปิดการเก็บ log ไว้ (log persistence);
2. วาง JSON สักก้อนแล้วกด "Format";
3. ดูว่ามีคำขอ XHR หรือ fetch ใหม่โผล่ขึ้นมาหรือไม่ และ body ของมันมีเนื้อหาของคุณอยู่หรือเปล่า

สำหรับเครื่องมือที่ทำงานในเครื่องจริง ๆ ขั้นตอนนี้จะเห็นแค่คำขอโหลด static asset เท่านั้น ในทางกลับกัน ถ้ากด format ครั้งเดียวแล้วเกิด POST /api/format ที่ body เป็นข้อความต้นฉบับของคุณ แปลว่าข้อมูลออกจากเบราว์เซอร์ไปแล้ว ไม่ว่าหน้าเว็บจะบอกอะไรก็ตาม

ทุกเครื่องมือบนเว็บไซต์นี้เป็น front-end ล้วน และไฟล์ที่ build ออกมาไม่มี server API อยู่เลย หลังตัดเน็ตแล้วกด refresh ที่ยังเข้าแคชได้ก็ยังใช้งานได้ และนี่คือวิธีตรงที่สุดในการพิสูจน์ว่า "ทำงานในเครื่องทั้งหมดจริง"

ยังใช้แบบออฟไลน์ได้ไหม?

ได้ โดยมีเงื่อนไขว่าเคยโหลดหน้านี้มาครั้งหนึ่งแล้ว

asset ของเว็บไซต์จะถูกดาวน์โหลดเข้าแคชของเบราว์เซอร์ตั้งแต่เข้าครั้งแรก ดังนั้นแม้หลังจากนั้นไม่มีเน็ต การ format, minify, แปลง JSON5 และการ query ด้วย JSONPath ก็ยังใช้งานได้ มีแค่ฟีเจอร์ที่ต้องใช้เน็ตถึงจะล้มเหลว เช่น การตรวจเวอร์ชันใหม่หรือการดาวน์โหลดตัวติดตั้งเดสก์ท็อป

การทดสอบแบบออฟไลน์ก็เป็นวิธีดีในการยืนยันว่า "ข้อมูลไม่ออกจากเครื่อง": ถ้าตัดเน็ตแล้วทุกอย่างพังทันที แปลว่าทุกการกระทำกำลังคุยกับเซิร์ฟเวอร์

มีข้อมูลถูกเก็บไว้ในเครื่องไหม? ล้างอย่างไร?

มี แต่เก็บเฉพาะใน localStorage ของเบราว์เซอร์ที่ใช้อยู่ และเก็บเฉพาะประวัติกับค่าตั้งหน้าตาเท่านั้น

• ประวัติ: 100 รายการล่าสุดที่ประมวลผล เรียงจากใหม่ไปเก่า ใช้เพื่อเรียกข้อมูลที่เคยวางก่อนหน้านี้กลับมา;
• ค่าตั้งหน้าตา: ธีม, ภาษา, การตั้งค่าการย่อหน้า และอื่น ๆ;
• ไม่ถูกเก็บ: ตัวไฟล์, บันทึกการอัปโหลด หรือข้อมูลใด ๆ ที่ระบุตัวตนได้

มีสามวิธีล้าง จากแคบสุดไปกว้างสุด:

เมื่อจัดการข้อมูล production บนคอมพิวเตอร์ที่ใช้ร่วมกัน ให้ล้างประวัติตอนเลิกใช้ ไม่ใช่แค่ปิดแท็บ — localStorage ไม่หายไปเมื่อปิดแท็บ

ทำไมอักขระจีนกลายเป็น \u4e2d\u6587?

เพราะฟีเจอร์ "escape" แปลงอักขระที่ไม่ใช่ ASCII เป็น Unicode escape sequence นี่คือพฤติกรรมที่ตั้งใจไว้ ไม่ใช่ตัวอักษรเพี้ยน

\u4e2d คือ code point ของอักขระ 中 (U+4E2D) ทั้งสองรูปแบบมีความหมายเหมือนกันใน JSON และ parse ออกมาเป็น string เดียวกัน:

复制{
  "escaped": "\u4e2d\u6587",
  "plain": "中文"
}

เมื่อไรจำเป็นต้อง escape? เมื่อต้องฝัง JSON ลงในระบบเก่าที่รับเฉพาะ ASCII, เมื่อเขียนลง HTTP header หรือเมื่อซ้อนมันไว้ใน string อีกชั้น เมื่อไรไม่จำเป็น? การรับส่งผ่าน API และการจัดเก็บไฟล์ส่วนใหญ่ไม่ต้องใช้ การเก็บภาษาจีนโดยตรงเป็น UTF-8 ประหยัดไบต์กว่า — อักขระจีนหนึ่งตัวใช้ 3 ไบต์ และ 6 ไบต์เมื่อ escape แล้ว

ถ้าเห็นภาษาจีนกลายเป็น \u4e2d ให้ตรวจก่อนว่าคุณเผลอกดปุ่ม "Escape" ไปหรือไม่ อย่าเพิ่งสงสัยว่าการเข้ารหัสพัง

2. ไฟล์และขนาด

รองรับไฟล์ขนาดเท่าไร?

ฝั่งเบราว์เซอร์ไม่มีขีดจำกัดตายตัว ขีดจำกัดจริงมาจากสามที่:

พูดอีกแบบ ไฟล์หลายสิบ MB "parse ได้" แต่ "ใช้งานไม่ได้" เมื่อต้องประมวลผลข้อมูลขนาดนั้นจริง ๆ สิ่งที่ควรทำไม่ใช่หาเครื่องมือออนไลน์ที่แรงกว่า แต่คือเปลี่ยนไปใช้ streaming (ดู คำถามที่พบบ่อยเรื่องประสิทธิภาพและความปลอดภัย)

กฎง่าย ๆ: ต่ำกว่า 2 MB เครื่องมือออนไลน์ลื่นไหลดี; 2–10 MB คือยอมรับการหน่วงหนึ่งถึงสองครั้ง; เกิน 10 MB ควรใช้สคริปต์ในเครื่อง

วางแล้วเบราว์เซอร์ค้าง ทำอย่างไรต่อ?

อย่าเพิ่ง refresh — refresh จะทำให้เนื้อหาหายและต้องวางใหม่ ให้กู้คืนตามลำดับนี้:

1. รอ 10–30 วินาที กรณีส่วนใหญ่ main thread กำลัง parse หรือ render และจะฟื้นตัวเอง;
2. เมื่อฟื้นแล้ว ให้สลับไปมุมมอง "Minify" หรือยุบ tree เพื่อลดจำนวน DOM node ทันที;
3. คัดลอกเนื้อหาลงไฟล์ในเครื่องแล้วเปลี่ยนไปใช้ command line:

复制# ดูโครงสร้างเฉพาะ 100 บรรทัดแรก เพื่อเลี่ยงการโหลดทั้งหมด
head -c 200000 data.json | jq . | head -n 100

# นับรายการด้วยเครื่องมือ streaming โดยไม่โหลดเข้าหน่วยความจำ
jq -c '.items[]' data.json | wc -l

ครั้งต่อไปที่เจอไฟล์ใหญ่ ให้รัน wc -c ดูก่อนว่าได้กี่ไบต์ แล้วค่อยตัดสินว่าจะวางลงเบราว์เซอร์หรือไม่

ทำไมวางแล้วรูปแบบไม่เปลี่ยน?

สาเหตุพบบ่อยสามข้อ เรียงตามความถี่:

1. อินพุตถูก minify อยู่แล้วและไม่มี syntax error: การ format แค่ปรับการย่อหน้า ถ้าต้นฉบับเป็นสองบรรทัดจริง หลังจาก format ก็ยังเป็นสองบรรทัด — ขึ้นบรรทัดใหม่ภายใน string จะไม่ถูกขยาย;
2. เนื้อหาไม่ใช่ JSON: เช่นคุณวาง JavaScript object literal (key ไม่มี quote, single quote) แล้ว parser รายงาน error แทนที่จะ format ให้;
3. กดปุ่มผิด: minify กับ format ไปคนละทิศ และ minify จะลบการย่อหน้าออกทั้งหมด

วิธีดู: มองจำนวนอักขระที่มุมขวาบนของพื้นที่ผลลัพธ์ หลัง format จำนวนควรเพิ่มขึ้น (ย่อหน้าและบรรทัดใหม่เพิ่มมา) ถ้ากลับลดลง แปลว่าคุณไปกด minify

3. อินพุตและเอาต์พุต

จะส่งออกผลลัพธ์เป็นไฟล์ได้อย่างไร?

สามวิธี เรียงตามความน่าเชื่อถือ:

ไฟล์ที่ดาวน์โหลดเป็น UTF-8 ที่ไม่มี BOM โดยค่าเริ่มต้น เรื่องนี้สำคัญ: JSON ที่มี BOM จะพังทันทีใน parser หลายตัว (ดูหัวข้อ BOM ใน คำถามที่พบบ่อยเรื่องไวยากรณ์และรูปแบบ)

รองรับ JSON5 และ JSONC ไหม?

รองรับ แต่ต้องแยก "การ parse" ออกจาก "การส่งออก"

• ฝั่งอินพุต คุณวาง JSON5 (single quote, key ไม่มี quote, comment, trailing comma, เลขฐานสิบหก) หรือ JSONC (มีแค่ comment) ได้;
• ฝั่งเอาต์พุต คุณแปลงเป็น JSON มาตรฐาน หรือแปลง JSON มาตรฐานกลับเป็น JSON5 เพื่อให้แก้ด้วยมือง่ายขึ้น

เมื่อข้ามระบบกัน ให้ส่งออกเป็น JSON มาตรฐานเสมอ JSON5 เป็น dialect สำหรับคนเขียน config; request body ที่มี Content-Type: application/json แต่มี comment หรือ trailing comma มักถูกเซิร์ฟเวอร์ปฏิเสธ

4. สภาพแวดล้อมและความเข้ากันได้

ใช้บนมือถือได้ไหม?

ได้ อินเทอร์เฟซจะปรับเป็นคอลัมน์เดียว และการ format, minify, diff และ JSONPath ยังอยู่ครบ

แต่การจัดการไฟล์ใหญ่บนมือถือเป็นประสบการณ์ที่แย่: คีย์บอร์ดซอฟต์จะบังเนื้อหา การเลือกข้อความทำได้ยาก และเบราว์เซอร์อาจทิ้งหน้าเว็บเมื่อคุณสลับแอป ทำให้เนื้อหาหาย ใช้เป็นทางฉุกเฉินได้ แต่ในชีวิตประจำวันควรทำบนเดสก์ท็อป

ทำไมไฟล์เดียวกันเปิดใน Chrome ได้ แต่ Safari ฟ้อง error?

ปกติไม่ใช่ความต่างของเบราว์เซอร์ แต่เป็นความต่างของการเข้ารหัส ให้ไล่หาสาเหตุตามลำดับนี้:

1. BOM: ไฟล์ UTF-8 ที่เซฟจาก Windows Notepad มี BOM ซึ่ง parser บางตัวไม่ยอมรับ;
2. การขึ้นบรรทัดใหม่: การปน CRLF กับ LF ไม่กระทบ JSON เอง แต่จะเลื่อนเลขบรรทัดที่รายงานใน error ทำให้ดูเหมือน "ตำแหน่ง error ผิด";
3. อักขระที่มองไม่เห็น: ข้อความที่คัดลอกจากหน้าเว็บอาจมี zero-width space (U+200B) ซึ่งตาเปล่ามองไม่เห็น แต่พอทำให้การจับคู่ key พังได้

คำสั่งเดียวก็เห็นทะลุ:

复制# ดูเลขฐานสิบหกของ 16 ไบต์แรก ถ้าขึ้นต้นด้วย EF BB BF แสดงว่ามี BOM
head -c 16 data.json | xxd

5. สรุปเร็ว