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

Sofia Emelianova
Sofia Emelianova
GitHub

Các điểm cải tiến về thành phần

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

Bảng điều khiển Phần tử sẽ nhận đượ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, từ đó kế thừa số lượng và kích thước bản nhạc từ lưới mẹ, hãy nhấp vào huy hiệu. Nó chuyển đổi một lớp phủ hiển thị các cột, hàng và số của chúng ở đầu phần tử trong khung nhìn.

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

Để biết danh sách tất cả huy hiệu trong bảng Thành phần, hãy xem Tài liệu tham khảo về huy hiệu.

Vấn đề về Chromium: 1442536.

Mức độ cụ thể của bộ chọn trong chú thích

Trong Phần tử > Kiểu, hãy di chuột qua tên bộ chọn để xem độ đậm đặc trưng của bộ chọn đó trong phần chú thích.

Chú giải công cụ có trọng số về mức độ cụ thể của một bộ chọn.

Vấn đề về Chromium: 1204932.

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

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

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

Nhóm Công cụ cho nhà phát triển muốn bày tỏ lòng biết ơn với 一丝 và Suyan vì đã đạt được mục tiêu 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 Sources (Nguồn) chứa các thông tin sau cho các tệp CSS đã xử lý trước, chẳng hạn như SASS, SCSS và LESS:

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 cùng dòng trong 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 lối tắt. Để mở hộp thoại điểm ngắt, hãy giữ phím Command (MacOS) hoặc Control (Windows / Linux) và nhấp vào số dòng ở cột bên trái của Sources > 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 thiểu hoạt động theo dõi số trang không truy cập

Thử nghiệm Giảm hoạt động theo dõi số trang không truy cập trong Chrome cho phép bạn xác định và xoá trạng thái của các trang web có vẻ như đang theo dõi trên nhiều trang web bằng cách sử dụng kỹ thuật theo dõi số trang không truy cập. Ngăn Ứng dụng > Dịch vụ nền có thẻ Giảm thiểu hoạt động theo dõi số trang không truy cập mới, cho phép bạn buộc giảm hoạt động theo dõi theo cách thủ công và liệt kê những trang web có trạng thái đã bị xoá.

Hãy xem tính năng bảo mật này:

  1. Chặn cookie của bên thứ ba trong Chrome. Chuyển tới và bật 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 trang web khác > Đã đánh dấu nút chọn. Chặn cookie của bên thứ ba.
  2. Trong chrome://flags, hãy đặt thử nghiệm Giảm thiểu hoạt động theo dõi số trang không truy cập thành Bật khi xoá.
  3. Kiểm tra trang minh hoạ này, mở Ứng dụng > Dịch vụ nền > Giảm thiểu hoạt động theo dõi số trang không truy cập, nhấp vào một đường liên kết thoát trên trang, đợi (10 giây) để Chrome ghi lại trường hợp không truy cập rồi nhấp vào Buộc chạy để xoá trạng thái đó ngay lập tức.

Hoạt động giảm hoạt động theo dõi số trang không truy cập liệt kê việc xoá trạng thái.

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

Vấn đề về Chromium: 1432303.

Lighthouse 10.2.0

Bảng điều khiển Lighthouse hiện chạy phiên bản Lighthouse 10.2.0. Đáng chú ý nhất, quy trình kiểm tra Nội dung lớn nhất hiển thị sẽ tạo một bảng có các phép tính giai đoạn để điều tiết được mô phỏng và trong Công cụ cho nhà phát triển. Ngoài ra, hãy xem danh sách đầy đủ các thay đổi.

Bảng giai đoạn LCP.

Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển 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 tiện ích chèn hiện được bật theo mặc định.

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

  • Trình gỡ lỗi sẽ bỏ qua các tập lệnh như vậy và không dừng lại trên các ngoại lệ do chúng gửi.
  • Ngăn Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi) bỏ qua các khung bị bỏ qua. Để tắt chế độ bỏ qua tại đây, hãy đánh dấu vào Hộp đánh dấu. Hiện các khung hình 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ị thêm N khung để mở rộng và nhấp vào Ẩn bớt để thu gọn lại.

Tập lệnh nội dung được chèn bởi các tiện ích được bật theo mặc định. Hãy tìm tuỳ chọn này bằng cách truy cập vào phần Cài đặt > Danh sách bỏ qua.

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

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

Mạng > Mặc định tạo phản hồi đẹp

Theo mặc định, ngăn Mạng > Phản hồi sẽ tạo bản in đẹp cho các nội dung phản hồi rút gọn, tương tự như bảng điều khiển 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, tệp SVG được làm nổi bật theo cú pháp.

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

Vấn đề về Chromium: 1382752, 1385374.

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi và cải tiến đá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á tuỳ chọn thả xuống Máy ghi âm > Record N > Bảng điều khiển Thông tin chi tiết về hiệu suất (1414773).
  • Không tải được biểu định kiểu khỏi cây đ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 kênh Lượt tương tác có thể mở rộng (1432510).
  • Phần tử: Những biểu định kiểu không tải được giờ đây sẽ được gạch dưới bằng các đường gợn sóng (1440626).
  • Trình gỡ lỗi không tự động bước trong 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ừ mỗi lần đượ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 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   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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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