Google làm cho việc gỡ lỗi trở nên dễ dàng hơn với các tính năng mới trong Devtools Chrome 106

Gỡ lỗi có thể tẻ nhạt và thậm chí còn khó chịu hơn khi bạn không thể dễ dàng xác định được lỗi. Công cụ dành cho nhà phát triển Chrome 106 (công cụ dành cho nhà phát triển) được thiết lập để đơn giản hóa quy trình gỡ lỗi, giúp quá trình này nhanh chóng và dễ dàng hơn.

Giờ đây, bạn có thể dễ dàng sắp xếp thông qua các tệp, tối ưu hóa tìm kiếm của mình, ẩn tập lệnh của bên thứ ba, truy cập báo cáo hiệu suất chuyên sâu và nhiều nội dung khác được thảo luận trong bài viết này. Các devtools này rất cần thiết, đặc biệt đối với các nhà phát triển làm việc với các khung JavaScript như Angular, React và Vue.js, những người hiện có một bảng điều khiển tương tác và đơn giản hóa để trực quan hóa và gỡ lỗi mã của họ.

Hãy để chúng tôi xem xét kỹ hơn một số tính năng mới này:

Để hưởng lợi đầy đủ từ các bản cập nhật mới trên Chrome 106, hãy tải xuống Chrome Chim hoàng yến, Dev, hoặc Beta phiên bản làm trình duyệt phát triển mặc định của bạn. Bạn sẽ có quyền truy cập vào các công cụ dành cho Nhà phát triển mới nhất cho phép kiểm tra các API nền tảng web và nhanh chóng xác định các vấn đề hoặc lỗi trên trang web của bạn để đảm bảo người dùng của bạn có trải nghiệm khách hàng tốt nhất.

1. Tệp được nhóm theo tác giả / được triển khai

Giờ đây, bạn có thể điều hướng trực tiếp đến các thành phần ứng dụng của mình bằng cách nhóm các tệp tại tác giả / triển khai trên nguồn bảng điều khiển. Đi đến Nguồn> Menu 3 chấm> Nhóm theo Tác giả / Đã triển khai. Bây giờ, khi bạn mở tệp, bạn chỉ có thể thấy các tệp đã triển khai của mình trên bảng điều khiển.

Trong các phiên bản Chrome trước, tất cả các tệp mã nguồn đều hiển thị trong dẫn đường gây khó khăn cho việc tìm một tệp duy nhất.

2. Tìm kiếm tệp được đơn giản hóa

Bạn có thể giới hạn tìm kiếm của mình trên bảng nguồn chỉ đối với các tệp có liên quan. Trong các phiên bản trước của Chrome, các tệp được tạo bởi khung và các bên thứ ba khác sẽ hiển thị trên kết quả tìm kiếm, gây khó khăn cho việc xác định mục tìm kiếm.

Bản cập nhật này là phiên bản dành cho nhà phát triển nhằm tối ưu hóa tìm kiếm của bạn trên các trình duyệt web với các bảng gian lận tìm kiếm của Google. Để định cấu hình cài đặt này, hãy truy cập vào Menu 3 chấm> Ẩn nguồn danh sách bỏ qua.

3. Ẩn tập lệnh của bên thứ ba

Tập lệnh của bên thứ ba lấp đầy bảng điều khiển của bạn? Chrome 106 đã thêm một tiện ích mở rộng danh sách bỏ qua trong bản đồ nguồn để cho phép bạn ẩn các tập lệnh được tạo tự động bởi các khung và các bên thứ ba khác.

Để kích hoạt tính năng này, hãy truy cập Cài đặt> Danh sách bỏ qua> Tự động thêm các tập lệnh của bên thứ ba đã biết vào danh sách bỏ qua. Khi bạn mở lại các tệp, bảng điều khiển sẽ chỉ hiển thị các tệp có liên quan được liên kết với ứng dụng của bạn. Bây giờ bạn có thể xem mã của mình mà không bị phân tâm.

