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, sau đó trình gỡ lỗi sẽ kích hoạt và bạn có thể kiểm tra khi cần thiết. |
Nhận xét