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! Dưới đây là những lợi ích mới.

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

Đánh dấu tất cả các nút bị ảnh hưởng bởi tài sản CSS

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

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

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

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

Danh mục PWA trong báo cáo hiện sử dụng hệ thống tính điểm 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 của 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. Xem Kiểm tra hoạt động mạng để tìm hiểu thông tin cơ bản về 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ả các 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 kết nối đó.

   

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

4. Nhấp vào thẻ Thông báo.

   

   Hình 7. Thẻ Tin nhắn

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

   

   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 chuột Sao chép vào bảng nhớ tạm để sao chép vào bảng nhớ tạm.

Hình 9. Xem thư 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 của một phần của khung nhìn. Tính năng này đã được trong một khoảng thời gian, nhưng quy trình truy cập vào tính năng này khá ẩn. Chụp ảnh màn hình vùng có sẵn trong Trình đơn Lệnh.

1. Tập trung vào Công cụ cho nhà phát triển rồi nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn Command.

   

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

2. Bắt đầu nhập area, chọn Chụp ảnh màn hình khu vực, sau đó nhấn Enter.

3. Kéo chuột qua phần của khung nhìn mà bạn muốn chụp ảnh màn hình.

   

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

Bộ lọc Service worker trong bảng điều khiển Mạng

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

Hình 12 Đang lọc theo is:service-worker-initiated

Hình 13. Đang lọc theo is:service-worker-intercepted

Xem phần Lọc tài nguyên để tìm hiểu thêm 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

Các bản ghi hiệu suất hiện đánh dấu các nhiệm vụ dài và First Paint.

Tham khảo bài viết Giảm bớt công việc cho luồng chính để tham khảo 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.

Nhiệm vụ dài trong Bản ghi hiệu suất

Giờ đây, bản ghi hiệu suất sẽ hiển thị tasks có thời gian dài.

Hình 14. Di chuột qua một nhiệm vụ dài trong Bản ghi hiệu suất

Hiển thị đầu tiên trong phần Thời gian

Giờ đây, phần Thời gian của bản ghi Hiệu suất sẽ đánh dấu Hiển thị đầu tiên.

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

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

Hãy xem bài viết Bắt đầu sử dụng tính năng xem và thay đổi DOM để tham quan thực tế về các chủ đề liên quan đến DOM các tính năng AI mới.

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

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

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

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.

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.