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 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 kiểu được tạo bằng API Mô hình đối tượng CSS (CSSOM). Về bản chất, nhiều khung và thư viện CSS trong JS 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ờ. Biểu định kiểu có thể tạo 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. Hãy xem bài viết Tính năng mới trong Lighthouse 6.0 để biết 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 để biết 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), Mức thay đổi bố cục tích luỹ (CLS) và Tổng thời gian chặn (TBT). LCP và CLS là 2 trong số Core Web Vitals mới của Google, còn TBT là một 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à Độ trễ đầu vào đầu tiên.

Công thức điểm hiệu suất cũng được tính trọng số để phản ánh chính xác hơn trải nghiệm tải của người dùng.

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. Tính năng này 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. Hãy xem phần Nội dung hiển thị có ý nghĩa đầu tiên để biết 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ính năng tự động hoàn thành thuộc tính trong Console hiện hỗ trợ cú pháp không bắt buộc tạo chuỗi, ví dụ: name?. nay 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 đánh dấu cú pháp đúng cách và được in đẹp mắt 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 sẽ in đẹp đúng cách 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 thực hiệ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

Ngăn đã tính toán trong bảng điều khiển Phần tử hiện hiển thị nhất quán dưới dạng ngăn trên tất cả các kích thước khung nhìn. 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 khung nhìn của DevTools 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 bạn thấy rõ ràng hơn việc đang xem dữ liệu nhị phân và nhất quán hơn với cách các vị trí tham chiếu thời gian chạy Wasm.

Độ 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 thao tác 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, chính sách này chỉ áp dụng cho các thông báo 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ù bạn đã bỏ đánh dấu mục Nhóm tương tự. 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, 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 chế độ cài đặt nhất quán với các tuỳ chọn khác trong Cài đặt Console.

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

Giờ đây, thông tin về bộ nhớ đệm biên dịch JavaScript 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 quá trình lưu mã không xảy ra vào bộ nhớ đệm.

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

Vấn đề về Chromium #912581

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

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. Điều này 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ẻ so với quá trình đ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 các sự kiện DOMContentLoaded, Hiển thị đầu tiên, Hiển thị nội dung đầu tiên và Hiển thị nội dung lớn nhất tương ứng với thời điểm bắt đầu điều hướng, tức 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 các đ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 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.