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

Nội dung cập nhật về máy chủ MCP của Công cụ cho nhà phát triển

Chúng tôi đã thực hiện nhiều điểm cải tiến cho máy chủ MCP của Công cụ cho nhà phát triển và phát hành phiên bản 0.11.0.

  • Khi đưa ra lời nhắc trong ứng dụng MCP (Gemini CLI, Cursor, ...) của mình, giờ đây, bạn có thể tham chiếu các phần tử và yêu cầu mạng được chọn trong các bảng điều khiển Phần tử và Mạng
  • Giờ đây, công cụ list_console_messages cũng bao gồm các vấn đề xuất hiện trong bảng điều khiển Issues (Vấn đề)
  • Giờ đây, bạn có thể dùng công cụ press_key mới để gỡ lỗi các sự kiện bàn phím không liên quan đến các phần tử biểu mẫu
  • Giờ đây, bạn có thể lưu ảnh chụp nhanh cây hỗ trợ tiếp cận vào ổ đĩa
  • Giờ đây, bạn có thể tải lại các trang, đồng thời có thể bỏ qua bộ nhớ đệm (nếu muốn)
  • Định cấu hình cờ --user-data-dir để sử dụng một hồ sơ Chrome hiện có

Hãy xem nhật ký thay đổi công khai trên GitHub để biết danh sách đầy đủ các thay đổi và bản sửa lỗi, đồng thời tìm hiểu thêm về máy chủ MCP của Công cụ cho nhà phát triển trong bài đăng thông báo trên blog.

Cải thiện tính năng chia sẻ dấu vết

Hộp thoại chia sẻ dấu vết trong bảng điều khiển Hiệu suất

Giờ đây, khi xuất dấu vết hiệu suất, bạn có thể thêm dữ liệu bổ sung vào tệp đã xuất để dễ dàng gỡ lỗi hơn cho chính mình hoặc đồng nghiệp trong tương lai. Giờ đây, bạn có thể chọn thêm các thông tin sau:

  • Nội dung tài nguyên: Bản sao của tất cả các tệp HTML, CSS và JavaScript (không bao gồm tập lệnh tiện ích)
  • Bản đồ nguồn tập lệnh: Mối liên kết đến mã đã tạo, cho phép bạn xem tên hàm và tệp nguồn ban đầu.

Tìm hiểu về những thông tin nên chia sẻ và những thông tin nên giữ kín trong tài liệu mới cập nhật của chúng tôi.

Chúng tôi xin cảm ơn các đồng nghiệp tại Microsoft đã hợp tác để đạt được thành quả này và là những người đã dẫn dắt công việc ban đầu cho dự án này.

Hỗ trợ cho @starting-style

Giờ đây, bảng Phần tử hỗ trợ gỡ lỗi quy tắc CSS @starting-style mới. Đây là điều cần thiết để tạo ảnh động khi bắt đầu.

Giờ đây, bạn có thể thấy một biểu tượng starting-style trong cây Elements (Phần tử) bên cạnh các phần tử có liên quan, chuyển đổi trạng thái starting-style của phần tử bằng cách nhấp vào nút dạng viên, đồng thời kiểm tra và gỡ lỗi khối @starting-style trong thẻ Styles (Kiểu).

Tiện ích trình chỉnh sửa để hiển thị: masonry

Nếu thử nghiệm với bố cục CSS Masonry, bạn hiện có thể sử dụng cùng một tiện ích trình chỉnh sửa như đã quen thuộc từ bố cục display: flexgrid để nhanh chóng chuyển đổi qua nhiều lựa chọn căn chỉnh trong bố cục masonry.

Lighthouse 13

Bảng Lighthouse hiện chạy Lighthouse 13. Với cột mốc này, quá trình hợp nhất thông tin chi tiết về hiệu suất trên Công cụ cho nhà phát triển và Lighthouse sẽ kết thúc.

Tìm hiểu thêm trong bài đăng thông báo trên blog. Để tìm hiểu về những lợi ích của Lighthouse và cách công cụ này kết nối với bảng điều khiển Hiệu suất trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá trang web của bạ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.