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

Jecelyn Yeen

Chỉnh sửa kiểu cho khung CSS trong JS

Ngăn Kiểu hiện hỗ trợ tốt hơn cho việc chỉnh sửa các kiểu được tạo bằng Đối tượng CSS API Mô hình (CSSOM). Nhiều khung và thư viện CSS trong JS nâng cao sử dụng API CSSOM để tạo kiểu.

Bạn cũng có thể chỉnh sửa kiểu được thêm vào JavaScript bằng Biểu định kiểu có thể tạo ngay bây giờ. Có thể tạo Biểu định kiểu là một cách mới để tạo và phân phối các kiểu có thể sử dụng lại khi sử dụng Shadow DOM.

Ví dụ: trước đây bạn không thể chỉnh sửa các kiểu h1 được thêm bằng CSSStyleSheet (API CSSOM). Bạn hiện có thể chỉnh sửa trong ngăn Kiểu:

Vấn đề về Chromium #946975

Lighthouse 6 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse đang chạy Lighthouse 6. Xem bài viết Tính năng mới trong Lighthouse 6.0 để biết bạn có thể xem bản tóm tắt tất cả thay đổi chính hoặc ghi chú phát hành phiên bản 6.0.0 để xem danh sách đầy đủ tất cả thay đổi.

Lighthouse 6.0 giới thiệu 3 chỉ số mới cho báo cáo: Nội dung lớn nhất hiển thị (LCP), Điểm số tổng hợp về mức thay đổi bố cục (CLS) và tổng thời gian chặn (TBT). LCP và CLS là 2 trong số các tiêu chí mới của Google Chỉ số quan trọng chính của trang web và TBT là proxy đo lường trong phòng thí nghiệm cho một Chỉ số quan trọng chính của trang web khác là Dữ liệu đầu vào đầu tiên Hoãn.

Công thức điểm hiệu suất cũng được điều chỉnh lại để phản ánh chính xác hơn đang tải của bạn.

Các chỉ số mới về hiệu suất trong Lighthouse 6.0

Vấn đề về Chromium #772558

Ngừng sử dụng Nội dung có ý nghĩa đầu tiên (FMP)

Tính năng Nội dung có ý nghĩa đầu tiên (FMP) không được dùng nữa trong Lighthouse 6.0. Nó cũng đã bị xoá khỏi Bảng điều khiển hiệu suất. Nội dung lớn nhất hiển thị là giải pháp thay thế nên dùng cho FMP. Xem phần Trước tiên Nội dung vẽ có ý nghĩa để giải thích lý do tính năng này không được dùng nữa.

Vấn đề về Chromium #1096008

Hỗ trợ các tính năng JavaScript mới

