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

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

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

Đánh dấu 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 bị ảnh hưởng bởi nội dung khai báo đó.

Khi bạn 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 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ục tiêu nhấn có kích thước không phù hợp (mới) để đả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 cho 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ệ thống tính điểm huy hiệu mới cho danh mục PWA

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 bài viết Kiểm tra hoạt động mạng để tìm hiểu thông tin cơ bản về cách phân tích hoạt động mạng.

    Bảng điều khiển Mạng

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

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

    Sau khi nhấp vào WS, các kết nối WebSockety chỉ hiển thị

    Hình 5. Sau khi nhấp vào WS, các kết nối WebSockety chỉ hiển thị

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

    Kiểm tra kết nối WebSocket

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

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

    Thẻ Thông báo

    Hình 7. Thẻ Thông báo

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

    Kiểm tra thông báo nhị phân

    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 điệp 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 vào bảng nhớ tạm để sao chép thông báo nhị phân vào bảng nhớ tạm.

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

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

  1. Lấy tiêu điểm 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 (máy Mac) để mở Trình đơn lệnh.

    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 khu vực, sau đó nhấn phím Enter.

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

    Chọn phần khung nhì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ụ gây ra (initiated) hoặc có thể đã bị 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-chặn

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

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.

Nội dung cập nhật về bảng điều khiển hiệu suất

Giờ đây, các bản ghi biểu diễn sẽ đánh dấu các tác vụ dài và Lần hiển thị đầu tiên.

Hãy xem bài viết Giảm hoạt động của luồng chính để xem 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

Bản ghi buổi biểu diễn giờ đây có thể hiển thị các tác vụ 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

Phần Thời gian của bản ghi Hiệu suất giờ đây sẽ đánh dấu là 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 về DOM mới

Hãy xem bài viết Bắt đầu xem và thay đổi DOM để có chuyến tham quan thực tế 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video 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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59