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

Hỗ trợ gỡ lỗi cho các lỗi vi phạm Loại đáng tin cậy

Điểm ngắt khi có lỗi vi phạm Loại đáng tin cậy

Giờ đây, bạn có thể đặt điểm ngắt và bắt các trường hợp ngoại lệ về Lỗi vi phạm loại đáng tin cậy trong bảng điều khiển Nguồn.

API Trusted Types giúp bạn ngăn chặn các lỗ hổng tập lệnh trên nhiều trang web dựa trên DOM. Tìm hiểu cách viết, xem xét và duy trì các ứng dụng không có lỗ hổng DOM XSS bằng Trusted Types tại đây.

Trong bảng điều khiển Nguồn, hãy mở ngăn bên trình gỡ lỗi. Mở rộng phần CSP Violation Breakpoints (Điểm ngắt vi phạm CSP) rồi đánh dấu vào hộp Trusted Type violations (Vi phạm Loại đáng tin cậy) để tạm dừng khi có các trường hợp ngoại lệ. Hãy tự mình trải nghiệm với trang minh hoạ này.

Vấn đề về Chromium: 1142804

Liên kết vấn đề trong bảng điều khiển Nguồn với thẻ Vấn đề

Giờ đây, bảng Nguồn sẽ hiển thị một biểu tượng cảnh báo bên cạnh dòng vi phạm Loại tin cậy. Di chuột lên đó để xem trước trường hợp ngoại lệ. Nhấp vào thẻ này để mở rộng thẻ Vấn đề. Thẻ này cung cấp thêm thông tin chi tiết về các trường hợp ngoại lệ và hướng dẫn cách khắc phục.

Vấn đề về Chromium: 1150883

Chụp ảnh màn hình nút bên ngoài khung hiển thị

Giờ đây, bạn có thể chụp ảnh màn hình của nút cho một nút đầy đủ, bao gồm cả nội dung bên dưới phần hiển thị ban đầu. Trước đây, ảnh chụp màn hình bị cắt đối với nội dung không xuất hiện trong khung nhìn. Ảnh chụp màn hình toàn trang hiện cũng chính xác.

Trong bảng Phần tử, hãy nhấp chuột phải vào một phần tử rồi chọn Chụp ảnh màn hình của nút.

Vấn đề về Chromium: 1003629

Thẻ Trust Tokens mới cho các yêu cầu mạng

Kiểm tra các yêu cầu mạng Trust Token bằng thẻ Trust Tokens (Trust Token) mới.

Trust Token là một API mới giúp chống lại hành vi lừa đảo và phân biệt bot với người dùng thực mà không cần theo dõi thụ động. Tìm hiểu cách bắt đầu sử dụng Trust Tokens.

Chúng tôi sẽ cung cấp thêm tính năng hỗ trợ gỡ lỗi trong các bản phát hành tiếp theo.

Vấn đề về Chromium: 1126824

Lighthouse 7 trong bảng điều khiển Lighthouse

Bảng Lighthouse hiện đang chạy Lighthouse 7. Hãy xem ghi chú phát hành để biết danh sách đầy đủ các thay đổi.

Các bài kiểm tra mới trong Lighthouse 7:

• Tải trước hình ảnh có Thời gian hiển thị nội dung lớn nhất (LCP). Kiểm tra xem hình ảnh mà phần tử LCP sử dụng có được tải trước hay không để cải thiện thời gian LCP.
• Các vấn đề được ghi vào bảng điều khiển Issues. Cho biết danh sách các vấn đề chưa được giải quyết trong bảng điều khiển Issues.
• Ứng dụng web tiến bộ (PWA). Danh mục PWA đã thay đổi khá đáng kể.

