Cách Chrome DevTools giúp bạn "soi" lỗi UI và thoát cảnh đoán mò

Đừng để việc sửa giao diện trở thành trò chơi "may rủi"

Bạn đã bao giờ rơi vào cảnh hì hục sửa CSS trong mã nguồn (code) suốt 15 phút, lưu lại, rồi quay sang trình duyệt nhấn F5 chỉ để nhận ra... giao diện chẳng thay đổi gì cả? Cảm giác lúc đó ức chế vô cùng, đúng không? Thay vì cứ phải nhảy qua nhảy lại giữa trình chỉnh sửa và trình duyệt, bạn hoàn toàn có thể sử dụng Chrome DevTools để chỉnh sửa trực tiếp và thấy ngay kết quả.

Chrome DevTools không chỉ dành cho lập trình viên chuyên nghiệp. Kể cả bạn là UI Designer muốn kiểm tra khoảng cách hay màu sắc thực tế trên web, đây cũng là công cụ "phải biết". Hiểu rõ nó, bạn sẽ tiết kiệm được hàng giờ đồng hồ ngồi đoán mò xem tại sao cái nút nó lại lệch hay tại sao font chữ nhìn lại lạ thế.

Chỉnh sửa CSS "sống" ngay trên trình duyệt

Tính năng quyền lực nhất của DevTools chính là Inspect Element (Kiểm tra phần tử). Thay vì sửa code rồi chờ build, bạn có thể click chuột phải vào bất kỳ chỗ nào trên trang web và chọn "Kiểm tra". Lúc này, toàn bộ cấu trúc HTML và các thuộc tính CSS sẽ hiện ra trước mắt.

Bạn có thể thử thay đổi màu nền, tăng kích thước font chữ hay chỉnh lại lề (margin/padding) ngay tại cột Styles. Những thay đổi này sẽ hiện lên ngay lập tức. Đây là cách tuyệt vời để bạn "thử nghiệm" trước khi chốt hạ và đưa vào code chính thức trong Cách VS Code Extensions giúp bạn "hack" thời gian để tăng tốc quy trình làm việc.

Sau khi chỉnh sửa xong và thấy ưng ý, bạn chỉ cần sao chép các dòng CSS đó dán ngược lại vào dự án là xong. Không còn cảnh ngồi đoán xem thông số bao nhiêu là vừa mắt nữa đâu!

"Cân" mọi loại màn hình với chế độ Device Mode

Làm web ngày nay mà không chuẩn giao diện thích ứng (responsive) thì coi như hỏng. Thay vì phải đi mượn đủ loại điện thoại từ iPhone đến Samsung để test, Chrome DevTools cung cấp cho bạn chế độ Device Mode cực kỳ xịn sò. Bạn có thể giả lập màn hình của hầu hết các thiết bị phổ biến hiện nay.

Trong chế độ này, bạn sẽ thấy rõ component của mình trông như thế nào khi màn hình bị bóp nhỏ lại. Nếu đã quen dùng Cách Figma Auto Layout giúp bạn "cân" mọi loại màn hình, bạn sẽ thấy việc kiểm tra này trên trình duyệt là bước xác nhận cuối cùng cực kỳ quan trọng để đảm bảo thiết kế và thực tế khớp nhau 100%.

• Kéo thả thanh lề để xem giao diện biến đổi linh hoạt (fluid layout).
• Kiểm tra xem các điểm ngắt (breakpoints) đã hoạt động đúng chưa.
• Giả lập tốc độ mạng chậm để xem giao diện tải ra sao.

Đừng quên ghé thăm DIA DEMY để cập nhật thêm các kỹ thuật tối ưu giao diện mới nhất nhé!

Kiểm soát "long mạch" dữ liệu qua tab Network

Giao diện đẹp là một chuyện, nhưng giao diện có chạy mượt và hiện đúng dữ liệu hay không lại là chuyện khác. Khi bạn nhấn một cái nút mà dữ liệu không hiện ra, tab Network (Mạng) sẽ cho bạn biết chính xác yêu cầu (request) đó có gửi đi thành công hay không, hoặc máy chủ (server) đang trả về lỗi gì.

// Ví dụ cách bạn nhìn thấy dữ liệu trả về trong tab Network
{
  "status": "success",
  "data": {
    "user": "DIA DEMY student",
    "course": "UXUI Design & Web Development"
  }
}

Việc hiểu tab Network giúp bạn không còn phải lúng túng khi gặp lỗi trắng trang. Bạn sẽ biết ngay là do đường truyền chậm, do API (giao diện lập trình ứng dụng) bị lỗi hay do bạn viết nhầm tham số nào đó. Bạn có thể tham khảo thêm tài liệu chính thức từ Chrome DevTools Documentation để đào sâu hơn các tính năng nâng cao.

Nhưng liệu bạn có biết rằng, ngay cả khi mọi thứ chạy hoàn hảo trên máy bạn, người dùng vẫn có thể thấy website của bạn chậm như rùa bò không? Bí mật nằm ở một tab khác mang tên Lighthouse, nơi sẽ chấm điểm sức khỏe cho website của bạn đấy.