Tính năng mới trong Công cụ dành cho nhà phát triển, Chrome 133

Nhật ký trò chuyện liên tục với AI

Giờ đây, bảng điều khiển Trợ lý AI sẽ lưu trữ nhật ký trò chuyện của bạn trên thiết bị trong các phiên, nhờ đó, bạn có thể xem các cuộc trò chuyện trước đây với Gemini ngay cả sau khi tải lại DevTools hoặc Chrome.

Cải thiện bảng điều khiển Hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Thông tin chi tiết về việc phân phối hình ảnh

Giờ đây, thẻ Hiệu suất > Thông tin chi tiết có thể làm nổi bật những hình ảnh mà bạn có thể tối ưu hoá kích thước tệp. Nhấp vào một hình ảnh trong thông tin chi tiết để xem hình ảnh đó được đánh dấu trong dải Mạng.

Để tìm hiểu thêm về cách tối ưu hoá việc phân phối hình ảnh, hãy xem bài viết Mã hoá hình ảnh một cách hiệu quả.

Chế độ điều hướng bằng bàn phím cổ điển và hiện đại

Giờ đây, bảng Hiệu suất cho phép bạn chọn kiểu điều hướng bằng bàn phím mà bạn muốn, với những điểm khác biệt chính sau đây:

• Cổ điển: Phóng to bằng con lăn chuột (bàn di chuột lên hoặc xuống) và cuộn dọc bằng tổ hợp phím Shift + con lăn chuột.
• Hiện đại: Cuộn dọc bằng con lăn chuột, cuộn ngang bằng tổ hợp phím Shift + con lăn chuột và thu phóng bằng tổ hợp phím Command/Control + con lăn chuột.

Để chọn kiểu bạn muốn, ở góc trên cùng bên phải của bảng điều khiển, hãy nhấp vào trợ giúp Hiện phím tắt rồi chọn Kiểu cổ điển hoặc Kiểu hiện đại. Hộp thoại phím tắt cũng cung cấp cho bạn một bảng tham khảo các phím tắt có sẵn.

Bỏ qua các tập lệnh không liên quan trong biểu đồ hình ngọn lửa

Để tập trung hơn vào mã của mình, giờ đây, bạn có thể thêm các tập lệnh không liên quan vào danh sách bỏ qua ngay trong bảng điều khiển Hiệu suất. Bảng điều khiển sẽ tự động thu gọn các lớp lồng ghép dư thừa.

Để thêm tập lệnh vào danh sách bỏ qua, hãy nhấp vào compress Hiện hộp thoại cài đặt danh sách bỏ qua trong thanh thao tác trên cùng rồi nhập một biểu thức chính quy vào trường nhập. Biểu đồ ngọn lửa sẽ áp dụng quy tắc mới khi bạn nhập.

Công cụ cho nhà phát triển lưu các quy tắc trong danh sách bỏ qua mà bạn thêm vào cài đặt Cài đặt > Danh sách bỏ qua và bạn có thể bật/tắt các quy tắc này trong hộp thoại bất cứ lúc nào.

Đánh dấu dòng thời gian và làm nổi bật phạm vi khi di chuột

Để giúp bạn hiểu rõ hơn về dấu vết hiệu suất, bảng điều khiển Hiệu suất hiện có những điểm sau:

• Cho bạn thấy một điểm đánh dấu dọc trải dài toàn bộ dấu vết hiệu suất khi bạn di chuột qua Dòng thời gian.
• Đánh dấu một dải trong Dòng thời gian khi bạn di chuột qua các mục trong bản Chính.

Chế độ cài đặt điều tiết được đề xuất

Giờ đây, bảng điều khiển Hiệu suất đề xuất các chế độ cài đặt điều tiết cả trong chỉ số trực tiếp và trong các trình đơn thả xuống chế độ cài đặt Chế độ cài đặt chụp có liên quan.

Hiện tại, mức điều tiết CPU được đề xuất là 4x slowdown được sử dụng thường xuyên nhất và đề xuất về mạng dựa trên dữ liệu của Báo cáo trải nghiệm người dùng Chrome, nếu bạn bật chỉ số trực tiếp.