• Nhóm Có thể cài đặt hiện được hỗ trợ hoàn toàn bằng các quy trình kiểm tra khả năng giúp Chrome đáp ứng các tiêu chí có thể cài đặt. Đây là những tín hiệu tương tự như trong ngăn Manifest.

  • Thử nghiệm "Registers a service worker…" (Đăng ký một worker dịch vụ...) chuyển sang nhóm PWA được tối ưu hoá và thử nghiệm "Uses HTTPS" (Sử dụng HTTPS) hiện được đưa vào thử nghiệm "installability requirements" (yêu cầu về khả năng cài đặt) chính.
  • Nhóm Nhanh và ổn định sẽ bị xoá. Vì quy trình kiểm tra "yêu cầu về khả năng cài đặt" được cải tiến bao gồm cả việc kiểm tra khả năng hoạt động khi không có mạng, nên quy trình kiểm tra "trang hiện tại và start_url trả về mã trạng thái 200 khi không có mạng" đã bị xoá. Chúng tôi cũng đã xoá quy trình kiểm tra "Tốc độ tải trang đủ nhanh trên mạng di động".

Vấn đề về Chromium: 772558

Nội dung cập nhật cho bảng điều khiển Phần tử

Hỗ trợ buộc trạng thái CSS :target

Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để buộc và kiểm tra trạng thái :target của CSS.

Trong bảng Phần tử, hãy chọn một phần tử rồi chuyển đổi trạng thái của phần tử đó. Chọn hộp đánh dấu :target để buộc và kiểm tra các kiểu.

Sử dụng lớp giả :target để tạo kiểu cho phần tử khi giá trị băm trong URL và mã nhận dạng của một phần tử giống nhau. Hãy xem bản minh hoạ này để tự mình dùng thử. Tính năng mới này của Công cụ cho nhà phát triển cho phép bạn kiểm thử các kiểu như vậy mà không cần phải thay đổi URL theo cách thủ công mọi lúc.

Vấn đề về Chromium: 1156628

Lối tắt mới để sao chép phần tử

Sử dụng phím tắt Sao chép phần tử mới để sao chép ngay một phần tử.

Nhấp chuột phải vào một phần tử trong bảng điều khiển Phần tử, chọn Tạo bản sao của phần tử. Một phần tử mới sẽ được tạo bên dưới phần tử đó.

Ngoài ra, bạn có thể sao chép phần tử bằng phím tắt:

• Mac: Shift + Option + ⬇️
• Windows/ Linux: Shift + Alt + ⬇️

Các vấn đề về Chromium: 1150797, 1150797

Công cụ chọn màu cho các thuộc tính CSS tuỳ chỉnh

Giờ đây, ngăn Kiểu sẽ cho thấy các công cụ chọn màu cho các thuộc tính CSS tuỳ chỉnh.

Ngoài ra, bạn có thể giữ phím Shift rồi nhấp vào bộ chọn màu để chuyển đổi giữa các giá trị RGBA, HSLA và Hex của màu.

Vấn đề về Chromium: 1147016

Các phím tắt mới để sao chép thuộc tính CSS

Giờ đây, bạn có thể sao chép các thuộc tính CSS nhanh hơn bằng một số phím tắt mới.

Trong bảng điều khiển Phần tử, hãy chọn một phần tử. Sau đó, nhấp chuột phải vào một lớp CSS hoặc một thuộc tính CSS trong ngăn Kiểu để sao chép giá trị.

Các lựa chọn sao chép cho lớp CSS:

• Sao chép bộ chọn. Sao chép tên bộ chọn hiện tại.
• Sao chép quy tắc. Sao chép quy tắc của bộ chọn hiện tại.
• Sao chép tất cả nội dung khai báo: Sao chép tất cả nội dung khai báo theo quy tắc hiện tại, bao gồm cả các thuộc tính không hợp lệ và có tiền tố.

Các lựa chọn sao chép cho thuộc tính CSS:

• Sao chép nội dung khai báo. Sao chép nội dung khai báo của dòng hiện tại.
• Sao chép tài sản. Sao chép thuộc tính của dòng hiện tại.
• Sao chép giá trị: Sao chép giá trị của dòng hiện tại.

Vấn đề về Chromium: 1152391

Nội dung cập nhật về cookie

Lựa chọn mới để hiện các cookie đã giải mã URL

