So sánh 2 bản code/config/JSON không cần Git UI | Diff nhanh trên trình duyệt【2026】

Bạn đang cầm hai đoạn code hoặc hai file config. Khách hỏi trên Slack: “bản này khác bản mình gửi hôm qua chỗ nào?” Repo chưa clone trên máy hiện tại. Mở VS Code + Git extension mất vài phút — trong khi câu trả lời chỉ cần 30 giây nhìn chỗ đổi.

Đó là lúc diff text trên trình duyệt hữu ích hơn Git UI: không cần branch, không cần commit, chỉ cần hai bản paste.

Bài này hướng tới developer / freelancer / team outsourcing ở Việt Nam: so sánh code, JSON, YAML, .env nhanh, an toàn hơn upload lên dịch vụ lạ, và biết khi nào nên quay về git diff.

Bài viết này giúp bạn

• Phân biệt diff trình duyệt vs git diff vs so bằng mắt
• Quy trình 3 phút: dán A → dán B → đọc tô màu
• Ví dụ cụ thể: JSON API, .env staging/prod, typo tên biến
• Checklist trước deploy và lỗi thường gặp
• Case study: review nhanh cho khách không mở IDE

---

Diff text là gì — và khi nào không cần Git?

Diff (difference) là kỹ thuật đánh dấu chỗ khác nhau giữa hai chuỗi text. Thuật toán so theo dòng (hoặc theo ký tự nếu không có xuống dòng), rồi hiển thị:

• Xóa — có ở bản cũ, mất ở bản mới (thường tô đỏ)
• Thêm — chỉ có ở bản mới (thường tô xanh)
• Giữ nguyên — hai bên giống nhau

Git dùng cùng ý tưởng (git diff, diff trong Pull Request). Khác biệt nằm ở nguồn dữ liệu:

Quy tắc chọn nhanh:

Tình huống	Nên dùng
Đã commit / đang review PR	GitHub/GitLab diff, git diff
Hai đoạn từ chat, email, ticket	Diff trình duyệt
Staging .env vs production .env (copy ra ngoài repo)	Diff trình duyệt
So semantic JSON (key xáo thứ tự nhưng cùng nghĩa)	Diff text không đủ — cần format/sort rồi mới diff, hoặc tool so cấu trúc

---

Vì sao so bằng mắt thường fail trên config?

Config và JSON “trông giống nhau” nhưng runtime fail vì:

1. Khoảng trắng / CRLF — PORT=8080 vs PORT=8080 (có space cuối)
2. Typo tên biến — MAX_CONNECTIONS vs MAX_CONN_ECTION (app đọc undefined, fallback mặc định)
3. Dấu phẩy / quote JSON — một key đổi version API (/v1 → /v2) lẫn trong 40 dòng giống hệt
4. Thứ tự key — mắt nghĩ “khác”, thực ra chỉ reorder — hoặc ngược lại

Ví dụ JSON điển hình (timeout và endpoint đổi, retry_count giữ nguyên):

// Text A — bản cũ
{
  "api_endpoint": "https://api.example.com/v1",
  "timeout": 30,
  "retry_count": 3
}

// Text B — bản mới
{
  "api_endpoint": "https://api.example.com/v2",
  "timeout": 60,
  "retry_count": 3
}

Diff sẽ tô xóa v1 / 30 và thêm v2 / 60. Bạn xác nhận ngay: chỉ hai thay đổi kỳ vọng, không đụng retry_count.

Ví dụ .env — lỗi tên biến dễ miss:

# Text A (production — đúng)
DB_HOST=db.prod.example.com
PORT=5432
MAX_CONNECTIONS=100

# Text B (staging — typo)
DB_HOST=db.stage.example.com
PORT=5432
MAX_CONN_ECTION=100

DB_HOST khác nhau là có chủ đích. MAX_CONN_ECTION là bug — mắt hay bỏ qua vì “trông gần giống”. Diff làm dòng đó nổi đỏ/xanh ngay.

---

Cách dùng Diff trên Kawa (3 phút)

1. Mở công cụ Diff
2. Dán bản cũ / staging / trước sửa vào Text A
3. Dán bản mới / production / sau sửa vào Text B
4. Kết quả tự cập nhật: đỏ = xóa, xanh = thêm
5. Nếu đoạn không có xuống dòng, tool highlight theo ký tự — hữu ích khi so một dòng connection string dài