Công cụ cho nhà phát triển hiện đã hỗ trợ tốt hơn cho một số tính năng ngôn ngữ JavaScript mới nhất:

  • Tự động hoàn thành cú pháp tạo chuỗi không bắt buộc - tự động hoàn thành tài sản ngay trong Console hỗ trợ cú pháp tạo chuỗi tuỳ chọn, ví dụ: name?. hiện hoạt động cùng với name. và name[.
  • Làm nổi bật cú pháp cho các trường riêng tư – các trường của lớp riêng tư hiện đã được hiển thị chính xác được đánh dấu cú pháp và in đẹp trong bảng điều khiển Nguồn.
  • Làm nổi bật cú pháp cho Toán tử liên kết rỗng – Công cụ cho nhà phát triển hiện đã có bản in đẹp mắt toán tử liên kết rỗng trong bảng điều khiển Nguồn.

Vấn đề về Chromium #1083214, #1073903, #1083797

Cảnh báo mới về lối tắt cho ứng dụng trong ngăn Tệp kê khai

Lối tắt ứng dụng giúp người dùng nhanh chóng bắt đầu các công việc phổ biến hoặc được đề xuất trong một ứng dụng web.

Giờ đây, ngăn Tệp kê khai sẽ hiển thị cảnh báo nếu:

  • biểu tượng lối tắt ứng dụng nhỏ hơn 96x96 pixel
  • biểu tượng lối tắt ứng dụng và biểu tượng tệp kê khai không phải là hình vuông (vì chúng sẽ bị bỏ qua)

Cảnh báo về lối tắt ứng dụng

Vấn đề về Chromium #955497

Sự kiện respondWith của trình chạy dịch vụ trong thẻ Thời gian

Thẻ Thời gian của bảng điều khiển Mạng hiện bao gồm các sự kiện respondWith của trình chạy dịch vụ. respondWith là thời gian ngay trước khi trình xử lý sự kiện fetch của trình chạy dịch vụ chạy đến thời điểm Lời hứa respondWith của trình xử lý fetch đã được thanh toán.

trình chạy dịch vụ "respondWith"

Vấn đề về Chromium #1066579

Hiển thị nhất quán ngăn Đã tính toán

Giờ đây, ngăn đã tính toán trong bảng điều khiển Phần tử hiển thị nhất quán dưới dạng ngăn trên tất cả khung nhìn kích thước. Trước đây, ngăn Đã tính toán sẽ hợp nhất bên trong ngăn Kiểu khi chiều rộng của Công cụ cho nhà phát triển khung nhìn bị thu hẹp.

Vấn đề về Chromium #1073899

Độ lệch mã byte cho các tệp WebAssembly

Công cụ cho nhà phát triển hiện sử dụng độ lệch mã byte để hiển thị số dòng của quá trình tháo rời Wasm. Điều này giúp rõ ràng hơn rằng bạn đang xem dữ liệu nhị phân và nhất quán hơn với cách thời gian chạy Wasm tham chiếu vị trí.

Độ lệch mã byte

Vấn đề về Chromium #1071432

Sao chép theo dòng và cắt trong bảng điều khiển Nguồn

Khi thực hiện sao chép hoặc cắt mà không có lựa chọn nào trong Trình chỉnh sửa bảng điều khiển Nguồn, Công cụ cho nhà phát triển sẽ sao chép hoặc cắt nội dung dòng hiện tại. Ví dụ: trong video dưới đây, con trỏ nằm ở cuối dòng 1. Sau khi nhấn phím tắt đã cắt, toàn bộ dòng sẽ được sao chép vào bảng nhớ tạm và đã bị xoá.

Vấn đề về Chromium #800028

Nội dung cập nhật về chế độ cài đặt của Play Console

Huỷ nhóm các thông báo trên cùng một bảng điều khiển

Giờ đây, nút bật/tắt Nhóm tương tự trong phần Cài đặt của Console sẽ áp dụng cho các thông báo trùng lặp. Trước đây vừa áp dụng cho các thư tương tự.

Ví dụ: trước đây, Công cụ cho nhà phát triển không huỷ nhóm các thông báo hello mặc dù Nhóm thông báo tương tự đã bỏ chọn. Hiện tại, các thư hello đã được huỷ nhóm:

Vấn đề về Chromium #1082963

Duy trì chế độ cài đặt Chỉ ngữ cảnh đã chọn

Chế độ cài đặt Chỉ bối cảnh đã chọn trong phần Cài đặt của Console hiện được duy trì. Trước đây, các chế độ cài đặt được đặt lại mỗi khi bạn đóng và mở lại Công cụ cho nhà phát triển. Thay đổi này làm cho hoạt động của chế độ cài đặt nhất quán với các tuỳ chọn khác trong Cài đặt bảng điều khiển.

Chỉ ngữ cảnh đã chọn

Vấn đề về Chromium #1055875

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

Thông tin về bộ nhớ đệm biên dịch JavaScript trong bảng điều khiển Hiệu suất

Thông tin về bộ nhớ đệm biên dịch JavaScript giờ đây luôn hiển thị trong thẻ Tóm tắt của Bảng điều khiển hiệu suất. Trước đây, Công cụ cho nhà phát triển sẽ không hiển thị bất cứ nội dung nào liên quan đến việc lưu mã vào bộ nhớ đệm nếu mã việc lưu vào bộ nhớ đệm đã không xảy ra.

Thông tin về bộ nhớ đệm biên dịch JavaScript

Vấn đề về Chromium #912581

Bảng điều khiển Hiệu suất dùng để hiện thời gian trong thước kẻ dựa trên thời điểm bắt đầu ghi. Thông tin này có hiện đã thay đổi đối với các bản ghi mà người dùng điều hướng, trong đó Công cụ cho nhà phát triển hiện hiển thị thời gian của thước kẻ tương đối vào điều hướng.

Căn chỉnh thời gian điều hướng trong bảng điều khiển Hiệu suất

Chúng tôi cũng đã cập nhật thời gian cho DOMContentLoaded, Thời gian hiển thị đầu tiên, Nội dung đầu tiên hiển thị và Nội dung lớn nhất Sự kiện Hiển thị nội dung liên quan đến thời điểm bắt đầu điều hướng, nghĩa là các sự kiện này khớp với thời gian do PerformanceObserver báo cáo.

Vấn đề về Chromium #974550

Biểu tượng mới cho điểm ngắt, điểm ngắt có điều kiện và điểm nhật ký

Bảng điều khiển Sources (Nguồn) có các thiết kế mới cho điểm ngắt, điểm ngắt có điều kiện và điểm nhật ký. Điểm ngắt có thiết kế lá cờ được làm mới với màu sắc tươi sáng và thân thiện hơn. Các biểu tượng được thêm vào phân biệt các điểm ngắt có điều kiện và điểm ghi nhật ký.

Điểm ngắt

Vấn đề về Chromium #1041830

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 kỳ 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   Thêm > 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.