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

Sofia Emelianova
Sofia Emelianova
GitHub

Cải thiện các phần tử

Huy hiệu lưới phụ CSS mới

Bảng Elements (Phần tử) sẽ có huy hiệu subgrid mới cho lưới phụ. Tính năng này hiện đang trong giai đoạn thử nghiệm trong Chrome Canary.

Để kiểm tra và gỡ lỗi một lưới lồng nhau là lưới con, do đó kế thừa số lượng và kích thước của các track từ lưới mẹ, hãy nhấp vào huy hiệu. Công cụ này bật/tắt một lớp phủ cho thấy các cột, hàng và số của chúng ở trên cùng của phần tử trong khung nhìn.

Huy hiệu lưới phụ và lớp phủ trong khung nhìn.

Để xem danh sách tất cả huy hiệu trong bảng điều khiển Elements (Phần tử), hãy xem tài liệu tham khảo về Huy hiệu.

Vấn đề về Chromium: 1442536.

Độ đặc hiệu của bộ chọn trong chú giải công cụ

Trong Elements (Phần tử) > Styles (Kiểu), hãy di chuột qua tên của một bộ chọn để xem trọng số cụ thể của bộ chọn đó trong một chú thích.

Chú thích có trọng số cụ thể của bộ chọn.

Vấn đề về Chromium: 1204932.

Giá trị của các thuộc tính CSS tuỳ chỉnh trong chú thích

Trong Elements (Phần tử) > Styles (Kiểu), hãy di chuột lên tên thuộc tính CSS tuỳ chỉnh để xem giá trị của thuộc tính đó trong chú thích.

Chú thích có giá trị của thuộc tính CSS tuỳ chỉnh.

Nhóm Công cụ cho nhà phát triển xin gửi lời cảm ơn đến 一丝 và Suyan vì đã thực hiện cải tiến này.

Vấn đề về Chromium: 1380779.

Cải thiện nguồn

Làm nổi bật cú pháp CSS

Bảng điều khiển Nguồn sẽ nhận được những thông tin sau cho các tệp CSS được xử lý trước, chẳng hạn như SASS, SCSS và LESS:

  • Làm nổi bật cú pháp.
  • Hỗ trợ trình chỉnh sửa nội tuyến. Các trình chỉnh sửa này tương tự như các trình chỉnh sửa trong Phần tử > Kiểu, ví dụ: Bộ chọn màu và Trình chỉnh sửa gia tốc.

Cải thiện tính năng làm nổi bật cú pháp CSS và hỗ trợ trình chỉnh sửa nội tuyến trong phần Nguồn.

Vấn đề về Chromium: 1302261, 1392085.

Phím tắt để đặt điểm ngắt có điều kiện

Giờ đây, bạn có thể đặt điểm ngắt có điều kiện nhanh hơn bằng một phím tắt. Để mở hộp thoại điểm ngắt, hãy giữ phím Command (MacOS) hoặc Control (Windows / Linux) rồi nhấp vào số dòng ở cột bên trái của Sources (Nguồn) > Editor (Trình chỉnh sửa).

Số dòng ở cột bên trái và hộp thoại điểm ngắt.

Vấn đề về Chromium: 1405767.

Ứng dụng > Giảm hoạt động theo dõi tỷ lệ thoát

Thử nghiệm Bounce Tracking Mitigations (Giảm thiểu hoạt động theo dõi lượt chuyển hướng) trong Chrome cho phép bạn xác định và xoá trạng thái của những trang web có vẻ như đang thực hiện hoạt động theo dõi trên nhiều trang web bằng kỹ thuật theo dõi lượt chuyển hướng. Ngăn Application (Ứng dụng) > Background Services (Dịch vụ nền) có một thẻ Bounce Tracking Mitigations (Giảm thiểu hoạt động theo dõi lượt truy cập ảo) mới. Thẻ này cho phép bạn buộc giảm thiểu hoạt động theo dõi theo cách thủ công và liệt kê những trang web đã bị xoá trạng thái.

Khám phá tính năng bảo mật này:

  1. Chặn cookie của bên thứ ba trong Chrome. Chuyển đến phần Trình đơn có biểu tượng ba dấu chấm. > Cài đặt > Bảo mật. Quyền riêng tư và bảo mật > Cookie và các dữ liệu khác của trang web > Nút chọn đã đánh dấu. Chặn cookie của bên thứ ba rồi bật chế độ này.
  2. Trong chrome://flags, hãy đặt thử nghiệm Bounce Tracking Mitigations (Giảm thiểu hoạt động theo dõi tỷ lệ thoát) thành Enabled With Deletion (Đã bật và xoá).
  3. Kiểm tra trang minh hoạ này, mở Ứng dụng > Dịch vụ nền > Các biện pháp giảm thiểu hoạt động theo dõi lượt truy cập gián tiếp, nhấp vào một đường liên kết chuyển hướng trên trang, đợi (10 giây) để Chrome ghi lại lượt truy cập gián tiếp và nhấp vào Buộc chạy để xoá trạng thái ngay lập tức.

