Trang này được dịch bởi Cloud Translation API.

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 một nút, chẳng hạn như padding hoặc margin, để đánh dấu tất cả các nút chịu ảnh hưởng của nội dung khai báo đó.

Khi di chuột qua một thuộc tính lề, tất cả các nút chịu ảnh hưởng của nội dung khai báo đó sẽ được đánh dấu

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 chịu ảnh hưởng của nội dung khai báo đó sẽ được đánh dấu

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 có kích thước không phù hợp sẽ kiểm tra để đảm bảo rằng các phần tử tương tác như nút và đường liên kết có kích thước lớn và cách nhau phù 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:

Mở bảng điều khiển Mạng. Xem bài viết Kiểm tra hoạt động mạng để tìm hiểu các 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
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
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
Nhấp vào thẻ Thông báo.

Hình 7. Thẻ Tin nhắn
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 vào biểu tượng Sao chép vào bảng nhớ tạm để sao chép tin nhắn nhị phân vào bảng nhớ tạm.

Xem thư nhị phân dưới dạng Base64

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 đã xuất hiện được một thời gian, nhưng quy trình sử dụng tính năng này khá ẩn. Ảnh chụp màn hình khu vực hiện có sẵn trong Trình đơn Command.

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 lệnh.

Hình 10. Trình đơn lệnh
Bắt đầu nhập area, chọn Chụp ảnh màn hình khu vực, sau đó nhấn Enter.
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 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 trình chạy dịch vụ (initiated) hoặc có thể sửa đổi (intercepted).

Lọc theo is:service-worker-initiated

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

Lọc theo is:service-worker-blockinged

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.

Hãy tham khảo bài viết Làm ít công việc luồng chính hơn để 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.

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ị các việc cần làm có thời gian dài.

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

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 lần hiển thị đầu tiên.

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

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 để tìm hiểu thực tế về các tính năng liên quan đến DOM.

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ố trong 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.