Những mẹo giúp bạn sử dụng Chrome DevTools hiệu quả và nhanh chóng

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

Xem thêm: sửa chữa máy tính tại nhà tphcm , bơm mực máy in tận nơi , cty thiet ke web chuan seo  , công ty thiết kế website dịch vụ

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). Bạn có thể Gọi Free vào nút để format lại code. - ✅ mẹo sử dụng chrome devtool

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 Gọi Miễn Phí vào button đó thì sẽ tăng số lần đếm Click Gọi Free 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). Here we go! Chúng ta cùng Liên Hệ Miễn Phí 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. 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 ????

Xem thêm: gắn camera quan sát tphcm , cty thiết kế web bán hàng , cty thiet ke website giao duc - dao tao , cty thiết kế web điện tử điện lạnh

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

chrome devtool, kỹ thuật dùng chrome devtool, kỹ thuật dùng chrome devtool hiệu qua, mẹo sử dụng chrome devtool hiệu quả

✍ chrome DevTool ✍ là công cụ quen thuộc đối với bất cứ người phát triển web nào, việc sử dụng ✅ chrome DevTool sẽ giúp cho việc lập trình hay thiết kế web sẽ thuận lợi và nhanh chóng, hiệu quả hơn với những ⭐ mẹo được đề cập trong bài viết