Bạn sẽ cần CSS Layout Debugger để Debug CSS của mình

0
198

Đã 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.

Sau khi sử dụng CSS Layout Debugger
Sau khi sử dụng CSS Layout Debugger

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:

  1. F12 -> Console – > Paste
  2. Click chuột phải -> Inspect -> Console -> Paste
  3. 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:

Sử dụng CSS Layout Debugger để gỡ lỗi CSS
Sử dụng CSS Layout Debugger để gỡ lỗi CSS

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é.

LEAVE A REPLY

Please enter your comment!
Please enter your name here