Giờ đây, bạn có thể chọn xem giá trị cookie được giải mã URL trong ngăn Cookie.

Chuyển đến bảng điều khiển Application (Ứng dụng) rồi chọn ngăn Cookies (Cookie). Chọn một cookie bất kỳ trong danh sách. Đánh dấu vào hộp Hiển thị giá trị cookie đã giải mã của URL mới để xem cookie đã giải mã.

Vấn đề về Chromium: 997625

Chỉ xoá cookie hiển thị

Nút Xoá tất cả cookie trong ngăn Cookie hiện đã được thay thế bằng nút Xoá cookie đã lọc.

Trong bảng điều khiển Application (Ứng dụng) > ngăn Cookies (Cookie), hãy nhập văn bản vào hộp văn bản để lọc cookie. Trong ví dụ này, chúng ta sẽ lọc danh sách theo "PREF". Nhấp vào nút Xoá cookie đã lọc để xoá các cookie hiển thị. Xoá văn bản bộ lọc và bạn sẽ thấy các cookie khác vẫn còn trong danh sách. Trước đây, bạn chỉ có thể xoá tất cả cookie.

Vấn đề về Chromium: 978059

Lựa chọn mới để xoá cookie của bên thứ ba trong ngăn Bộ nhớ

Khi bạn xoá dữ liệu trang web trong ngăn Bộ nhớ, theo mặc định, Công cụ cho nhà phát triển hiện chỉ xoá cookie của bên thứ nhất. Bật chế độ bao gồm cả cookie của bên thứ ba để xoá cả cookie của bên thứ ba.

Vấn đề về Chromium: 1012337

Chỉnh sửa User-Agent Client Hints cho thiết bị tuỳ chỉnh

Giờ đây, bạn có thể chỉnh sửa Thông tin mô tả của ứng dụng tác nhân người dùng cho các thiết bị tuỳ chỉnh.

Chuyển đến phần Cài đặt > Thiết bị rồi nhấp vào Thêm thiết bị tuỳ chỉnh.... Mở rộng phần Thông tin mô tả của ứng dụng tác nhân người dùng để chỉnh sửa thông tin mô tả của ứng dụng.

Client Hints của tác nhân người dùng là giải pháp thay thế cho chuỗi tác nhân người dùng, cho phép nhà phát triển truy cập vào thông tin về trình duyệt của người dùng theo cách bảo đảm quyền riêng tư và tiện dụng. Tìm hiểu thêm về User-Agent Client Hints trong web.dev/user-agent-client-hints/.

Vấn đề về Chromium: 1073909

Nội dung cập nhật của bảng điều khiển Mạng

Lưu giữ chế độ cài đặt "ghi nhật ký mạng"

Công cụ cho nhà phát triển hiện duy trì chế độ cài đặt "Ghi nhật ký mạng". Trước đây, Công cụ cho nhà phát triển sẽ đặt lại lựa chọn của người dùng bất cứ khi nào một trang tải lại.

Vấn đề về Chromium: 1122580

Xem các kết nối WebTransport trong bảng điều khiển Mạng

Giờ đây, bảng điều khiển Mạng hiển thị các kết nối WebTransport.

WebTransport là một API mới cung cấp tính năng nhắn tin hai chiều, độ trễ thấp giữa máy chủ và ứng dụng. Tìm hiểu thêm về các trường hợp sử dụng của WebTransport và cách gửi ý kiến phản hồi về tương lai của việc triển khai này tại web.dev/webtransport/.

Vấn đề về Chromium: 1152290

"Trực tuyến" được đổi tên thành "Không điều tiết"

Giờ đây, lựa chọn mô phỏng mạng "Trực tuyến" đã được đổi tên thành "Không điều tiết".

Vấn đề về Chromium: 1028078

Các lựa chọn sao chép mới trong Bảng điều khiển, bảng điều khiển Nguồn và ngăn Kiểu

Phím tắt mới để sao chép đối tượng trong bảng điều khiển và bảng điều khiển Nguồn

