Nhà phát triển gỡ lỗi các thành phần DOM trên trang của bạn với một dòng mã
Đã bao nhiêu lần bạn vật lộn để tìm một vấn đề cụ thể làm rối bố cục CSS của bạn? Từ việc thiếu các thẻ đóng cho đến các anh chị em lồng nhau không đúng cách, các vấn đề CSS là rất nhiều. Và với trình gỡ lỗi bố cục CSS này, quá trình chỉ dễ dàng hơn nhiều.
Một dòng mã này sẽ đi qua DOM và phác thảo từng yếu tố với một màu sắc khác nhau. Bằng cách này bạn có thể hình dung tốt hơn CSS của bạn hoạt động như thế nào (hoặc không hoạt động) và nhanh chóng phát hiện ra các khu vực có vấn đề.
GitHub cho phép các nhà phát triển tiết kiệm một chút mã gọi là ý. Đây là tất cả các nguồn mở và miễn phí tiết kiệm cho sử dụng của riêng bạn. Đó là lý do tại sao trình gỡ lỗi CSS này rất hữu ích. Nó kết hợp năng lực hiện đại của DevTools Chrome với tính đơn giản của bookmarklets trình duyệt.
Để sử dụng mã này, trước tiên bạn nên sao chép phiên bản nào bạn thích nhất từ trang Gist. Sau đó, bạn dán mã đó vào cửa sổ Terminal của bạn và chạy nó. Bạn nên kết thúc với một kết quả như thế này:
Bây giờ, nó có thể lưu mã này dưới dạng bookmarklet trong thanh công cụ trình duyệt của bạn. Nhưng nếu bạn là người dùng Chrome, bạn có thể lưu mã JS này dưới dạng đoạn mã cái nào dễ chạy hơn nhiều.
Đoạn mã này có thể là nhớ lại nhiều lần tại một nút bấm. Bạn có thể phân tích từng trang, có đầy đủ các phác thảo CSS đầy màu sắc này, cho các yếu tố DOM của phụ huynh và trẻ em.
Tuy nhiên, bạn không nên chỉ giới hạn ở Chrome. Đoạn trích này hoạt động cho tất cả các trình duyệt chính, bao gồm Firefox, Safari, Opera và Internet Explorer.
Và đối với bất kỳ ai tò mò muốn tìm hiểu cách thức hoạt động của nó, bạn có thể kiểm tra phiên bản chú thích với ý kiến cho từng dòng mã.
Gist này có đầy đủ ý kiến người dùng liên quan và cập nhật từ các nhà phát triển khác giúp làm cho nó nhỏ hơn và hiệu quả hơn. Nhưng ở trạng thái hiện tại, đây là một trong những cách đơn giản nhất để gỡ lỗi bất kỳ DOM với một dòng mã.
