Trang này được dịch bởi Cloud Translation API.

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 các điểm ngắt và phát hiện các trường hợp ngoại lệ trên các lỗi vi phạm loại đáng tin cậy trong bảng điều khiển Sources (Nguồn).

Loại đáng tin cậy API giúp bạn ngăn chặn các lỗ hổng bảo mật tập lệnh trên nhiều trang web dựa trên DOM. Tìm hiểu cách viết, đánh giá và duy trì các ứng dụng mà không có lỗ hổng bảo mật DOM XSS bằng các 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 của debugger (trình gỡ lỗi). Mở rộng mục Điểm ngắt vi phạm CSP rồi đánh dấu vào hộp Trusted Type violation để tạm dừng các ngoại lệ. Hãy tự mình trải nghiệm trên trang minh hoạ này.

Điểm ngắt khi vi phạm Loại đáng tin cậ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 điều khiển Sources (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 đáng tin cậy. Hãy di chuột lên đó để xem trước trường hợp ngoại lệ. Nhấp vào đó để mở rộng thẻ Issues (Vấn đề). Thẻ này sẽ 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 về 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

Bây giờ, bạn có thể chụp ảnh chụp màn hình nút cho toàn bộ nút, bao gồm cả nội dung dưới màn hình đầu tiên. 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 giờ đây cũng chính xác.

Trong bảng điều khiển 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 nút.

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

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 Mã thông báo tin cậy bằng thẻ Trust Tokens mới.

Mã thông báo tin cậy 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.

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

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 đ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ó Nội dung lớn nhất hiển thị (LCP). Kiểm tra xem hình ảnh mà phần tử LCP sử dụng có được tải trước để cải thiện thời gian LCP của bạn hay không.
Đã ghi các vấn đề 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 chức năng theo đó đáp ứng các tiêu chí về khả năng cài đặt của Chrome. Đây cũng là những tín hiệu bạn thấy trong Ngăn Tệp kê khai.
- Quy trình kiểm tra "Đăng ký trình chạy dịch vụ..." sẽ chuyển sang nhóm Được tối ưu hoá cho PWA, còn 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à đáng tin cậy đã 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ả quy trình kiểm tra khả năng hoạt động khi không có mạng, nên chế độ kiểm tra "trang hiện tại và start_url sẽ phản hồi bằng 200 khi hoạt động ngoại tuyến" bị xoá. Kiểm tra "Tải trang đủ nhanh trên mạng di động" cũng đã bị xóa.

Vấn đề về Chromium: 772558

Nội dung cập nhật của 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ụ cho nhà phát triển để buộc và kiểm tra trạng thái :target của CSS.

Trong bảng điều khiển Phần tử, hãy chọn một phần tử và bật/tắt trạng thái của phần tử. Bật hộp đánh dấu :target để buộc và kiểm tra 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 trải nghiệm. Tính năng mới này trong 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 lúc nào cũng phải thay đổi URL theo cách thủ công.

buộc trạng thái ":target" của CSS

Vấn đề về Chromium: 1156628

Lối tắt mới đến phần tử trùng lặp

Sử dụng phím tắt mới Sao chép phần tử để 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 Phần tử, chọn Phần tử trùng lặp. Một phần tử mới sẽ được tạo trong đó.

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

Máy Mac: Shift + Option + ⬇️
Cửa sổ/ Linux: Shift + Alt + ⬇️

Phần tử trùng lặp

Vấn đề về Chromium: 1150797, 1150797

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

Giờ đây, ngăn Styles (Kiểu) sẽ 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ữ khoá Shift rồi nhấp vào công cụ chọn màu để lần lượt biểu diễn các giá trị màu RGBA, HSLA và Hex.

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

Vấn đề về Chromium: 1147016

Lối tắt mới để sao chép các 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 thuộc tính CSS trong ngăn Kiểu để sao chép giá trị.

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

Sao chép các lựa chọn 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 tài sản 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 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

Cập nhật 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 đã 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 Cookie (Cookie). Chọn một cookie bất kỳ trong danh sách. Bật hộp kiểm Hiển thị URL đã giải mã mới để xem cookie được 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 Clear all cookies (Xoá tất cả cookie) trong ngăn Cookie hiện được thay thế bằng nút Clear filter cookies (Xoá cookie đã lọc).

Trong bảng điều khiển Ứng dụng > ngăn Cookie, nhập văn bản vào hộp văn bản để lọc cookie. Trong ví dụ ở đây, chúng tôi lọc danh sách theo "ƯU TIÊN". Nhấp vào nút Clear filtering cookies (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.

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ớ, Công cụ cho nhà phát triển hiện chỉ xoá cookie của bên thứ nhất theo mặc định. Bật 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 gợi ý 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 Gợi ý về ứ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 Gợi ý ứng dụng tác nhân người dùng để chỉnh sửa gợi ý về ứng dụng.

Chỉnh sửa gợi ý của ứng dụng tác nhân người dùng

Gợi ý ứng dụng 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à công thái học. Hãy tìm hiểu thêm về Gợi ý ứng dụng tác nhân người dùng trong 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"

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 mỗi khi một trang tải lại.

Ghi nhật ký mạng

Vấn đề về Chromium: 1122580

Xem 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.

Kết nối WebTransport

WebTransport là một API mới cung cấp thông báo độ trễ thấp, hai chiều, máy chủ máy khách. Hãy tìm hiểu thêm về các trường hợp sử dụng của API này và cách gửi ý kiến phản hồi về tương lai của việc triển khai trên web.dev/webtransport/.

Vấn đề về Chromium: 1152290

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

Tuỳ 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 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

Các 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 lối 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 dụng, đặc biệt khi bạn có một đối tượng lớn (ví dụ: một mảng dài) để sao chép.

Sao chép đối tượng trong Console

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

Vấn đề về Chromium: 1149859, 1148353

Các lối 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 Sources (Nguồn), hoặc
tên tệp trong ngăn Kiểu trên bảng 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.

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 chi tiết khung

Thông tin mới về Trình chạy dịch vụ trong chế độ xem chi tiết Khung

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

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

Thông tin về Trình chạy dịch vụ trong chế độ xem chi tiết Khung

Vấn đề về Chromium: 1122507

Đo lường thông tin Bộ nhớ trong chế độ xem chi tiết Khung

Giờ đây, trạng thái của API performance.measureMemory() sẽ xuất hiện trong phần Khả năng sử dụng của API.

API performance.measureMemory() mới ước tính mức sử dụng bộ nhớ của toàn bộ trang web. Hãy 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.

Đo lường bộ nhớ

Vấn đề về Chromium: 1139899

Gửi ý 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ấ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 về vấn đề rồi nhấp vào mục Thông báo về vấn đề có hữu ích cho bạn không?, sau đó bạn có thể cung cấp ý kiến phản hồi trong cửa sổ bật lên.

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

Khung hình bị thả 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 bị bỏ qua là màu đỏ. Hãy di chuột lên đó để biết tốc độ khung hình.

Khung hình bị rớt

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 Công cụ cho nhà phát triển.

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

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

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

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

Vấn đề về Chromium: 1054281

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

Tự động kiểm thử trình duyệt bằng Trình ghi Puppeteer

Giờ đây, Công cụ cho nhà phát triển 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 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 Sources (Nguồn) trong Công cụ cho nhà phát triển. Chọn thẻ Record (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 Ghi lại ở 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 của Puppeteer cũng được thêm vào tệp tương ứng. Nhấp vào nút Record (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 sử dụng trên trang web chính thức của Puppeteer.

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

Máy ghi âm 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à trình chỉnh sửa cửa sổ 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 thấy 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 gọn gàng để điều chỉnh kiểu chữ một cách linh hoạt với một loạt các kiểu nhập 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 linh hoạt CSS

Công cụ cho nhà phát triển bổ sung tính năng hỗ trợ thử nghiệm cho việc gỡ lỗi hộp linh hoạt kể từ bản phát hành gần đây nhất.

Công cụ cho nhà phát triển hiện vẽ một đường hướng dẫn để giúp bạn trực quan hoá tốt hơn thuộc tính align-items của CSS. Thuộc tính CSS gap cũng được hỗ trợ. Trong ví dụ này, chúng ta có CSS gap: 12px;. Hãy lưu ý mẫu nở cho mỗi khoảng trống.

Hộp linh hoạt

Vấn đề về Chromium: 1139949

Thẻ Lỗi vi phạm chính sách bảo mật nội dung 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 sẽ giúp bạn làm việc dễ dàng hơn với các trang web có nhiều lỗi vi phạm về CSP và Loại đáng tin cậy.

Thẻ Các trường hợp vi phạm 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 quan nâng cao (APCA)

Thuật toán tương phản cảm quan nâng cao (APCA) sẽ thay thế tỷ lệ tương phản của nguyên tắc AA/AAA trong Công cụ 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ề cách nhận biết màu sắc. So với các nguyên tắc của AA/AAA, APCA phụ thuộc nhiều hơn vào ngữ 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ự chênh lệch về độ sáng 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 của văn bản).

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

Ví dụ cho thấy ngưỡng APCA là 38%. Tỷ lệ tương phản phải đáp ứng hoặc cao 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 khảo bảng tra cứu APCA này.

Vấn đề về Chromium: 1121900

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

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

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
Báo cáo sự cố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.