So sánh hai đoạn code online: đọc diff đúng cách và biết rõ giới hạn của công cụ
Công cụ đặt hai phiên bản code cạnh nhau rồi đánh dấu từng dòng là thêm, bớt hay giữ nguyên, xem được ở hai kiểu trình bày là một cột kiểu git diff hoặc hai cột song song. Số dòng của cả bản cũ lẫn bản mới hiện sẵn bên trái, kèm ba con số thống kê để bạn ước lượng quy mô thay đổi trước khi đọc chi tiết.
Tính năng nổi bật
- Hai ô dán code riêng cho bản cũ và bản mới, kết quả dựng lại ngay khi bạn gõ
- Chế độ Unified gộp mọi thay đổi vào một bảng, mỗi dòng có dấu cộng hoặc dấu trừ ở đầu
- Chế độ Split tách hai cột, bản cũ bên trái với dòng bị bỏ tô đỏ, bản mới bên phải với dòng thêm tô xanh
- Hai cột số dòng độc lập cho bản cũ và bản mới trong chế độ Unified
- Thống kê ba con số ngay trên bảng: số dòng thêm, số dòng bớt và số dòng không đổi
- Nút đổi vị trí hoán đổi nội dung hai ô khi bạn dán nhầm thứ tự
- Nút sao chép xuất toàn bộ diff ra dạng văn bản có tiền tố cộng, trừ và khoảng trắng
- Phông chữ đơn cách và giữ nguyên khoảng trắng nên thụt đầu dòng hiển thị đúng như trong tệp gốc
- Chạy hoàn toàn bằng JavaScript trên trình duyệt, code bạn dán vào không được gửi lên máy chủ
Khi nào cần một trình xem diff nằm ngoài hệ thống quản lý mã nguồn
Phần lớn thời gian bạn xem diff ngay trong công cụ quản lý mã nguồn, và đó là chỗ tốt nhất để xem. Nhưng có những lúc code cần so lại không nằm trong kho lưu trữ nào: một đoạn hàm đồng nghiệp gửi qua tin nhắn, cấu hình lấy từ máy chủ đang chạy so với cấu hình trong kho, đoạn code sinh ra từ công cụ so với đoạn bạn đã sửa tay, hai bản trả về của cùng một API ở hai môi trường, hoặc hai bản của một tệp nhật ký. Trong những tình huống đó, tạo một kho lưu trữ tạm chỉ để chạy một lệnh diff là quá phiền. Dán hai đoạn vào đây nhanh hơn nhiều. Điểm cần nhớ là công cụ này so theo dòng và dùng cách khớp dòng đơn giản, nên nó phù hợp để soi nhanh chứ không thay được diff của hệ thống quản lý mã nguồn khi bạn cần độ chính xác cao trên tệp lớn.
Lợi ích khi sử dụng
- Soi được thay đổi ngay cả khi code không nằm trong kho lưu trữ nào
- Hai kiểu trình bày cho hai nhu cầu khác nhau: đọc nhanh và đối chiếu kỹ
- Ba con số thống kê cho biết ngay thay đổi là nhỏ hay là viết lại cả khối
- Không cần cài đặt, mở trình duyệt trên bất kỳ máy nào cũng dùng được
- Code nhạy cảm như khóa cấu hình hay logic nội bộ không rời khỏi máy bạn
Cách so sánh hai đoạn code
- 1Dán phiên bản cũ vào ô bên trái, tức bản bạn coi là mốc để so, và phiên bản mới vào ô bên phải.
- 2Nhìn ba con số thống kê phía trên bảng để biết quy mô thay đổi trước khi đọc từng dòng.
- 3Chọn Unified nếu bạn quen với cách trình bày của git diff, hoặc Split nếu muốn nhìn hai bản song song.
- 4Cuộn trong bảng kết quả và đối chiếu số dòng ở cột bên trái với vị trí tương ứng trong trình soạn thảo của bạn.
- 5Bấm nút sao chép nếu cần dán kết quả vào tin nhắn hay ghi chú, và bấm đổi vị trí nếu ban đầu bạn dán ngược thứ tự hai bản.
Unified và Split khác nhau ở chỗ nào
Chế độ Unified dựng một bảng duy nhất theo đúng trình tự dòng đã ghép: cột đầu là số dòng ở bản cũ, cột thứ hai là số dòng ở bản mới, cột thứ ba là dấu cộng hoặc dấu trừ, còn lại là nội dung. Dòng bị bỏ chỉ có số ở cột trái, dòng thêm mới chỉ có số ở cột phải, dòng giữ nguyên có cả hai. Cách này gọn, dễ sao chép và giống thứ bạn thấy trong yêu cầu gộp mã nên đọc quen mắt. Chế độ Split dựng hai cột riêng: cột trái lọc ra những dòng không phải là thêm mới, cột phải lọc ra những dòng không phải là bị bỏ. Vì hai cột được dựng độc lập chứ không chèn dòng trống để căn nhau, khi số dòng thêm và số dòng bớt lệch nhau thì hai bên sẽ trôi dần khỏi vị trí ngang hàng. Kết luận thực dụng: dùng Split khi thay đổi chủ yếu là sửa nội dung trong dòng và số dòng hai bên gần bằng nhau, dùng Unified khi có chèn hoặc xóa cả khối.
Cách khớp dòng ở đây là một phép thử đơn giản, không phải thuật toán Myers
Công cụ duyệt song song hai danh sách dòng. Nếu dòng hiện tại của hai bên giống hệt nhau, nó đánh dấu giữ nguyên và tiến cả hai con trỏ. Nếu khác, nó kiểm tra xem dòng bên cũ có xuất hiện ở bất kỳ đâu trong bản mới hay không: nếu có, nó coi dòng bên mới là thêm vào và chỉ tiến con trỏ bản mới; nếu không, nó coi dòng bên cũ là bị bỏ. Nhờ mẹo này, việc chèn thêm một khối vào bản mới được nhận ra khá đúng, khác hẳn cách so cứng theo chỉ số dòng. Nhưng phép thử đó vấp ngay khi code có nhiều dòng lặp lại, mà code thì đầy dòng lặp: dấu ngoặc nhọn đóng, dòng trống, các dòng khai báo nhập khẩu. Một dấu ngoặc đóng ở bản cũ gần như chắc chắn xuất hiện đâu đó trong bản mới, nên nó không bao giờ bị đánh dấu là bỏ đi, khiến công cụ tiếp tục hút dòng từ bản mới và tạo ra một chuỗi thêm mới dài bất thường. Thấy hiện tượng đó thì đừng tin con số thống kê, hãy cắt nhỏ đoạn code rồi so lại từng phần.
Kết quả sao chép ra không phải bản vá áp dụng được
Nút sao chép ghép mỗi dòng thành dấu cộng, dấu trừ hoặc khoảng trắng, rồi thêm một dấu cách, rồi tới nội dung. Định dạng này đọc được bằng mắt nhưng khác định dạng unified diff thật ở hai điểm quan trọng. Thứ nhất, unified diff thật không có dấu cách sau dấu cộng và dấu trừ, nên mọi dòng trong kết quả sao chép đều bị thừa một ký tự so với nội dung gốc. Thứ hai, không có dòng tiêu đề đoạn dạng hai dấu a còng kèm vị trí và độ dài của mỗi bên, cũng không có dòng ghi tên tệp cũ và tệp mới. Thiếu hai thứ đó thì lệnh áp dụng bản vá không biết phải sửa tệp nào và từ dòng nào, nên sẽ báo lỗi. Vì vậy hãy dùng kết quả sao chép để trao đổi với người khác, dán vào ghi chú hay tin nhắn, chứ đừng lưu thành tệp vá rồi mong áp dụng được. Muốn có bản vá thật, hãy dùng lệnh diff của hệ thống quản lý mã nguồn trên hai tệp thật.
Chuẩn hóa định dạng trước khi so để diff không bị nhiễu
Rất nhiều diff dài vô nghĩa sinh ra từ những khác biệt không liên quan tới logic. Nguyên nhân hay gặp nhất là ký tự xuống dòng: Windows dùng cặp ký tự về đầu dòng và xuống dòng, còn macOS và Linux chỉ dùng một ký tự xuống dòng, nên một tệp đi qua hai hệ điều hành có thể hiện ra khác biệt ở toàn bộ các dòng. Cách phòng là khai báo text bằng auto trong tệp thuộc tính của kho lưu trữ và thống nhất kiểu xuống dòng trong cấu hình trình soạn thảo. Nguyên nhân thứ hai là thụt đầu dòng bằng phím tab ở bản này và bằng dấu cách ở bản kia, hoặc số dấu cách khác nhau; chạy cùng một trình định dạng lên cả hai bản trước khi dán vào đây sẽ xóa sạch loại nhiễu này. Nguyên nhân thứ ba là khoảng trắng thừa ở cuối dòng, thứ mắt không thấy nhưng máy vẫn tính là khác. Nguyên nhân thứ tư là thiếu dòng trống ở cuối tệp. Bỏ ra một phút chuẩn hóa trước khi so thường tiết kiệm được mười phút đọc diff sai.
Nên soi kỹ những gì khi đọc diff trước lúc gộp mã
Ba con số thống kê chỉ cho biết quy mô, không cho biết mức độ rủi ro. Có những thay đổi một dòng nguy hiểm hơn hẳn một trăm dòng đổi tên biến. Danh sách đáng soi kỹ: các dòng ghi nhật ký gỡ lỗi còn sót lại và những đoạn tạm bị bỏ quên; chuỗi bí mật viết thẳng trong code như khóa API, mật khẩu cơ sở dữ liệu hay chuỗi kết nối, vì một khi đã vào lịch sử kho lưu trữ thì xóa rất phiền; thay đổi ở toán tử so sánh, đặc biệt là đổi giữa lớn hơn và lớn hơn hoặc bằng, hay đảo thứ tự tham số của một hàm có hai tham số cùng kiểu; thay đổi trong tệp khóa phiên bản của trình quản lý gói, vì một phụ thuộc nhảy phiên bản chính có thể phá vỡ dựng bản; các tệp di trú cơ sở dữ liệu, nhất là lệnh xóa cột hoặc xóa bảng vốn không hoàn tác được; và các dòng cấu hình liên quan tới môi trường chạy thật. Đọc diff theo thứ tự từ đầu tệp xuống giúp bạn nắm được mạch thay đổi thay vì nhảy cóc và hiểu sai bối cảnh.
Câu hỏi thường gặp (FAQ)
Công cụ so được những ngôn ngữ lập trình nào?
Tất cả, vì nó so văn bản thuần theo từng dòng chứ không phân tích cú pháp. JavaScript, TypeScript, Python, PHP, Java, Go, C, SQL, HTML, CSS, JSON, YAML hay bất kỳ tệp dạng chữ nào đều dùng được. Đổi lại, công cụ không tô màu cú pháp và không hiểu ngữ nghĩa của code.
Nên chọn Unified hay Split?
Chọn Split khi hai bản có số dòng gần bằng nhau và thay đổi chủ yếu nằm trong nội dung từng dòng, vì nhìn song song dễ đối chiếu hơn. Chọn Unified khi có chèn hoặc xóa cả khối, vì hai cột của Split không tự chèn dòng trống để căn nhau nên sẽ lệch hàng.
Code tôi dán vào có bị gửi lên máy chủ không?
Không. Toàn bộ việc tách dòng, khớp dòng và dựng bảng chạy bằng JavaScript ngay trong trình duyệt, không có lời gọi mạng nào mang nội dung đi. Đóng tab là mọi thứ biến mất, không có lịch sử nào được lưu, nên bạn dùng được với code nội bộ chưa công bố.
Vì sao gần như cả bản mới bị đánh dấu là thêm vào?
Thường vì code có nhiều dòng lặp lại như dấu ngoặc đóng hoặc dòng trống. Cách khớp dòng ở đây kiểm tra một dòng cũ có xuất hiện ở đâu đó trong bản mới hay không, mà những dòng lặp thì luôn xuất hiện, nên công cụ liên tục hút dòng từ bản mới. Hãy cắt nhỏ đoạn code rồi so lại từng phần.
Công cụ có nhận ra một khối code bị dời chỗ không?
Không nhận ra như một lần dời. Khối đó sẽ hiện thành một cụm dòng bị bỏ ở vị trí cũ và một cụm dòng thêm vào ở vị trí mới. Muốn thấy đúng bản chất dời chỗ, hãy dùng diff của hệ thống quản lý mã nguồn với tùy chọn phát hiện khối chuyển vị trí.
Kết quả bấm sao chép có dùng làm tệp vá được không?
Không. Nó thiếu dòng tiêu đề đoạn dạng hai dấu a còng và tên tệp, đồng thời có thêm một dấu cách sau dấu cộng hoặc dấu trừ nên nội dung mỗi dòng bị lệch một ký tự. Kết quả này để đọc và trao đổi với đồng nghiệp, còn muốn bản vá áp dụng được thì phải sinh bằng lệnh diff thật.
Có tô sáng phần chữ thay đổi bên trong một dòng không?
Không. Đơn vị so sánh nhỏ nhất ở đây là cả dòng, nên đổi một ký tự cũng khiến cả dòng hiện thành một dòng bỏ đi kèm một dòng thêm vào. Khi cần soi khác biệt ở mức từ trong một dòng dài, cách nhanh nhất là tách dòng đó thành nhiều dòng ngắn rồi so lại.
Có so được bằng cách tải tệp lên không?
Không, công cụ chỉ nhận nội dung dán trực tiếp vào hai ô. Với tệp mã nguồn thì mở bằng trình soạn thảo, chọn tất cả rồi dán sang là xong. Cách này cũng có lợi là nội dung không bao giờ rời khỏi trình duyệt của bạn.
So được đoạn code dài bao nhiêu dòng?
Không có giới hạn cứng, nhưng bảng kết quả được dựng lại mỗi lần bạn gõ và mỗi dòng là một phần tử trong trang, nên với vài nghìn dòng trình duyệt bắt đầu giật. Với tệp lớn, nên cắt theo từng hàm hoặc từng khối vài trăm dòng, vừa nhanh vừa dễ đọc.
Việc so sánh có phân biệt chữ hoa chữ thường không?
Có, và cũng phân biệt cả khoảng trắng. Hai dòng chỉ khác nhau ở một chữ viết hoa hay một dấu cách thừa vẫn bị coi là khác nhau. Nếu bạn muốn bỏ qua những khác biệt đó, hãy chuẩn hóa cả hai bản bằng chức năng tìm và thay thế trong trình soạn thảo trước khi dán vào.
Vì sao hai tệp giống hệt nhau mà vẫn báo khác toàn bộ?
Khả năng cao là khác kiểu ký tự xuống dòng: một bản dùng cặp ký tự kiểu Windows, bản kia dùng một ký tự kiểu Linux. Mắt không thấy nhưng máy tính là khác. Hãy đổi kiểu xuống dòng của cả hai bản về cùng một chuẩn trong trình soạn thảo rồi so lại.
So hai tệp JSON bằng công cụ này có ổn không?
Chỉ ổn khi hai tệp đã được định dạng cùng kiểu và các khóa giữ cùng thứ tự. JSON không quy định thứ tự khóa, nên hai tệp mang đúng cùng dữ liệu vẫn có thể khác nhau về dòng. Với JSON, nên dùng công cụ so sánh theo cấu trúc khóa và giá trị thay vì so theo dòng.
Từ khóa liên quan
- so sánh code online
- code diff viewer online
- công cụ so sánh code miễn phí
- compare code online
- git diff online
- unified diff và split diff
- so sánh hai phiên bản file code
- xem khác biệt giữa hai đoạn code
- code review trước khi merge
- so sánh file cấu hình server
- diff theo dòng là gì
- thuật toán diff myers
- lỗi crlf và lf khi so sánh file
- tab hay space thụt đầu dòng
- so sánh file json online
- công cụ diff không cần cài đặt
- so sánh code javascript online
- so sánh câu lệnh sql hai phiên bản
- tìm dòng code gây lỗi bằng diff
- xuất diff dạng cộng trừ để chia sẻ
