Làm Đẹp / Rút Gọn Code

Định dạng code lộn xộn cho dễ đọc hoặc rút gọn để đưa lên production. Công cụ xử lý JavaScript, CSS và HTML hoàn toàn trong trình duyệt của bạn, nên nội dung bạn dán vào không bao giờ được tải lên máy chủ.

Các bước sử dụng

1. Chọn Ngôn ngữ ở phía trên: JS, CSS hoặc HTML.
2. Chọn Chế độ: Beautify (căn lề lại và giãn dòng), Minify (xóa comment và khoảng trắng), hoặc Obfuscate (chỉ dành cho JavaScript — làm code khó đọc hơn).
3. Dán code của bạn vào ô Đầu vào bên trái.
4. Nhấn Chạy. Nút này bị vô hiệu hóa cho đến khi bạn nhập code.
5. Xem kết quả đã định dạng ở ô Kết quả, rồi nhấn Sao chép để sao chép vào bộ nhớ tạm.

Làm rối mã — khiến JavaScript khó đọc hơn

Chọn ngôn ngữ JS và chế độ Obfuscate. Có ba ô tick điều khiển việc này, cả ba đều được bật sẵn:

• Đổi tên biến cục bộ — các biến cục bộ trở thành những tên ngắn vô nghĩa như _0x3.
• Mã hoá chuỗi (dạng \xNN) — 'hello' thành "\x68\x65\x6c\x6c\x6f", với JavaScript thì đây vẫn đúng là chuỗi cũ.
• Xoá comment và thụt lề — comment biến mất, khoảng trắng đầu dòng và dòng trống biến mất, còn các dấu xuống dòng được giữ lại.

Sau mỗi lần chạy, một thanh tóm tắt cho biết đã đổi bao nhiêu tên và mã hoá bao nhiêu chuỗi, kèm danh sách từng cặp tên gốc → tên mới để bạn thấy chính xác điều gì đã thay đổi.

Làm rối mã không phải là biện pháp bảo mật. Nó chỉ khiến việc đọc lướt tốn công hơn, không hơn thế. Mọi đoạn code gửi tới trình duyệt đều có thể khôi phục, vì trình duyệt buộc phải chạy được nó — người quyết tâm sẽ lấy lại được. Đừng bao giờ dùng cách này để giấu khoá API, đoạn kiểm tra bản quyền, mật khẩu hay bất cứ thứ gì thật sự cần giữ bí mật. Hãy đặt chúng ở phía máy chủ.

Ở đây tính đúng đắn được đặt trên độ "rối", vì một lần đổi tên sai sẽ làm hỏng code của bạn trong im lặng, còn làm rối yếu thì chỉ khiến bạn hơi thất vọng. Một cái tên chỉ được đổi khi mọi lần xuất hiện của nó đều chứng minh được là biến cục bộ, và mọi lần xuất hiện đều nằm trong vùng mà biến đó tồn tại. Biến toàn cục, thuộc tính của object, khoá của object, thuộc tính viết tắt ({ name }), thành viên của class và bất cứ thứ gì có thể bị gọi từ ngoài đoạn code đều được giữ nguyên. Nếu code có eval, with hoặc Function, việc đổi tên bị tắt hoàn toàn và công cụ sẽ báo cho bạn biết — vì chúng có thể gọi tới biến qua tên, nên không đổi tên nào chứng minh được là an toàn.

Mẹo

• Chế độ Beautify dùng thụt lề cố định 2 khoảng trắng cho cả ba ngôn ngữ.
• Obfuscate bị vô hiệu hoá khi bạn chọn CSS hoặc HTML, và khi chuyển khỏi JS thì chế độ tự quay về Beautify.
• Nếu không có tên nào được đổi thì nhiều khả năng code của bạn nằm hết ở cấp ngoài cùng. Bọc nó trong một hàm sẽ cho công cụ những biến cục bộ mà nó chứng minh và đổi tên được.
• Hãy chạy Beautify trước nếu bạn còn muốn giữ lại code đang làm rối — bản đã làm rối là thứ để đem đi dùng, không phải thứ để sửa tiếp.
• Việc đổi ngôn ngữ hay chế độ không tự động chạy lại — hãy nhấn Chạy lần nữa sau mỗi thay đổi.
• Mọi thứ chạy phía trình duyệt, nên bạn có thể yên tâm dán code riêng tư hoặc chưa rút gọn.

Minify cho JS được thiết kế thận trọng: nó xóa comment và thụt lề nhưng vẫn giữ các dấu xuống dòng để cơ chế tự chèn dấu chấm phẩy (ASI) không làm hỏng code. Nó không đổi tên biến hay dồn tất cả về một dòng.

Câu hỏi thường gặp

Minify có đổi tên hay làm rối tên biến không?

Không. Minify CSS và HTML xóa comment và dồn khoảng trắng, còn minify JS chỉ xóa comment, thụt lề và dòng trống. Tên biến luôn được giữ nguyên. Việc đổi tên chỉ xảy ra ở chế độ Obfuscate, và chỉ với những tên chắc chắn là biến cục bộ.

Làm rối mã có làm code chạy khác đi không?

Về nguyên tắc là không, và công cụ từ chối mọi phép biến đổi mà nó không chứng minh được là an toàn. Chuỗi được mã hoá lại thành giá trị y hệt, comment và thụt lề vốn không mang ý nghĩa, còn việc đổi tên chỉ giới hạn ở các định danh đã chứng minh là cục bộ. Có một lưu ý đáng nhớ: nếu code của bạn đọc thuộc tính .name của chính một hàm thì việc đổi tên sẽ làm chuỗi đó khác đi. Hãy kiểm thử kết quả trước khi đem đi dùng.

Không có tên nào được đổi. Có phải công cụ bị lỗi không?

Nhiều khả năng là không. Các khai báo ở cấp ngoài cùng có thể bị gọi từ bên ngoài đoạn code bạn dán vào nên không bao giờ được đổi tên; và chỉ cần một lần sử dụng không chứng minh được — làm thuộc tính, làm khoá của object, hay viết tắt — là cái tên đó bị loại ở mọi nơi. Thanh tóm tắt sẽ cho biết trường hợp nào đã xảy ra.

Tôi lấy lại code gốc được không?

Không lấy lại được từ công cụ này. Việc đổi tên là một chiều: tên gốc không còn trong kết quả. Hãy giữ mã nguồn của bạn và xem bản đã làm rối như một sản phẩm build.

Code của tôi có bị gửi lên máy chủ không?

Không. Toàn bộ việc làm đẹp và rút gọn diễn ra ngay trong trình duyệt bằng thư viện js-beautify, nên code không bao giờ rời khỏi thiết bị của bạn.

Tôi có thể xử lý nhiều ngôn ngữ cùng lúc không?

Không. Mỗi lần chạy chỉ chọn một ngôn ngữ. Nếu có nhiều loại code, hãy xử lý từng đoạn riêng bằng cách chuyển nút Ngôn ngữ rồi nhấn Chạy lại.