Công cụ DevTools (trong bất kỳ trình duyệt nào) là một công cụ phát triển vô
cùng quý giá đối với những nhà phát triển CSS. Nếu bạn cần xem (và tương tác
với) các kiểu dáng trên một phần tử cụ thể nào đó, việc kiểm tra nhanh chỉ
cách vài cú nhấp chuột.
Nhấp chuột phải vào một thứ gì đó và chọn “Kiểm tra/Inspect” hoặc mở DevTools
và sử dụng các công cụ lựa chọn để chọn những gì bạn cần.
|
| simple-inspect |
Nhưng… đôi khi có thể khó khăn hoặc không thể tiếp cận phần tử mà bạn cần
nhắm tới trong DevTools. Các sự kiện DOM cần thiết để làm việc với DevTools có
thể gây cản trở.
Chẳng hạn, nếu tôi chèn một phần tử vào trong sự kiện “mouseenter” của một
phần tử khác cụ thể, sau đó loại bỏ nó trong sự kiện “mouseleave”.
|
|
disappearing-element |
Dù có cố gắng thế nào, tôi vẫn không thể nhắm tới phần tử vừa được thêm vào để
kiểm tra.
Chrome DevTools có thể mô phỏng một kiểu :hover, nhưng điều này thực sự không
hữu ích ở đây. Nó không kích hoạt sự kiện DOM, chỉ mô phỏng trạng thái CSS.
|
| hover-style |
Bí quyết là kích hoạt Debugger đúng lúc bạn cần
Một câu lệnh debugger; khi DevTools mở, hơi như đóng băng DOM. Không có sự
kiện nào được kích hoạt nữa và việc thực thi script hoàn toàn tạm dừng.
Nhưng… bạn vẫn có thể sử dụng DevTools!
Đây là cơ hội của bạn để chọn phần tử mà thông thường khó khăn để chọn và thực
hiện những gì bạn cần. Bạn có thể đặt câu lệnh debugger; ngay trong mã của
mình tại nơi bạn cần (nhớ rằng DevTools phải được mở để nó hoạt động). Hoặc
bạn có thể kích hoạt nó bằng một setTimeout() ngay trong consle
setTimeout(function() { debugger; }, 3000);
|
|
Hãy dành cho bản thân một vài giây để có được DOM theo cách bạn cần, |
Tôi đã thử điều này và nó hoạt động trên Chrome, Firefox, Edge và Safari, vì vậy
đây là một mẹo thân thiện với DevTools đa trình duyệt. Tuy nhiên, chỉ Chrome và
Safari cho phép bạn chọn phần tử bằng chuột khi ở chế độ gỡ lỗi. Vì vậy, trên
Edge hoặc Firefox, bạn có thể phải tham khảo tab Elements và tìm thủ công những
gì bạn cần.