Bandingkan Teks / Diff Checker

Apa itu diff checker?

Diff checker membandingkan dua potong teks atau kode dan menyorot apa yang ditambahkan, dihapus, atau diubah. Developer terus-menerus memakai diff: saat review kode, debug perubahan konfigurasi, membandingkan response API, memvalidasi migrasi, dan memahami perubahan sebelum commit.

Membaca diff adalah keterampilan inti developer. Diff memisahkan *perubahan perilaku yang nyata* dari perubahan format yang tidak berbahaya, dan membantumu menemukan satu karakter yang berubah di blok 200 baris. Begitu kamu terbiasa dengan ritme hijau / merah / kuning, review kode jadi jauh lebih cepat.

Dua jenis diff yang paling penting adalah *diff baris* (baris mana yang berubah) dan *diff kata* atau *diff karakter* (apa yang berubah di dalam satu baris). Alat diff yang bagus membuatmu bisa berganti di antara keduanya, tergantung apakah kamu membandingkan kode sumber atau paragraf teks.

Yang akan kamu pelajari saat membandingkan teks

• Diff baris menunjukkan *di mana* perubahan terjadi. Diff kata dan karakter menunjukkan *apa* yang berubah di dalam sebuah baris.
• Whitespace bisa bermakna (Markdown, YAML, Python) atau tidak berpengaruh (sebagian besar kode lain), jadi atur opsi abaikan whitespace sesuai kebutuhan.
• Diff yang terlihat kecil bisa berdampak besar kalau mengubah sebuah nilai, kondisi, route, environment variable, atau feature flag.
• Ketika dua blok besar sangat berbeda, urutkan atau normalkan dulu. Membandingkan dua objek JSON yang belum diurutkan bisa menghasilkan tumpukan perbedaan palsu.

Cara membandingkan dua teks langkah demi langkah

1. 1

   Tempel kedua versinya

   Taruh teks asli di kiri dan versi baru di kanan. Kode, JSON, teks biasa, file konfigurasi, apa pun bisa.

2. 2

   Pilih diff baris atau kata

   Pakai diff baris untuk kode sumber atau data terstruktur. Ganti ke diff kata saat membandingkan paragraf teks yang pilihan katanya penting.

3. 3

   Atur whitespace dan sensitivitas huruf besar kecil

   Aktifkan *abaikan whitespace* kalau kamu hanya peduli pada perubahan yang bermakna; aktifkan *abaikan huruf besar kecil* saat membandingkan log atau teks yang kapitalisasinya tidak penting.

4. 4

   Baca output berwarnanya

   Konten yang dihapus muncul berwarna merah di kiri; konten yang ditambahkan muncul berwarna hijau di kanan. Baris yang diubah sering muncul sebagai satu baris merah dan satu baris hijau yang berdampingan.

5. 5

   Ulangi

   Edit sisi mana pun dan lihat diff-nya diperbarui secara live. Cara ini bagus untuk menyiapkan patch yang rapi sebelum membuka pull request.

Referensi cepat warna dan simbol diff

Konvensi yang dipakai diff checker Coddy, juga oleh git diff, GitHub, dan sebagian besar penampil diff lainnya.

Contoh diff untuk dicoba

API_TIMEOUT=3000

API_TIMEOUT=30000

{  "id": 42,  "status": "draft",  "published": false}

{  "id": 42,  "status": "published",  "published": true}

function total(items) {  let sum = 0;  for (const i of items) sum += i.price;  return sum;}

function total(items) {  return items.reduce((sum, i) => sum + i.price, 0);}

@@ -1,4 +1,4 @@ function greet(name) {-  return 'Hi ' + name;+  return `Hi ${name}`; }

Kesalahan umum saat membaca diff

• Mengabaikan whitespace padahal whitespace itu penting. Markdown, YAML, dan Python semuanya peduli pada indentasi.
• Hanya mereview baris hijau (ditambahkan) dan melewatkan baris merah (dihapus) yang penting.
• Menganggap diff yang bersih membuktikan versi barunya benar. Diff hanya menunjukkan *apa yang berubah*, bukan *apakah perubahannya benar*.
• Membandingkan JSON yang di-minify dengan kode yang sudah diformat tanpa menormalkan salah satu input lebih dulu. Setiap baris akan terlihat berbeda walaupun datanya sama.
• Memercayai diff berdampingan untuk file yang sangat panjang tanpa mencari kata kunci tertentu. Pakai keduanya: pindai dulu, lalu Ctrl+F untuk field yang kamu pedulikan.

FAQ Diff Checker