Tính năng mới trong Công cụ cho nhà phát triển (Chrome 74)

Kayce Basques

Chào mừng bạn quay lại! Sau đây là những nội dung mới.

Phiên bản video của trang này

Làm nổi bật tất cả các nút chịu ảnh hưởng của thuộc tính CSS

Di chuột qua một thuộc tính CSS ảnh hưởng đến mô hình hộp của một nút, chẳng hạn như padding hoặc margin, để làm nổi bật tất cả các nút chịu ảnh hưởng của khai báo đó.

Hình 1 Khi bạn di chuột lên một thuộc tính margin, lề của tất cả các nút chịu ảnh hưởng của khai báo đó sẽ được làm nổi bật

Lighthouse phiên bản 4 trong bảng điều khiển Kiểm tra

Quy trình kiểm tra Các mục tiêu nhấn có kích thước không phù hợp mới sẽ kiểm tra để đảm bảo các phần tử tương tác như nút và đường liên kết có kích thước phù hợp và có khoảng cách với nhau trên thiết bị di động.

Danh mục PWA của một báo cáo hiện sử dụng hệ thống tính điểm bằng huy hiệu.

Hình 3. Hệ thống tính điểm huy hiệu mới cho danh mục PWA

Trình xem thông báo nhị phân WebSocket

Cách xem nội dung của thông báo WebSocket nhị phân:

1. Mở bảng điều khiển Mạng. Hãy xem phần Kiểm tra hoạt động mạng để tìm hiểu những kiến thức cơ bản về việc phân tích hoạt động mạng.

   

   Hình 4. Bảng điều khiển Mạng

2. Nhấp vào WS để lọc ra tất cả những tài nguyên không phải là kết nối WebSocket.

   

   Hình 5. Sau khi nhấp vào WS, chỉ các kết nối WebSockety mới xuất hiện

3. Nhấp vào Tên của một kết nối WebSocket để kiểm tra.

   

   Hình 6. Kiểm tra kết nối WebSocket

4. Nhấp vào thẻ Tin nhắn.

   

   Hình 7. Thẻ Tin nhắn

5. Nhấp vào một trong các mục Binary Message (Thông báo nhị phân) để kiểm tra.

   

   Hình 8. Kiểm tra thông báo nhị phân

Sử dụng trình đơn thả xuống ở cuối trình xem để chuyển đổi thông báo thành Base64 hoặc UTF-8. Nhấp vào Sao chép vào bảng nhớ tạm để sao chép thông báo nhị phân vào bảng nhớ tạm.

Hình 9. Xem thông báo nhị phân dưới dạng Base64

Chụp ảnh màn hình khu vực trong Trình đơn lệnh

Ảnh chụp màn hình khu vực cho phép bạn chụp ảnh màn hình một phần của khung hiển thị. Tính năng này đã xuất hiện một thời gian, nhưng quy trình truy cập vào tính năng này khá khó thấy. Giờ đây, bạn có thể chụp ảnh màn hình một phần qua Trình đơn lệnh.

1. Tập trung vào DevTools rồi nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh.

   

   Hình 10. Trình đơn lệnh

2. Bắt đầu nhập area, chọn Chụp ảnh màn hình theo vùng, rồi nhấn Enter.

3. Kéo chuột lên phần khung hiển thị mà bạn muốn chụp ảnh màn hình.

   

   Hình 11 Chọn phần khung hiển thị để chụp ảnh màn hình

Bộ lọc trình chạy dịch vụ trong bảng điều khiển Mạng

Nhập is:service-worker-initiated hoặc is:service-worker-intercepted vào hộp văn bản bộ lọc của bảng điều khiển Mạng để xem các yêu cầu do một worker dịch vụ gây ra (initiated) hoặc có khả năng bị sửa đổi (intercepted).

Hình 12 Lọc theo is:service-worker-initiated

Hình 13. Lọc theo is:service-worker-intercepted

Hãy xem phần Lọc tài nguyên để biết thêm thông tin về cách lọc nhật ký mạng.

Thông tin cập nhật về bảng điều khiển hiệu suất

Giờ đây, bản ghi hiệu suất sẽ đánh dấu các tác vụ dài và Thời gian hiển thị đầu tiên.

Hãy xem phần Giảm bớt công việc trên luồng chính để biết ví dụ về cách sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất tải trang.

Tác vụ dài trong bản ghi Hiệu suất

Bản ghi hiệu suất hiện cho thấy các tác vụ dài.

Hình 14. Di chuột lên một tác vụ dài trong bản ghi Hiệu suất

Hiển thị nội dung đầu tiên trong phần Timings (Thời gian)

Mục Thời gian của bản ghi Hiệu suất hiện đánh dấu Lần hiển thị đầu tiên.

Hình 15. Hiển thị nội dung đầu tiên trong phần Timings (Thời gian)

Hướng dẫn mới về DOM

Hãy xem bài viết Làm quen với việc xem và thay đổi DOM để có một chuyến tham quan thực tế về các tính năng liên quan đến DOM.

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
• Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Đăng bài trên X cho @ChromeDevTools.
• Để lại bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo về Công cụ cho nhà phát triển" trên YouTube.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.