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

Jecelyn Yeen

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

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

Giờ đây, bạn có thể đặt điểm ngắt và phát hiện 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 Loại đáng tin cậy 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 Loại đáng tin cậy tại đây.

Trong bảng điều khiển Sources (Nguồn), hãy mở ngăn thanh bên debugger (trình gỡ lỗi). Mở rộng phần Điểm ngắt vi phạm Chính sách bảo mật nội dung (CSP) rồi bật hộp đánh dấu Lỗi vi phạm loại đáng tin cậy để tạm dừng ở các trường hợp ngoại lệ. Hãy tự mình thử nghiệm với trang minh hoạ này.

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

Vấn đề về Chromium: 1142804

Giờ đây, bảng điều khiển Nguồn sẽ hiển thị 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 qua ngoại lệ đó để xem trước. Nhấp vào mục 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.

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

Vấn đề về Chromium: 1150883

Chụp ảnh màn hình nút ngoài khung nhìn

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

Trong bảng điều khiển Elements (Phần tử), hãy nhấp chuột phải vào một phần tử rồi chọn Capture node screenshot (Chụp ảnh màn hình nút).

Chụp ảnh màn hình nút ngoài khung nhìn

Vấn đề về Chromium: 1003629

Thẻ Mã thông báo tin cậy mới cho các yêu cầu mạng

Kiểm tra các yêu cầu mạng về Mã thông báo tin cậy bằng thẻ Mã thông báo tin cậy mới.

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

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

Thẻ Mã thông báo tin cậy mới cho các yêu cầu mạng

Vấn đề về Chromium: 1126824

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

Bảng điều khiển 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.

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

Các quy trình 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 cung cấp hoàn toàn bởi các quy trình kiểm tra chức năng cho phép tiêu chí cài đặt của Chrome. Đây cũng là những tín hiệu xuất hiện trong Ngăn tệp kê khai.

    • Quy trình kiểm tra "Đăng ký worker dịch vụ…" sẽ chuyển sang nhóm PWA được tối ưu hoá và quy trình kiểm tra "Sử dụng HTTPS" hiện được đưa vào quy trình kiểm tra "các yêu cầu về khả năng cài đặt" chính.
    • Nhóm Nhanh và ổn định đã 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 ngoại tuyến, 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 ngoại tuyến" đã 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 về bảng điều khiển Phần tử

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

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

Trong bảng điều khiển Elements (Phần tử), hãy chọn một phần tử rồi bật/tắt trạng thái phần tử đó. Bật 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 hàm 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 trong DevTools 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.

buộc trạng thái CSS `:target`

Vấn đề về Chromium: 1156628

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

Sử dụng phím tắt Duplicate element (Phần tử trùng lặp) mới để sao chép một phần tử ngay lập tức.

Nhấp chuột phải vào một phần tử trong bảng điều khiển Elements (Phần tử), chọn Duplicate element (Tạo bản sao phần tử). Một phần tử mới sẽ được tạo trong 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 + ⬇️

Phần tử trùng lặp

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

Ngăn Styles (Kiểu) hiện hiển thị 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 và nhấp vào bộ chọn màu để chuyển đổi giữa các giá trị màu RGBA, HSLA và Hex.

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

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 vài phím tắt mới.

