Mẹo cho nhà phát triển: Cách kiểm tra và gỡ lỗi CSS flexbox
bookmark_borderbookmark
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Sofia Emelianova
Công cụ của Chrome cho nhà phát triển giúp gỡ lỗi bố cục CSS flexbox một cách trực quan. Bảng điều khiển Elements (Thành phần) cung cấp cho bạn một Flexbox Editor (Trình chỉnh sửa Flexbox) có thể nhận biết bối cảnh và một lớp phủ có thể tuỳ chỉnh.
Hãy xem video để tìm hiểu cách:
Sử dụng Flexbox Editor (Trình chỉnh sửa Flexbox) để thay đổi các thuộc tính flexbox bằng một thao tác nhấp vào nút thay vì nhập các thuộc tính đó.
Bật/tắt lớp phủ flexbox trong khung nhìn để xem ngay những thay đổi bạn thực hiện.
Sử dụng mục Elements (Thành phần) > Layout (Bố cục) > Flexbox (Hộp xếp linh hoạt) để xem danh sách tất cả các thành phần và xác định vị trí của các thành phần đó trong cây DOM. Ngoài ra, bạn có thể tuỳ chỉnh màu lớp phủ tại đây.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2022-09-01 UTC."],[],[]]