Tính năng Giảm hoạt động theo dõi số trang không truy cập liệt kê một trạng thái xoá.

Ngoài ra, thẻ Vấn đề sẽ cảnh báo cho bạn về việc xoá trạng thái sắp tới.

Vấn đề về Chromium: 1432303.

Lighthouse 10.2.0

Giờ đây, bảng Lighthouse chạy Lighthouse 10.2.0. Đáng chú ý nhất là chế độ kiểm tra Thời gian hiển thị nội dung lớn nhất sẽ nhận được một bảng có các phép tính theo giai đoạn cho việc điều tiết được mô phỏng và điều tiết bằng Công cụ cho nhà phát triển. Bạn cũng có thể xem danh sách đầy đủ các thay đổi.

Bảng giai đoạn LCP.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Bỏ qua tập lệnh nội dung theo mặc định

Cài đặt. Cài đặt > Danh sách bỏ qua > Hộp đánh dấu. Tập lệnh nội dung do các tiện ích chèn hiện được bật theo mặc định.

Khi bật chế độ cài đặt này:

  • Debugger bỏ qua các tập lệnh như vậy và không dừng lại ở các trường hợp ngoại lệ do những tập lệnh đó gửi.
  • Ngăn Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi) sẽ bỏ qua các khung hình bị bỏ qua. Để tắt tính năng bỏ qua tại đây, hãy đánh dấu vào Hộp đánh dấu. Hiển thị các khung có trong danh sách bỏ qua.
  • Bảng điều khiển thu gọn các khung bị bỏ qua trong dấu vết ngăn xếp. Nhấp vào Hiện thêm N khung hình để mở rộng và Hiện ít khung hình hơn để thu gọn lại.

Tập lệnh nội dung do các tiện ích chèn được bật theo mặc định. Bạn có thể tìm thấy danh sách này trong phần Cài đặt, sau đó chọn Danh sách bỏ qua.

Ngoài ra, các hộp đánh dấu trong Danh sách bỏ qua có văn bản rõ ràng hơn.

Vấn đề về Chromium: 1440958, 1364501.

Mạng > In phản hồi theo cách dễ đọc theo mặc định

Theo mặc định, ngăn Network > Response (Mạng > Phản hồi) hiện in nội dung phản hồi được rút gọn một cách rõ ràng, tương tự như ngăn Sources (Nguồn).

Đã bật tính năng in đẹp trong cửa sổ Phản hồi của thẻ Mạng.

Ngoài ra, các tệp SVG sẽ được làm nổi bật cú pháp.

Làm nổi bật cú pháp SVG.

Các vấn đề về Chromium: 1382752, 1385374.

Thông tin nổi bật khác

Sau đây là một số điểm cải tiến và bản sửa lỗi đáng chú ý trong bản phát hành này:

  • Cài đặt. Cài đặt > Thiết bị: Đã thêm Facebook cho Android phiên bản 407 trên Pixel 6 vào danh sách chuỗi tác nhân.
  • Mạng: Đã thêm lối tắt Xoá nhật ký mạng (1444991):
    • macOS: Command + K
    • Windows/Linux: Control + L
  • Xoá lựa chọn thả xuống Trình ghi > Bản ghi N > Bảng điều khiển Thông tin chi tiết về hiệu suất (1414773).
  • Những biểu định kiểu không tải được hiện đã bị ẩn khỏi cây trình điều hướng (1386059).
  • Hiệu suất: Khắc phục lỗi hiển thị không chính xác của bản nhạc Tương tác có thể mở rộng (1432510).
  • Phần tử: Giờ đây, những biểu định kiểu không tải được sẽ được gạch chân bằng đường lượn sóng (1440626).
  • Debugger không tự động chuyển sang WebAssembly khi không có trình bổ trợ cho ngôn ngữ tương ứng (1443342).
  • Phím tắt di chuyển con trỏ một từ tại một thời điểm được khôi phục cho các tệp CSS trong Sources > Editor (1241848):
    • macOS: Alt + Mũi tên
    • Windows/Linux: Ctrl + Mũi tên

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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.