9 mẹo và thủ thuật cho Chrome Dev Tools
Chrome không chỉ ngày càng trở thành một trình duyệt được nhiều người lựa chọn, mà còn là một tool phát triển mạnh mẽ theo hướng riêng của nó. Các tính năng mới được giới thiệu thường xuyên, và có một số tính năng tôi thấy sử dụng thấy dễ dàng hơn các tính năng khác Dưới đây là ...
Chrome không chỉ ngày càng trở thành một trình duyệt được nhiều người lựa chọn, mà còn là một tool phát triển mạnh mẽ theo hướng riêng của nó. Các tính năng mới được giới thiệu thường xuyên, và có một số tính năng tôi thấy sử dụng thấy dễ dàng hơn các tính năng khác
Dưới đây là một số tính năng tôi thấy tốt nhất và đáng chú ý nhất:
- Điểm dừng có điều kiện
Thêm điểm dừng vào các nguồn script là một cách cực kỳ hữu ích để biết cái gì và ở đâu sai (hoặc đúng!). Khả năng thêm các điểm dừng có điều kiện giúp bạn tìm hiểu tận gốc vấn đề nhanh hơn bằng cách chỉ định các tiêu chí tham số mà bạn quan tâm để nghiên cứu thêm. Thật là lý tưởng!
Tìm hiểu thêm về các điểm dừng có điều kiện ở đây.
- Xem các biến
Chúng ta có thể kiểm tra các biến trong cửa sổ nguồn khi điểm dừng được thêm vào. Việc này trông hơi giống như thế này:
Như vậy là tốt, nhưng nếu bạn muốn theo dõi nhiều biến số cùng một lúc hoặc muốn so sánh chúng, hoặc chỉ là nhắc nhở bản thân chúng là gì (hoặc nên là gì), thì bạn có thể mở rộng panel ở bên tay phải và thêm bao nhiêu biến tùy bạn:
- Dừng vòng lặp vô hạn
Nếu bạn đã từng vô tình chạy một chức năng javascript và nhận ra rằng chỉ cần chậm một giây là bạn phải nhìn máy tính của mình bắt đầu ngừng hoạt động trong khi bản thân cố gắng hết sức để thoát khỏi Chrome, thì cái này là dành cho bạn …
Nhấn tạm dừng script, và sau đó …
Tìm hiểu thêm về việc dừng vòng lặp vô hạn ở đây.
- Đo lường tương tác
Đã bao giờ bạn muốn biết mất bao lâu để cái gì đó chạy được trên một trang web …?
Sau khi tải trang, mất bao lâu để ai đó sẽ phát video hoặc nhấp vào nút nào đó?
Đâu là nút thắt hiệu suất? Một phương thức script mất bao lâu để chạy?
Bây giờ bạn có thể sử dụng window.performance để kích hoạt sự đo lường bắt đầu thực hiện, và cuối cùng là xuất dữ liệu.
Dữ liệu cũng được in ra trong cửa sổ performance ở panel trên cùng, do đó bạn có thể xem tất cả các đo lường trong nháy mắt. Thật là tuyệt vời!
Đọc thêm về đo lường các tương tác trong thế giới thực sử dụng User Timing API.
- Các file được in khá đẹp
Các file thu nhỏ trong sản xuất là tiêu chuẩn công nghiệp và đang được mong đợi, nhưng đôi chúng ta có thể dễ dàng gắn điểm dừng hoặc xem các cấu trúc hoặc phương pháp riêng lẻ. Làm cho nó dễ đọc – làm cho nó đẹp! (góc dưới bên trái của source panel):
- Theo dõi sự kiện
Bạn đã bao giờ tự hỏi tại sao các listener sự kiện của bạn không hoạt động, hoặc hoạt động vào thời điểm ngẫu nhiên chưa?
Bạn có thể theo dõi các sự kiện và tương tác trang bằng console.
Thử ngay bây giờ:
- Nhấp chuột phải và “inspect” thanh tìm kiếm ở đầu trang
- Sao chép dòng này vào bảng điều khiển: MonitorEvents ($ 0, “key”);
- Gõ cái gì đó vào thanh tìm kiếm …
Tìm hiểu thêm về giám sát các sự kiện ở đây.
- Xuất dữ liệu yêu cầu
Bạn gặp vấn đề khi một cái gì đó nhìn có vẻ sai, nhưng bạn không chắc tại sao. Bạn đã gửi một đống yêu cầu mạng để sàng lọc nhưng vẫn chưa có câu trả lời… Bạn thực sự chỉ có một mình, có cách nào tiện lợi để chia sẻ mấy vấn đề này với người khác không?
Bạn có thể!
Bạn có thể tải xuống các yêu cầu dưới dạng HAR file và gửi nó cho đồng nghiệp, và họ có thể nhập nó vào Chrome của họ để xem qua các yêu cầu. Chỉ cần nhấp chuột phải vào bất kỳ yêu cầu nào và chọn Save as HAR with Content. Và Ta-da.
Đọc thêm về xuất dữ liệu yêu cầu và cách phân tích tệp HAR.
- Kích hoạt dark theme (cực kì thẩm mỹ …)
Mở dev tools > vào Settings
Chuyển đổi nó!
- Tiện ích mở rộng của Chrome
Ngoài ra còn rất nhiều tiện ích mở rộng thực sự tiện lợi để sử dụng với nhiều framework và tool khác nhau. Những cái mà tôi thấy đặc biệt hữu ích là:
VueJS dev tools (Trải nghiệm người dùng thực sự xuất sắc)
ReactJS dev tools
Google Analytics
Techtalk via dev.to