Giờ đây, bạn có thể sao chép các giá trị đối tượng bằng các phím tắt mới trong bảng điều khiển Console và Sources. Điều này đặc biệt hữu ích khi bạn có một đối tượng lớn (ví dụ: một mảng dài) cần sao chép.

Các vấn đề về Chromium: 1149859, 1148353

Phím tắt mới để sao chép tên tệp trong bảng điều khiển Nguồn và ngăn Kiểu

Giờ đây, bạn có thể sao chép tên tệp bằng cách nhấp chuột phải vào:

• một tệp trong bảng điều khiển Nguồn, hoặc
• tên tệp trong ngăn Kiểu trong bảng điều khiển Phần tử

Chọn Sao chép tên tệp trong trình đơn theo bối cảnh để sao chép tên tệp.

Vấn đề về Chromium: 1155120

Cập nhật chế độ xem thông tin chi tiết về khung hình

Thông tin mới về Service Worker trong chế độ xem Chi tiết khung

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị các trình chạy dịch vụ chuyên dụng trong khung tạo ra chúng.

Trong bảng điều khiển Application (Ứng dụng), hãy mở rộng một khung có trình thực thi dịch vụ, sau đó chọn một trình thực thi dịch vụ trong cây Service Workers (Trình thực thi dịch vụ) để xem thông tin chi tiết.

Vấn đề về Chromium: 1122507

Đo lường thông tin về Bộ nhớ trong chế độ xem Chi tiết khung hình

Trạng thái API performance.measureMemory() hiện được hiển thị trong phần Mức độ cung cấp API.

API performance.measureMemory() mới ước tính mức sử dụng bộ nhớ của toàn bộ trang web. Tìm hiểu cách theo dõi tổng mức sử dụng bộ nhớ của trang web bằng API mới này trong bài viết này.

Vấn đề về Chromium: 1139899

Đưa ra ý kiến phản hồi trong thẻ Vấn đề

Nếu bạn muốn cải thiện thông báo về vấn đề, hãy chuyển đến thẻ Vấn đề trong Bảng điều khiển hoặc Cài đặt khác > Công cụ khác > Vấn đề > để mở thẻ Vấn đề. Mở rộng thông báo sự cố, rồi nhấp vào Bạn có thấy thông báo sự cố này hữu ích không?, sau đó bạn có thể cung cấp ý kiến phản hồi trong cửa sổ bật lên.

Khung hình bị rớt trong bảng điều khiển Hiệu suất

Khi phân tích hiệu suất tải trong bảng điều khiển Hiệu suất, phần Khung hình hiện đánh dấu các khung hình bị rớt là màu đỏ. Di chuột lên biểu tượng này để xem tốc độ khung hình.

Vấn đề về Chromium: 1075865

Mô phỏng thiết bị có thể gập lại và thiết bị có hai màn hình ở Chế độ thiết bị

Giờ đây, bạn có thể mô phỏng các thiết bị có màn hình kép và thiết bị có thể gập lại trong Công cụ cho nhà phát triển.

Sau khi bật Thanh công cụ thiết bị, hãy chọn một trong các thiết bị sau: Surface Duo hoặc Samsung Galaxy Fold.

Nhấp vào biểu tượng khoảng mới để chuyển đổi giữa tư thế một màn hình hoặc gập và tư thế hai màn hình hoặc mở.

Bạn cũng có thể bật Các tính năng thử nghiệm của nền tảng web để truy cập vào tính năng screen-spanning mới của phương tiện CSS và API getWindowSegments của JavaScript. Biểu tượng thử nghiệm cho biết trạng thái của cờ Các tính năng thử nghiệm của nền tảng web. Biểu tượng sẽ được đánh dấu khi cờ được bật. Chuyển đến chrome://flags rồi bật/tắt cờ.

Vấn đề về Chromium: 1054281

Các tính năng thử nghiệm

Tự động hoá quy trình kiểm thử trình duyệt bằng Puppeteer Recorder