Ngoài ra, bảng điều khiển Hiệu suất hiện nhắc bạn về chế độ cài đặt điều tiết mà bạn đã sử dụng bên cạnh mỗi dấu vết trong trình đơn thả xuống Các phiên gần đây trên thanh thao tác.

Thẻ đánh dấu thời gian trong lớp phủ

Các điểm đánh dấu thời gian đã được di chuyển từ tệp Timings (Thời gian) xuống cuối dấu vết và hiện được đặt chồng lên trên tất cả các tệp, đồng thời vẫn hiển thị ngay cả khi tệp Timings (Thời gian) bị ẩn.

Track Thời gian sẽ giữ lại các lệnh gọi mark() và measure() tuỳ chỉnh của bạn.

Dấu vết ngăn xếp của các lệnh gọi JavaScript trong phần Tóm tắt

Thẻ Hiệu suất > Tóm tắt hiện cho bạn thấy các dấu vết ngăn xếp của lệnh gọi JavaScript, bao gồm cả lệnh gọi không đồng bộ.

Chế độ cài đặt huy hiệu đã được chuyển sang trình đơn trong Elements

Chế độ cài đặt huy hiệu trong bảng Phần tử đã được di chuyển từ một thanh thao tác bị ẩn theo mặc định sang trình đơn nhấp chuột phải tương ứng.

Bảng điều khiển "Tính năng mới" mới

Bảng điều khiển Tính năng mới có diện mạo mới, gần giống với thiết kế của Chrome hơn.

Vấn đề về Chromium: 325441858.

Lighthouse 12.3.0

Bảng Lighthouse hiện chạy Lighthouse 12.3.0.

Ngoài những nội dung khác, bản cập nhật này còn bổ sung các quy trình kiểm tra mới để kiểm tra xem có tách biệt nguồn gốc đúng cách bằng COOP và chính sách HSTS mạnh hay không. Xem danh sách đầy đủ các thay đổi.

Để 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: 40543651.

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:

• Nguồn: Khi bị tạm dừng, Trình gỡ lỗi hiện không chuyển sang ngữ cảnh trình chạy dịch vụ một cách bất ngờ nếu ngữ cảnh đó được tạo sau khi tạm dừng (373893057).
• Hiệu suất:
  • Khi di chuột lên các tập lệnh, chú thích trong biểu đồ ngọn lửa hiện hiển thị URL (nếu có) (368541957).
  • Tóm tắt: Biểu đồ hình tròn được thay thế bằng biểu đồ dạng thanh.
  • Hộp đánh dấu Dữ liệu phần mở rộng trong Chế độ cài đặt ghi hình được đổi tên thành Hiện các đường đánh dấu tuỳ chỉnh.
  • Thẻ Thông tin chi tiết hiện có phần Thông tin chi tiết đã qua (N) và được thu gọn theo mặc định.
• Ứng dụng > Bộ nhớ: Bạn có thể tạo các mục lưu trữ có khoá trống vì chúng hợp lệ về mặt kỹ thuật (373703285).
• Chế độ thiết bị hiện đã bị tắt cho các trang chrome:// (40186276).
• Mạng:
  • Khi bật chế độ cài đặt tương ứng, việc nhấp vào Xuất HAR một lần sẽ mở ra một trình đơn có hai lựa chọn (đã dọn dẹp và có dữ liệu nhạy cảm). Trước đây, trình đơn sẽ mở ra khi bạn nhấp và giữ (378076279).
  • Lệnh Sao chép dưới dạng cURL hiện sử dụng thuộc tính -b để bỏ qua cookie và dễ đọc hơn, thay vì -H 'cookie:...' (40791742).
• Hỗ trợ tiếp cận: Giờ đây, bạn có thể di chuyển các thẻ bên trong bảng điều khiển sang trái hoặc phải bằng trình đơn theo bối cảnh (383164782).
• Chặn yêu cầu kết nối mạng: Chế độ cài đặt trình đơn lệnh này hiện đồng bộ hoá với hộp đánh dấu tương ứng (378058733).

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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" 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 bài Tính năng mới trong Công cụ cho nhà phát triển.