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 điểm 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 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 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 chịu ảnh hưởng của nội dung 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 mới Các mục tiêu nhấn có kích thước không phù hợp kiểm tra để đảm bảo các thành phần tương tác như nút và đường liên kết có kích thước lớn và khoảng cách phù hợp trên thiết bị di động.

Danh mục PWA của 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 tệp 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 Network (Mạng). Hãy xem phần Kiểm tra hoạt động mạng để tìm hiểu kiến thức cơ bản về cách 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ả 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 hiển thị

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ẻ Tin nhắn.

   

   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.

   

   Hình 8. Kiểm tra thông báo tệp 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 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

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

1. Đặt tiêu điểm vào DevTools rồi nhấn tổ hợp phím Ctrl+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 vùng, rồi nhấn Enter.

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

   

   Hình 11 Chọn một 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 worker dịch vụ gây ra (initiated) hoặc có thể được 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

Tính năng ghi lại hiệu suất hiện đánh dấu các tác vụ dài và Lần vẽ đầu tiên.

Hãy xem bài viết Giảm công việc của luồng chính để biết ví dụ về cách sử dụng bảng điều khiển Hiệu suất nhằm 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 qua một tác vụ dài trong bản ghi Hiệu suất

First Paint (Vẽ lần đầu) trong phần Timings (Thời gian)

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

Hình 15. First Paint (Vẽ lần đầu) trong phần Timings (Thời gian)

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

Hãy xem bài viết Bắt đầu xem và thay đổi DOM để tham quan thực tế 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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.