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 tiến về các thành phần

Huy hiệu lưới con CSS mới

Bảng điều khiển Phần tử sẽ có một huy hiệu subgrid mới cho lưới con. 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 lưới lồng nhau là một lưới con và do đó, kế thừa số lượng và kích thước đường dẫn từ lưới mẹ, hãy nhấp vào huy hiệu. Nút này bật/tắ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 con 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ới Chromium: 1442536.

Đặc điểm của bộ chọn trong chú giải công cụ

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

Chú giải công cụ có trọng số cụ thể của bộ chọn.

Vấn đề với Chromium: 1204932.

Giá trị của các thuộc tính CSS tuỳ chỉnh trong chú giải công cụ

Trong 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 chú giải công cụ.

Chú giải công cụ cung cấp 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 cảm ơn 一丝 và Suyan đã giúp cải thiện ứng dụng này.

Vấn đề với Chromium: 1380779.

Cải thiện nguồn

Đánh dấu cú pháp CSS

Bảng điều khiển Sources (Nguồn) cung cấp những 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ới Chromium: 1302261, 1392085.

Phím tắt để đặt các đ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 trong cột bên trái của Nguồn > 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ới 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à xóa trạng thái của các trang web có vẻ thực hiện hoạt động theo dõi số trang không truy cập 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 hoạt động theo dõi số trang không truy cập mới cho phép bạn buộc theo dõi các biện pháp giảm thiểu theo cách thủ công và liệt kê các trang web có trạng thái đã bị xoá.

Hãy 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 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 > Đã chọn 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 hoạt động theo dõi số trang không truy cập thành Bật khi xoá.
  3. Hãy kiểm tra trang minh hoạ này, mở Ứng dụng > Dịch vụ nền > Giảm 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 số trang 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.

Tính năng giảm hoạt động theo dõi số trang không truy cập liệt kê hoạt động xóa 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ới Chromium: 1432303.

Lighthouse 10.2.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 10.2.0. Đáng chú ý nhất là quy trình kiểm tra Thời gian hiển thị nội dung lớn nhất nhận được một bảng có các phép tính về giai đoạn đối với chế độ điều tiết trong Công cụ cho nhà phát triển và mô phỏng. 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.

Sự cố 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 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 các tập lệnh đó gửi.
  • Ngăn Sources (Nguồn) > Call Stack (Ngăn xếp lệnh gọi) bỏ qua các khung hình 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 thị các khung 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 để mở rộng và Ẩn bớt để thu gọn lần nữa.

Tập lệnh nội dung do các tiện ích chèn vào theo mặc định. Bạn có thể tìm tuỳ chọn này bằng cách truy cập vào phần Cài đặt, sau đó chọn Danh sách bỏ qua.

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

Các sự cố với Chromium: 1440958, 1364501.

Mạng > Phản hồi xuất hiện đẹp mắt theo mặc định

Theo mặc định, ngăn Network > Response (Mạng) > Response (Phản hồi) sẽ in đẹp các nội dung phản hồi được rút gọn theo mặc định, tương tự như bảng Sources (Nguồn).

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

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

Đánh dấu cú pháp SVG.

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

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

Dưới đây là một số bản 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 dành cho Android v407 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 Bản ghi > Bản ghi N > Bảng điều khiển thông tin chi tiết về hiệu suất (1414773).
  • Các biểu định kiểu không tải được hiện bị ẩn 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 kênh Tương tác có thể mở rộng (1432510).
  • Phần tử: Giờ đây, các biểu định kiểu không tải được 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 vào 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 sẽ được khôi phục cho các tệp CSS trong phần Nguồn > Trình chỉnh sửa (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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video trên YouTube.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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