Giờ đây, DevTools có thể tạo tập lệnh Puppeteer dựa trên hoạt động tương tác của bạn với trình duyệt, giúp bạn tự động hoá việc kiểm thử trình duyệt dễ dàng hơn. Puppeteer là một thư viện Node.js cung cấp API cấp cao để kiểm soát Chrome hoặc Chromium thông qua Giao thức DevTools.

Truy cập vào trang minh hoạ này. Mở bảng điều khiển Nguồn trong Công cụ cho nhà phát triển. Chọn thẻ Ghi hình trên ngăn bên trái. Thêm một bản ghi âm mới và đặt tên cho tệp (ví dụ: test01.js).

Nhấp vào nút Ghi ở dưới cùng để bắt đầu ghi lại hoạt động tương tác. Hãy thử điền vào biểu mẫu trên màn hình. Lưu ý rằng các lệnh Puppeteer sẽ được thêm vào tệp cho phù hợp. Nhấp vào nút Ghi một lần nữa để dừng ghi.

Để chạy tập lệnh, hãy làm theo Hướng dẫn bắt đầu trên trang web chính thức của Puppeteer.

Xin lưu ý rằng đây là một thử nghiệm ở giai đoạn đầu. Chúng tôi dự định cải thiện và mở rộng chức năng của Trình ghi âm theo thời gian.

Vấn đề về Chromium: 1144127

Trình chỉnh sửa phông chữ trong ngăn Kiểu

Font Editor mới là một trình chỉnh sửa lớp phủ trong ngăn Styles (Kiểu) cho các thuộc tính liên quan đến phông chữ, giúp bạn tìm được kiểu chữ hoàn hảo cho trang web của mình.

Popover cung cấp một giao diện người dùng gọn gàng để thao tác linh hoạt với kiểu chữ bằng một loạt các kiểu nhập trực quan.

Vấn đề về Chromium: 1093229

Công cụ gỡ lỗi hộp linh hoạt CSS

DevTools đã thêm tính năng hỗ trợ thử nghiệm cho gỡ lỗi flexbox kể từ bản phát hành gần đây nhất.

Giờ đây, DevTools sẽ vẽ một đường hướng dẫn để giúp bạn hình dung rõ hơn về thuộc tính align-items CSS. Thuộc tính gap CSS cũng được hỗ trợ. Trong ví dụ này, chúng ta có CSS gap: 12px;. Lưu ý mẫu sọc cho từng khoảng trống.

Vấn đề về Chromium: 1139949

Thẻ mới về Trường hợp vi phạm Chính sách bảo mật nội dung (CSP)

Xem nhanh tất cả trường hợp vi phạm Chính sách bảo mật nội dung (CSP) trong thẻ Trường hợp vi phạm CSP mới. Thẻ mới này là một thử nghiệm giúp bạn dễ dàng làm việc với các trang web có số lượng lớn lỗi vi phạm CSP và Loại đáng tin cậy.

Vấn đề về Chromium: 1137837

Cách tính độ tương phản màu mới – Thuật toán nâng cao về độ tương phản cảm quan (APCA)

Thuật toán tương phản nhận thức nâng cao (APCA) sẽ thay thế tỷ lệ tương phản theo nguyên tắc AA/AAA trong Bộ chọn màu.

APCA là một cách mới để tính toán độ tương phản dựa trên nghiên cứu hiện đại về nhận thức màu sắc. So với các nguyên tắc AA/AAA, APCA phụ thuộc nhiều hơn vào bối cảnh. Độ tương phản được tính dựa trên các thuộc tính không gian của văn bản (độ đậm và kích thước phông chữ), màu sắc (sự khác biệt về độ sáng cảm nhận được giữa văn bản và nền) và bối cảnh (ánh sáng xung quanh, môi trường xung quanh, mục đích dự kiến của văn bản).

Ví dụ này cho thấy ngưỡng APCA là 38%. Tỷ lệ tương phản phải bằng hoặc lớn hơn giá trị được liệt kê. Giá trị này được tính dựa trên độ đậm và kích thước phông chữ, tham chiếu đến bảng tra cứu APCA này.

Vấn đề về Chromium: 1121900

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.
• Để lại 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 về 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.