Đã bao nhiêu lần bạn phải chật vật để tìm ra vấn đề làm hỏng layout của bạn?
Từ việc thiếu các thẻ đóng cho đến việc các phần tử anh/chị/em lồng nhau không đúng cách.
Các vấn đề với CSS là rất nhiều. Và với CSS Layout Debugger này, quá trình sửa lỗi css /dàn layout trở nên dễ dàng hơn rất nhiều.
Một dòng code này sẽ chạy qua DOM và làm cho mỗi phần tử hiện ra với một màu khác nhau.
Bằng cách này, bạn có thể hình dung rõ hơn cách CSS của bạn hoạt động (hoặc không hoạt động) và nhanh chóng phát hiện ra các chỗ CSS có vấn đề.
Trình gỡ lỗi CSS (CSS Layout Debugger) này rất hữu ích. Nó kết hợp sức mạnh hiện đại của DevTools Chrome với sự đơn giản của tính năng bookmarklets trên trình duyệt.
Hướng dẫn sử dụng CSS Layout Debugger để gỡ lỗi CSS
Để sử dụng đoạn mã này, trước tiên bạn nên sao chép bất kỳ phiên bản nào bạn thích nhất từ trang Gist, tại đây
Hoặc Copy đoạn mã này:
[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})Sau đó, bạn dán đoạn mã này vào cửa sổ Console trên trình duyệt bằng 3 cách sau:
- F12 -> Console – > Paste
- Click chuột phải -> Inspect -> Console -> Paste
- Ctrl + Shift + I -> Console -> Paste
Và nhấn Enter
Kết quả bạn nhận được sẽ trông giống như thế này:
Yên tâm là đoạn mã này hoạt động với cả Firefox, Safari, Opera, thậm chí là IE.
Tổng kết
CSS là một bộ môn vừa là khoa học vừa là nghệ thuật. Bạn sẽ cần phải luyện tập thật nhiều.
Hãy sử dụng CSS Layout Debugger để dần dần trở thành chuyên gia Front-End nhé.