Trong bảng điều khiển Elements (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 thuộc tính CSS trong ngăn Styles (Kiểu) để sao chép giá trị.

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

Các tuỳ 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 tuỳ chọn sao chép cho thuộc tính CSS:

  • Sao chép nội dung khai báo. Sao chép phần khai báo của dòng hiện tại.
  • Sao chép thuộc tính. 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

Tuỳ chọn mới để hiển thị 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ị URL đã giải mã mới để xem cookie đã giải mã.

Tuỳ chọn hiển thị cookie đã giải mã URL

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 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ể chọn xoá tất cả cookie.

Chỉ xoá cookie hiển thị

Vấn đề về Chromium: 978059

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

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

Tuỳ chọn xoá cookie của bên thứ ba

Vấn đề về Chromium: 1012337

Chỉnh sửa Thông tin mô tả của ứng dụng tác nhân người dùng 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 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ả về ứng dụng tác nhân người dùng để chỉnh sửa thông tin mô tả về ứng dụng.

Chỉnh sửa User-Agent Client Hints

Gợi ý ứng dụng 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à phù hợp với người dùng. Tìm hiểu thêm về Thông tin mô tả của ứng dụng tác nhân người dùng tại web.dev/user-agent-client-hints/.

Vấn đề về Chromium: 1073909

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

Duy trì chế độ cài đặt "ghi nhật ký mạng"

Giờ đây, DevTools sẽ duy trì chế độ cài đặt "Ghi nhật ký mạng". Trước đây, DevTools đặt lại lựa chọn của người dùng mỗi khi trang tải lại.

Ghi nhật ký mạng

Vấn đề về Chromium: 1122580

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

Bảng điều khiển Mạng hiện hiển thị các kết nối WebTransport.

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 và cách đưa ra ý kiến phản hồi về việc triển khai trong tương lai tại web.dev/webtransport/.

Vấn đề về Chromium: 1152290

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

Tùy chọn mô phỏng mạng "Trực tuyến" hiện được đổi tên thành "Không điều tiết".

Ghi nhật ký mạng

Vấn đề về Chromium: 1028078

Các tuỳ chọn sao chép mới trong Bảng điều khiển, bảng 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 giá trị đối tượng bằng các phím tắt mới trong bảng điều khiển và bảng điều khiển Nguồn. Điều này rất tiện lợi, đặc biệt là khi bạn có một đối tượng lớn (ví dụ: một mảng dài) cần sao chép.

Sao chép đối tượng trong bảng điều khiển

Sao chép đối tượng trong bảng điều khiển Nguồn

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 Thành phần

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.

Sao chép tên tệp trong bảng điều khiển Nguồn

Sao chép tên tệp trong ngăn Kiểu

Vấn đề về Chromium: 1155120

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

Thông tin mới về Trình làm việc dịch vụ trong khung hiển thị Chi tiết khung

Giờ đây, DevTools sẽ hiển thị các worker dịch vụ chuyên dụng trong khung tạo ra các worker đó.

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

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

Vấn đề về Chromium: 1122507

Đo lường thông tin về Bộ nhớ trong khung hiển thị Chi tiết khung

Trạng thái API performance.measureMemory() hiện hiển thị trong mục Khả năng sử dụng 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 giám sát 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.

Đo lường bộ nhớ

Vấn đề về Chromium: 1139899

Đưa ra ý kiến phản hồi trên 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ể đưa ra ý kiến phản hồi trong cửa sổ bật lên.

Đường liên kết đến trang phản hồi về vấn đề

Khung hình bị bỏ qua 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 hiện sẽ đánh dấu các khung hình bị bỏ qua bằng màu đỏ. Di chuột qua để tìm hiểu tốc độ khung hình.

Rớt khung hình

Vấn đề về Chromium: 1075865

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

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

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 span mới để chuyển đổi giữa chế độ màn hình đơn hoặc gập và chế độ màn hình đôi hoặc mở.

Bạn cũng có thể bật 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 nội dung đa phương tiện CSS mới và API getWindowSegments JavaScript. Biểu tượng thử nghiệm cho biết trạng thái của cờ Tính năng thử nghiệm của Nền tảng web. Biểu tượng này được làm nổi bật khi bạn bật cờ. Chuyển đến chrome://flags và bật/tắt cờ.

Mô phỏng màn hình đôi

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 Trình ghi Puppeteer

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 dễ dàng tự động hoá việc kiểm thử trình duyệt. 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 Sources (Nguồn) trong DevTools. Chọn thẻ Recording (Ghi) trên ngăn bên trái. Thêm bản ghi mới và đặt tên cho tệp (ví dụ: test01.js).

Nhấp vào nút Record (Ghi) ở dưới cùng để bắt đầu ghi lại hoạt động tương tác. Thử điền vào biểu mẫu trên màn hình. Hãy quan sát để thấy các lệnh Puppeteer được thêm vào tệp tương ứng. Nhấp lại vào nút Record (Ghi) để 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.

Trình ghi Puppeteer

Vấn đề về Chromium: 1144127

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

Trình chỉnh sửa phông chữ mới là một trình chỉnh sửa bật lên trong Ngăn 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.

Cửa sổ bật lên cung cấp một giao diện người dùng rõ ràng để thao tác linh động kiểu chữ bằng một loạt các loại dữ liệu đầu vào trực quan.

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

Vấn đề về Chromium: 1093229

Công cụ gỡ lỗi hộp flex 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 dẫn để giúp bạn hình dung rõ hơn thuộc tính align-items CSS. Thuộc tính CSS gap cũng được hỗ trợ. Trong ví dụ này, chúng ta có CSS gap: 12px;. Lưu ý đến mẫu vẽ đường viền cho mỗi khoảng trống.

Hộp linh hoạt

Vấn đề về Chromium: 1139949

Thẻ Hành vi vi phạm chính sách bảo mật nội dung (CSP) mới

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

Thẻ Vi phạm Chính sách bảo mật nội dung (CSP)

Vấn đề về Chromium: 1137837

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

Thuật toán độ tương phản cảm nhận 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 ngữ cảnh. Độ tương phản được tính toán 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 nhận thấy giữa văn bản và nền) và ngữ 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).

APCA trong Công cụ chọn màu

Ví dụ này cho thấy ngưỡng APCA là 38%. Tỷ lệ tương phản phải đáp ứng hoặc vượt quá giá trị được liệt kê. Giá trị này được tính toán dựa trên độ đậm và kích thước phông chữ, tham khảo 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 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.