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 các khung CSS-in-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 API Mô hình đối tượng CSS (CSSOM). Nhiều khung và thư viện CSS-in-JS sử dụng các API CSSOM để tạo kiểu.

Giờ đây, bạn cũng có thể chỉnh sửa các kiểu được thêm trong JavaScript bằng Trang tính kiểu có thể tạo. Trang tí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ụ: các kiểu h1 được thêm bằng CSSStyleSheet (API CSSOM) trước đây không chỉnh sửa được. Hiện có các mục 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 hiện đang chạy Lighthouse 6. Hãy xem bài viết Tính năng mới trong Lighthouse 6.0 để biết thông tin tóm tắt về 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: Thời gian hiển thị nội dung lớn nhất (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ố Chỉ số quan trọng chính của trang web 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 khác của trang web là Độ trễ đầu vào đầu tiên.

Công thức tính điểm hiệu suất cũng được điều chỉ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 chỉ số Hiển thị nội dung có ý nghĩa đầu tiên (FMP)

Chỉ số Hiển thị nội dung có ý nghĩa đầu tiên (FMP) không còn được dùng trong Lighthouse 6.0. Chỉ số này cũng đã bị xoá khỏi bảng điều khiển Hiệu suất. Bạn nên thay thế FMP bằng Thời gian hiển thị nội dung lớn nhất. Hãy xem phần Hiển thị nội dung đầu tiên để biết lý do chỉ số này không còn được dùng nữa.

Vấn đề về Chromium #1096008

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

DevTools 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 chuỗi tuỳ chọn – tính năng tự động hoàn thành thuộc tính trong Console hiện hỗ trợ cú pháp chuỗi tuỳ chọn, ví dụ: name?. hiện hoạt động ngoà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 lớp riêng tư hiện được làm nổi bật cú pháp và 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ử hợp nhất rỗng – Công cụ cho nhà phát triển hiện in đẹp toán tử hợp nhấ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 ứ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 thao tác phổ biến hoặc thao tác đề xuất trong một ứng dụng web.

Ngăn Tệp kê khai hiện hiển thị cảnh báo nếu:

  • biểu tượng lối tắt ứng dụng có kích thước 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 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 worker 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 worker dịch vụ. respondWith là thời gian ngay trước khi trình xử lý sự kiện fetch của worker chạy đến thời điểm lời hứa respondWith của trình xử lý fetch được giải quyết.

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

Vấn đề về Chromium #1066579

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

Ngăn Computed (Đã tính toán) trong bảng điều khiển Elements (Phần tử) hiện hiển thị nhất quán dưới dạng một ngăn trên tất cả kích thước khung nhìn. Trước đây, ngăn Computed (Đã tính toán) sẽ hợp nhất bên trong ngăn Styles (Kiểu) khi chiều rộng của khung nhìn DevTools hẹp.

Vấn đề về Chromium #1073899

Độ dời mã byte cho tệp WebAssembly

Công cụ cho nhà phát triển hiện sử dụng độ dời 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 hiểu rõ 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 môi trường thời gian chạy Wasm tham chiếu các vị trí.

Độ dời mã byte

Vấn đề về Chromium #1071432

Sao chép và cắt theo dòng 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, DevTools sẽ sao chép hoặc cắt nội dung dòng hiện tại. Ví dụ: trong video bên dưới, 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ề phần Cài đặt trên bảng điều khiển

Huỷ nhóm các thông báo giống nhau trong bảng điều khiển

Nút bật/tắt Nhóm các thông báo tương tự trong phần Cài đặt của Console hiện áp dụng cho các thông báo trùng lặp. Trước đây, tính năng này chỉ áp dụng cho các thư tương tự.

Ví dụ: trước đây, DevTools không huỷ nhóm các thông báo hello mặc dù bạn chưa đánh dấu vào tuỳ chọn Nhóm các thông báo tương tự nhau. Giờ đây, các thông báo hello sẽ không được nhóm lại:

Vấn đề về Chromium #1082963

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

Chế độ cài đặt Chỉ ngữ cảnh đã chọn trong phần Cài đặt của Search Console hiện đã được lưu giữ. Trước đây, chế độ cài đặt sẽ được đặt lại mỗi khi bạn đóng và mở lại DevTools. Thay đổi này giúp hành vi cài đặt tương thích với các tuỳ chọn Cài đặt bảng điều khiển khác.

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 hiện luôn xuất hiện 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 kỳ nội dung nào liên quan đến việc lưu mã vào bộ nhớ đệm nếu không có hoạt động lưu mã vào bộ nhớ đệm.

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 từng hiển thị 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 đó DevTools hiện hiển thị thời gian của thước kẻ tương ứng với hoạt động điều hướng.

Điều 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, First Paint (Hiển thị đầu tiên), First Contentful Paint (Hiển thị nội dung đầu tiên) và Largest Contentful Paint (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 ghi nhật ký

Bảng điều khiển Sources (Nguồn) 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 ghi nhật ký. Điểm ngắt có thiết kế cờ mới mẻ với màu sắc sáng và thân thiện hơn. Biểu tượng được thêm vào để phân biệt đ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 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.

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.