Chrome Dev Tools là một bộ công cụ không thể thiếu cho Web Developer khi phát triển web trên Google Chrome. Nó cho phép ta có thể kiểm tra cấu trúc HTML của web, debug javascript, … Nhưng bên cạnh đó Chrome Dev Tools còn có rất nhiều chức năng mà có thể bạn chưa biết
1. Chrome Dev Tools dạng dọc
Bình thường khi chúng ta mở Chrome Dev Tools (nhấn F12 hoặc Inspect Element) thì nó sẽ nằm ở bên dưới của Google Chrome. Nhưng nó còn có thể chuyển sang dạng dọc như hình dưới đây:
Khi ở dạng dọc, Chrome Dev Tools rất thích hợp để ta phát triển các web responsive. Ta có thể kéo độ rộng của nó to hoặc nhỏ để phù hợp với độ phần giải của từng thiết bị desktop, mobile.
2. Thay đổi trạng thái của element
Nếu bạn làm front-end thì rất hay gặp trường hợp khi ta muốn kiểm tra CSS của một element khi hover như thế nào. Bình thường ta sẽ phải mở file CSS rồi tìm đoạn viết cho hover đó.
Nhờ có Chrome Dev Tools mà ta sẽ không phải mất công làm như trên nữa. Nó cho phép chúng ta có thể bật/tắt trạng thái của element (hover, active, focus, visisted).
3. Hiển thị code js dễ đọc hơn
Khi chúng ta muốn đọc code của js ngay trên Chrome Dev Tools thì có thể chọn tab Source và chọn file cần xem (trên hình là source của jQuery).
Nhưng chúng ta có thể gặp một vấn đề là code đã được minify lại để tăng tốc độ load nên code sẽ rất khó đọc. Vì thế Chrome Dev Tools đã cung cấp chức năng format lại code để dễ đọc hơn. (Lưu ý là vẫn có để đặt breakpoint trên code đã được format).
4. Đặt breakpoint cho element
Một tính năng nữa mình thấy rất hay ở Chrome Dev Tools, đó là cho phép bạn đặt breakpoint khi javascript thay đổi attribute, child element, xóa element.
5. Break JavaScript trong source
Một tính năng nữa cũng rất thú vị khi debug javascript đó là cho phép bạn dừng chạy code tại 1 điểm nào đó do ta quy định. Bạn chỉ đơn giản đặt code debugger; tại dòng muốn dừng chạy js.
6. Thay đổi User Agent, kích thước trình duyệt
Khi phát triển web thì yếu tố web phải chạy cross browser là rất quan trọng. Chrome Dev Tools lại một lần nữa “ghi điểm” với tôi 😀 Ta có thể thay đổi User Agent thay IE 8 chẳng hạn, Iphone 5, …
7. Tắt cache khi bật Chrome Dev Tools
Tính năng cache của trình duyệt rất tốt khi ta chỉ vào lướt web, đọc báo, xem phim, … nhưng nó lại khiến chúng ta đau đầu khi phát triển web. Đã bao giờ bạn phải refresh browser lại rất nhiều lần thì mới thấy đc đoạn JavaScript đã thay đổi chưa?!
8. Sử dụng phím tắt
Khi sử dụng một công cụ việc sử dụng phím tắt rất quan trọng giúp rút ngắn thời gian thao tác của bạn. Chrome Dev Tools cung cấp khá nhiều phím tắt hữu ích cho bạn khi phát triển web.