Mẹo nhỏ khi sử dụng Chrome Dev Tools

Chào mọi  người,

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.

Bạn có thể chuyển qua lại giữa dạng dọc và dạng ngang một cách nhanh chóng khi bấm vào nút  ở góc phải dưới của Chrome Dev Tools.

Hoặc chúng ta có thể bấm chuột vào trên thanh tab rồi rê chuột sang góc phải của màn hình và làm ngược lại để quay trở lại dạng ngang.

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 đó.

Ví dụ:

.button:hover {
font-weight: bold;
box-shadow: 2px 2px #dedede;
}

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).

Bạn có thể click vào nút  để format lại code.

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.

Chúng ta hãy cùng xem qua một ví dụ nhé. Trong ví dụ này mình có tạo một button và đoạn javascript có nhiệm vụ là khi click vào button đó thì sẽ tăng số lần đếm click lên 1.

Ta sẽ cùng nhau kiểm tra xem đoạn js nào thay đổi text content của button nhé.

Đầu tiên, bạn inspect button (nhấn chuột phải vào button và chọn Inspect Element). Sau đó làm theo như trong hình:

Here we go! Chúng ta cùng click thử vào button để xem nhé. Chrome Dev Tools sẽ tự chuyển sang tab source và hiện ra code js thay đổi text content của button.

Tính này đặc biệt hữu ích khi debug javascript phải không mọi người?! 😀

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.

Chúng ta cùng nhau xem ví dụ nhé.

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, …

Bạn có thể thực hiện điều này bằng cách mở Chrome Dev Tools, nhấn button  tại góc phải dưới của nó nhé. Sau đó ta có thể chọn Tab Override để thiết lập cho browser.

Như trên hình ta có thể thấy kích thước hiển thị của browser được resize lại bằng độ phân giải của iPhone 😉

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?!

Với Chrome Dev Tools ta có thể tắt tính năng cache khi đang mở nó. Đầu tiên, bạn mở Chrome Dev Tools vào nhấn vào button  và sau chọn chọn tab General, tích vào ô Disable cache (while DevTools is open) nhé.

Và vấn đề đau đầu đã được loại bỏ 😉

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. Chúng ta hãy mở Chrome Dev Tool và chọn vào button Options  nhé và chọn tab Shortcuts.

Kết luận

Trên đây, mình vừa giới thiệu một số mẹo nhỏ khi sử dụng Chrome Dev Tools. Bài viết sẽ được cập nhật thêm khi mình khám phá thêm các tính năng mới khác 😀 Nếu bạn biết thêm thì hãy cùng nhau chia sẻ nhé 😉