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

Jecelyn Yeen

Gợi ý cho các thuộc tính CSS không hoạt động

Giờ đây, Công cụ cho nhà phát triển sẽ xác định những kiểu CSS hợp lệ nhưng không có hiệu ứng hiển thị. Trong ngăn Kiểu, Công cụ cho nhà phát triển làm mờ các thuộc tính không hoạt động. Di chuột lên biểu tượng bên cạnh để tìm hiểu lý do quy tắc không có hiệu ứng hiển thị.

Gợi ý cho các thuộc tính CSS không hoạt động.

Vấn đề về Chromium: 1178508

Tự động phát hiện bộ chọn XPath và văn bản trong bảng điều khiển Trình ghi

Giờ đây, bảng điều khiển Trình ghi hỗ trợ bộ chọn XPath và bộ chọn văn bản. Bắt đầu ghi lại một luồng người dùng và trình ghi sẽ tự động chọn XPath và văn bản duy nhất ngắn nhất của một phần tử làm bộ chọn (nếu có).

Bộ chọn XPath và văn bản trong bảng điều khiển Trình ghi.

Các vấn đề về Chromium: 1327206,1327209

Bước qua các biểu thức được phân tách bằng dấu phẩy

Giờ đây, bạn có thể chuyển qua các biểu thức được phân tách bằng dấu phẩy trong quá trình gỡ lỗi. Điều này giúp cải thiện khả năng gỡ lỗi của mã đã giảm kích thước.

Thực hiện từng bước thông qua các biểu thức được phân tách bằng dấu phẩy.

Trước đây, DevTools chỉ hỗ trợ bước qua các biểu thức được phân tách bằng dấu chấm phẩy.

Với mã bên dưới,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Trình chuyển đổi mã nguồn và trình rút gọn có thể chuyển đổi các biểu thức này thành biểu thức được phân tách bằng dấu phẩy.

function bar(){return foo(),foo(),42}

Điều này gây nhầm lẫn trong quá trình gỡ lỗi vì hành vi bước khác nhau giữa mã được rút gọn và mã được tạo. Điều này càng gây nhầm lẫn hơn khi sử dụng bản đồ nguồn để gỡ lỗi mã được rút gọn theo mã gốc, vì nhà phát triển sẽ xem dấu chấm phẩy (được chuỗi công cụ chuyển thành dấu phẩy) nhưng trình gỡ lỗi không dừng ở dấu chấm phẩy.

Vấn đề về Chromium: 1370200

Cải thiện chế độ cài đặt Danh sách bỏ qua

Chuyển đến phần Cài đặt > Danh sách bỏ qua. Các công cụ cho nhà phát triển cải thiện thiết kế để giúp bạn định cấu hình các quy tắc bỏ qua một tập lệnh hoặc mẫu tập lệnh.

Thẻ Danh sách bỏ qua.

Vấn đề về Chromium: 1356517

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

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

  • Tự động hoàn thành tên thuộc tính CSS trong ngăn Styles (Kiểu) khi nhấn phím cách. (1343316)
  • Xoá tính năng tự động cuộn trong đường dẫn của bảng điều khiển Phần tử. (1369734)

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.