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, DevTools xác định các kiểu CSS hợp lệ nhưng không có hiệu ứng rõ ràng. Trong ngăn Styles (Kiểu), Công cụ cho nhà phát triển sẽ làm mờ các thuộc tính không hoạt động. Di chuột qua biểu tượng bên cạnh quy tắc đó để tìm hiểu lý do tại sao quy tắc không có hiệu lực rõ ràng.

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 của Trình ghi

Bảng điều khiển Recorder (Máy ghi âm) hiện hỗ trợ bộ chọn XPath và văn bản. Bắt đầu ghi lại 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.

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ể thực hiện các bước qua các biểu thức được phân tách bằng dấu phẩy trong khi gỡ lỗi. Điều này giúp cải thiện khả năng gỡ lỗi của mã đã rút gọn.

Di chuyển 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ợ việc 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ã dưới đây,

function foo() {}

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

Trình biên dịch chuyển đổi và trình rút gọn có thể biến 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ã rút gọn và mã đã viết. Thậm chí còn khó hiểu hơn khi sử dụng bản đồ nguồn để gỡ lỗi mã đã rút gọn về mặt mã gốc, vì nhà phát triển sau đó xem xét dấu chấm phẩy (được chuỗi công cụ biến thành dấu phẩy) nhưng trình gỡ lỗi không dừng lại ở đó.

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ô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ố bản 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 cuộn tự động trong đường dẫn của bảng điều khiển Element (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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.