Cách dùng JSON Formatter từng bước trên UI | Format, Minify, copy

Khi debug API trên Chrome DevTools, response thường là một dòng. Sinh viên và freelancer Việt Nam hay paste vào Notepad rồi đếm ngoặc tay — chậm và dễ sót. Bài này đi theo đúng các nút trên UI của formatter, không lan man lý thuyết JSON.

Bản đồ giao diện (nhớ 4 nút)

Trên JSON Formatter Kawa bạn sẽ thấy gần như:

Phần UI	Nhãn tiếng Việt	Việc nó làm
Ô trên	Nhập JSON	Nơi dán log / response / package.json
Nút 1	Định dạng (Format)	Pretty-print + validate
Nút 2	Nén (Minify)	Một dòng, bỏ whitespace thừa
Nút 3	Sao chép	Copy ô Kết quả
Nút 4	Dữ liệu mẫu	Chèn example để tập tay

Hai ô: Nhập JSON (editable) và Kết quả (output). Lỗi hiện kèm tiền tố kiểu JSON không hợp lệ: ....

---

Từng bước trên UI

Bước 1 — Mở tool

Vào JSON Formatter. Không cài extension. Phù hợp máy lab trường hoặc máy khách chỉ cho mở trình duyệt.

Bước 2 — Nhập liệu

Ba nguồn hay dùng:

1. Copy từ tab Network → Response
2. Copy từ log backend (một dòng)
3. Bấm Dữ liệu mẫu lần đầu để xem “Format thành công” trông ra sao

Placeholder gợi ý dạng {"name":"ví dụ","items":[1,2,3]} — đúng tinh thần: object + array ngắn.

Mẹo: Nếu response bọc data rất dài, vẫn paste cả cục được; Format giúp bạn thấy cấp nào chứa mảng cần soi.

Bước 3 — Bấm Định dạng (Format)

Kỳ vọng khi hợp lệ:

{"user":{"name":"An","roles":["dev","qa"]},"ok":true}

→ Thành khối indent, roles và nested user nhìn rõ tầng.

Khi không hợp lệ, đừng nhìn ô Kết quả “trống đẹp” — đọc dòng lỗi. Ví dụ thiếu phẩy:

{
  "name": "An"
  "city": "Hà Nội"
}

Sửa thành có , sau "An", Format lại.

Bước 4 — Chỉ Minify khi đã xanh

Nén (Minify) trên JSON lỗi sẽ thất bại tương tự Format — parser không đọc được thì không có bản minify đáng tin.

Luồng đúng khi chuẩn bị POST:

1. Format → mắt xác nhận key
2. Minify → copy vào Postman/Insomnia
3. Không minify rồi mới cố đọc bằng mắt trên một dòng

Bước 5 — Sao chép

Nút Sao chép lấy nội dung Kết quả (đã Format hoặc đã Minify), không lấy lại ô nhập thô. Sau khi copy, UI có thể hiện phản hồi kiểu “Đã sao chép” trong giây lát.

---

Ba lỗi UI hay gặp (và cách xử lý ngay trên ô nhập)

1. Trailing comma (copy từ JS object)

{
  "a": 1,
}

JSON chuẩn không cho phép. Xóa dấu phẩy cuối → Format.

2. Nháy đơn

{'name': 'An'}

Đổi sang nháy kép ". Formatter không “đoán” giúp như một số IDE.

3. Comment hoặc undefined

{
  // todo
  "x": undefined
}

Chuẩn JSON: không comment, không undefined (dùng null hoặc bỏ key). Xóa comment / sửa giá trị rồi Format.

---

Case: response một dòng từ API học phần / freelance

Giả sử DevTools trả:

{"success":true,"data":{"student":"Hạnh","scores":[8,9,7]},"traceId":"vn-lab-01"}

Thao tác bookmark-worthy:

1. Paste vào Nhập JSON
2. Định dạng → kiểm tra scores đủ 3 phần tử, traceId đúng
3. Nếu gửi lại mock: Nén → Sao chép vào file fixture
4. Nếu nghi ngờ cú pháp (copy thiếu }): đọc lỗi đỏ trước khi đổ lỗi cho backend

Freelancer nhận token tạm trong JSON: ưu tiên tool local như Kawa thay vì paste lên formatter lạ có upload — đúng pain “không muốn đăng ký / không muốn log server giữ payload”.

---

Checklist 60 giây trước khi đóng tab

• Đã Format thành công ít nhất một lần (cấu trúc đọc được)
• Đã sửa hết lỗi cú pháp nếu có
• Chỉ Minify khi mục tiêu là máy đọc / truyền tải
• Đã Sao chép từ ô Kết quả, không copy nhầm input cũ
• Không để JSON production key trên máy chiếu / stream

Khi nào cần thêm tool khác

• Cần bảng Excel từ mảng object → JSON ↔ CSV
• Cần so hai bản JSON → dùng diff / PR, không chỉ Format
• File cực lớn làm tab đơ → dùng CLI (jq) trên máy mạnh hơn

Còn lại, bốn nút trên JSON Formatter đủ cho vòng debug hàng ngày: đọc → sửa → nén → copy.

Liên kết liên quan

• JSON Formatter
• JSON ↔ CSV
• Danh sách công cụ