Utilia

Porównywarka kodu (diff)

Porównaj dwie wersje kodu obok siebie lub w jednej kolumnie, z podświetlaniem składni, numerami wierszy, opcjami białych znaków i plikiem diff.

Jak porównać dwa fragmenty kodu

  1. Wklej starą wersję w pole Kod oryginalny, a nową w pole Kod zmieniony.
  2. Wybierz Język albo zostaw Wykryj automatycznie: narzędzie zgadnie język na podstawie kodu i pokaże go obok statystyk.
  3. Wybierz Widok: Obok siebie lub W jednej kolumnie (unified).
  4. Ustaw potrzebne opcje: Ignoruj białe znaki i wcięcia, Ignoruj wielkość liter, Wyróżnij zmienione słowa oraz Pokaż tylko zmiany (3 wiersze kontekstu).
  5. Kliknij Porównaj. Po pierwszym porównaniu wynik aktualizuje się na bieżąco podczas edycji.
  6. Kliknij Kopiuj jako unified diff lub Pobierz .diff, aby wykorzystać zmianę jako łatkę (patch).

Przycisk Zamień strony zamienia obie wersje miejscami, przez co dodania stają się usunięciami i odwrotnie.

Jak czytać wynik porównania

Usunięte wiersze mają czerwone tło i należą do oryginału, a dodane – zielone i należą do nowej wersji. Każdy wiersz zachowuje numer ze swojego pliku, więc od razu przejdziesz do niego w edytorze.

  • Obok siebie pokazuje oba pliki w dwóch ponumerowanych kolumnach. Zmodyfikowany wiersz stoi obok swojej nowej wersji. Z opcją Wyróżnij zmienione słowa zaznaczane są słowa, które zmieniły się w tym wierszu; bez niej oba wiersze zachowują pełne kolory składni.
  • W jednej kolumnie (unified) wyświetla jedną kolumnę, jak w code review: w każdym zmienionym bloku najpierw są usunięte wiersze (−), potem dodane (+), z numerami starego i nowego wiersza.
  • Pokaż tylko zmiany (3 wiersze kontekstu) zwija długie niezmienione fragmenty do znacznika „⋯ niezmienione wiersze: N”, co znacznie ułatwia przeglądanie dużych plików.

Wiersz statystyk podaje liczbę dodanych, usuniętych i niezmienionych wierszy.

Podświetlanie składni

Podświetlanie odbywa się w twojej przeglądarce za pomocą highlight.js. Gramatyka wybranego języka jest wczytywana dopiero przy pierwszym porównaniu, dzięki czemu strona pozostaje lekka. Obsługiwane języki to m.in. JavaScript, TypeScript, Python, Java, C#, C / C++, Go, Rust, PHP, Ruby, CSS, HTML / XML, JSON, YAML, SQL, Bash / Shell i Markdown. Automatyczne wykrywanie opiera się na prostych wskazówkach (słowa kluczowe, nawiasy, parsowanie JSON); jeśli się pomyli, wybierz język samodzielnie albo ustaw Zwykły tekst.

Białe znaki, wcięcia i końce wierszy

Ignoruj białe znaki i wcięcia porównuje wiersze po obcięciu spacji na brzegach i scaleniu ciągów spacji i tabulatorów, więc plik przeformatowany z 2 na 4 spacje albo z tabulatorów na spacje nie pokaże różnic. Końce wierszy Windows (CRLF) i Unix (LF) są normalizowane przed porównaniem, dlatego plik, w którym zmieniły się tylko końce wierszy, jest zgłaszany jako identyczny. Pamiętaj, że białe znaki mają znaczenie w Pythonie, YAML-u i plikach Makefile: wyłącz tę opcję, gdy wcięcia są istotne.

Format unified diff

Eksportowana łatka używa standardowego formatu unified, który czytają git apply, patch i narzędzia do code review: nagłówek z nazwami dwóch plików, a potem bloki (hunks) zaczynające się od @@ -a,b +c,d @@ z trzema wierszami kontekstu wokół każdej zmiany. Pliki nazywają się original i changed i mają rozszerzenie odpowiednie dla języka.

Najczęściej zadawane pytania

Czy mój kod jest wysyłany na serwer?

Nie. Porównanie i podświetlanie działają lokalnie w twojej przeglądarce; kod nigdy nie opuszcza twojego urządzenia.

Czym to narzędzie różni się od porównywarki tekstu?

Korzysta z tego samego mechanizmu porównywania wiersz po wierszu, ale dodaje podświetlanie składni, widok unified, zwijanie kontekstu i obsługę białych znaków dopasowaną do kodu.

Dlaczego dwa wiersze są oznaczone jako zmienione, choć wyglądają tak samo?

Prawdopodobnie różnią się niewidocznymi znakami: spacjami na końcu, tabulatorami zamiast spacji albo twardą spacją. Zaznacz Ignoruj białe znaki i wcięcia, aby to sprawdzić.

Czy pobraną łatkę mogę zastosować w Git?

Tak. Zapisz ją i uruchom patch original.js < changes.diff albo dostosuj nazwy plików w nagłówku i użyj git apply.

Jak duże mogą być fragmenty kodu?

Kilka tysięcy wierszy porównuje się szybko. Jeśli dwa bardzo duże pliki całkowicie się różnią, narzędzie przerywa pracę po kilku sekundach i prosi o porównanie mniejszych części.