4. Dấu vết ngăn xếp chi tiết

Bạn sẽ mất ít thời gian hơn để xác định lỗi trên bảng điều khiển, nhờ tính năng mới trên Chrome 106. Công cụ dành cho nhà phát triển Chrome cung cấp cho bạn cái nhìn chi tiết về các hoạt động không đồng bộ và nguyên nhân gốc rễ của chúng. Trong các phiên bản trước, chỉ các sự kiện dẫn đến hoạt động được hiển thị. Các devTools mới nhất hiển thị toàn bộ chuỗi hoạt động và nguyên nhân gốc rễ của chúng.

Google đã định cấu hình một console.createTask () trong Chrome 106. Phương pháp này cho phép các khung thực hiện theo dõi ngăn xếp trên bảng điều khiển. Gỡ lỗi JavaScript bằng devtools cũng dễ dàng như gỡ lỗi CSS bằng chrome.

5. Theo dõi Tương tác trong Bảng Hiệu suất

Theo dõi các Tương tác mới trong Màn biểu diễn để xác định các vấn đề tiềm ẩn về khả năng đáp ứng đối với ứng dụng của bạn. Trong Chrome 106, tất cả các tương tác hiển thị trong theo dõi Tương tác sau một thao tác. Theo dõi hiển thị nguồn của các tương tác và ID của chúng. Theo dõi giúp xác định nguồn và đánh chặn nó cho phù hợp.

6. Thông tin chi tiết về thời gian LCP trong Bảng hiệu suất

Các Sơn có nội dung lớn nhất Chi tiết thời gian (LCP) hiện có sẵn trên bảng thông tin chi tiết về hiệu suất. LCP là một chỉ số hiệu suất web quan trọng báo cáo về thời gian hiển thị hình ảnh hoặc khối văn bản cần để tải trên trang web. 2,5 giây hoặc thấp hơn là một điểm hiệu suất tốt.

Để xem thông tin chi tiết, hãy điều hướng đến bảng hiệu suất> 3-chấm-menu-thêm phí> thông tin chi tiết về hiệu suất. Khi bạn phát lại một bản ghi âm, Thông tin chi tiết bảng điều khiển sẽ hiển thị thời gian tải.

Cập nhật bổ sung trong Chrome 106

Các cải tiến khác đối với Chrome 106 bao gồm:

• Bạn có thể xuất bản ghi kịch bản của mình mà không gặp sự cố từ Máy ghi âm bảng điều khiển. Nút xuất đã gặp sự cố trong các phiên bản trước.
• Bây giờ bạn có một công cụ chọn màu trong Phong cách ngăn phần tử SVG.
• Bạn có thể xác định các tập lệnh làm sai lệch bố cục của mình trong Thông tin chi tiết về hiệu suất bảng điều khiển.
• Bạn có thể hiển thị đường dẫn cho phông chữ web LCP trong Thông tin chi tiết về hiệu suất bảng điều khiển.

Các tính năng này có thể cải thiện cách bạn sử dụng các công cụ phát triển của trình duyệt.

Những gì bạn nhận được từ Chrome 106

Những cải tiến mới nhất đối với công cụ phát triển trong Chrome 106 giúp quá trình gỡ lỗi nhanh hơn. Các bản cập nhật mới giúp bạn dễ dàng hình dung các hoạt động hơn thông qua một bảng điều khiển động và đơn giản cho phép bạn ẩn tệp, tắt tập lệnh, ghi và có cái nhìn chuyên sâu về ứng dụng của bạn khi gỡ lỗi.

Các bổ sung của Chrome 106 sẽ cho phép bạn quản lý ứng dụng của mình và tối ưu hóa hiệu suất của nó. Hãy tiếp tục và tận hưởng những lợi ích này bằng cách cập nhật lên phiên bản Chrome 106 mới nhất.