Không cần đăng ký. Không upload server — xử lý trong trình duyệt. Phù hợp khi snippet có secret tạm (vẫn nên che PII/production key trước khi share màn hình).

Checklist trước khi dán

• Đã thống nhất A = cũ, B = mới (đảo chiều → đọc ngược ý nghĩa đỏ/xanh)
• Cùng kiểu xuống dòng nếu có thể (tránh diff “ảo” chỉ vì CRLF vs LF trên file lớn)
• JSON: nếu lệch indent làm nhiễu, format JSON rồi mới diff
• Che secret thật — dùng giá trị giả hoặc *** khi demo / gửi ảnh chụp

---

Diff trình duyệt vs Git — bảng quyết định

Freelancer nhận task “chỉnh giúp config NestJS”: khách paste JSON cũ và JSON mới vào chat. Clone monorepo 2GB chỉ để chạy git diff là lãng phí. Dán vào Diff → liệt kê đúng key đổi → confirm với khách trước khi apply lên server.

---

Case study

Case 1: Outsourcing — review config trước deploy đêm

Tình huống: Lead VN nhận appsettings.Staging.json và appsettings.Production.json từ khách US qua email. Deploy cửa sổ 23:00. IDE chưa mở repo.

Cách làm: Dán staging → A, production → B trên Diff. Xác nhận chỉ ConnectionStrings và Logging:LogLevel khác; không có key lạ bị xóa.

Kết quả: Phát hiện production thiếu key FeatureFlags:NewCheckout mà staging có — hỏi khách trước khi lên prod, tránh rollback lúc nửa đêm.

Case 2: So API response trước/sau hotfix

Tình huống: Backend sửa field amount từ string sang number. QA paste response cũ/mới.

Cách làm: Diff hai JSON. Thấy "amount": "150000" → "amount": 150000 và thêm field currency. Frontend biết cần sửa parse.

Lưu ý: Nếu key bị reorder, diff theo dòng có thể ồn — format cùng style rồi diff lại.

Case 3: Không dùng diff trình duyệt

Tình huống: So toàn bộ nhánh feature 40 file, cần comment từng hunk.

Chọn: Pull Request trên GitLab. Diff browser chỉ hỗ trợ hai khối text — không thay thế review hệ thống.

---

Lỗi thường gặp

1. Đảo A/B rồi kết luận ngược

A = mới, B = cũ → đỏ/xanh đảo nghĩa. Luôn ghi chú A = before.

2. Diff “đỏ hết trang” vì format khác

Một bên minify một dòng, một bên pretty-print → gần như mọi dòng đều khác. Format trước, diff sau.

3. Tưởng diff = so sánh cấu trúc JSON

{"a":1,"b":2} vs {"b":2,"a":1} có thể hiện khác dù cùng dữ liệu. Diff text so chuỗi, không phải semantic equality.

4. Dán binary / minified bundle khổng lồ

Tab trình duyệt đơ. Cắt còn đoạn liên quan, hoặc dùng diff trên máy (diff, Beyond Compare) cho file lớn.

5. Upload secret lên dịch vụ diff lạ

Nhiều site “online diff” gửi text lên server. Với config có credential: ưu tiên tool local-only như Kawa Diff, hoặc so offline.

---

FAQ ngắn (bổ sung)

Q. Có cần cài extension VS Code không?
A. Không, nếu chỉ so hai đoạn paste. Extension hữu ích khi đã mở project; diff web hữu ích khi chưa mở project.

Q. Tiếng Việt / Unicode trong log có sao không?
A. Text Unicode so bình thường theo ký tự/dòng. Encoding lệch (UTF-8 vs Windows-1252) có thể tạo diff “ảo” — thống nhất UTF-8 trước khi so.

Q. Diff xong có export patch không?
A. Tool Kawa tập trung nhìn chỗ khác (highlight). Tạo patch/commit vẫn dùng Git.

---

Tóm tắt

• Mắt dễ miss typo và khoảng trắng trên config dài
• Git cho lịch sử và PR — không phải lúc nào cũng sẵn
• Diff trình duyệt = dán hai bản, đọc đỏ/xanh, không cần Git UI, chạy local

Quy trình gợi ý: format JSON nếu cần → Diff A/B → chỉ deploy khi mọi dòng tô màu đều có chủ đích.

---

Bài và công cụ liên quan