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

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

Điểm ngắt trên hành vi 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 trường hợp ngoại lệ trên Lỗi vi phạm loại đáng tin cậy trong bảng Nguồn.

API Loại đáng tin cậy 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ì ứng dụng không có lỗ hổng bảo mật DOM XSS với Loại đáng tin cậy tại đây.

Trong bảng Sources (Nguồn), hãy mở ngăn thanh bên của debugger. Mở rộng phần Điểm ngắt vi phạm CSP và chọn hộp đánh dấu Lỗi vi phạm loại đáng tin cậy để tạm dừng trong các trường hợp ngoại lệ. Hãy tự mình trải nghiệm qua trang minh hoạ này.

Điểm ngắt trên hành vi vi phạm Loại đáng tin cậy

Vấn đề với Chromium: 1142804

Đường liên kết đến vấn đề trong bảng điều khiển Nguồn đến thẻ Vấn đề

Giờ đây, bảng điều khiển Nguồn 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. Di chuột vào đó để xem trước trường hợp ngoại lệ. Hãy nhấp vào biểu tượng đó để mở rộng thẻ Vấn đề. Thao tác 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 cách khắc phục.

Đường liên kết đến vấn đề trong bảng điều khiển Nguồn đến thẻ Vấn đề

Vấn đề với Chromium: 1150883

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

Giờ đây, bạn có thể chụp ảnh màn hình nút cho toàn bộ nút, bao gồm nội dung dưới màn hình đầu tiên. Trước đây, ảnh chụp màn hình này bị cắt do có 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 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 bên ngoài khung nhìn

Vấn đề với 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 Mã thông báo tin cậy bằng thẻ Mã thông báo tin cậy 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.

Chúng tôi sẽ hỗ trợ thêm khi gỡ lỗi 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ới 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 lượt 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 để cải thiện thời gian LCP của bạn hay không.
Các vấn đề đã 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 nhờ các quy trình kiểm tra khả năng cho phép tiêu chí có thể cài đặt của Chrome. Đây là những tín hiệu giống như trong ngăn Tệp kê khai.
- Quá trình kiểm tra "Đăng ký trình chạy dịch vụ..." chuyển sang nhóm Tối ưu hoá PWA, và quá trình kiểm tra "Sử dụng HTTPS" hiện được đưa vào trong quá trình kiểm tra "các yêu cầu về khả năng cài đặt" chính.
- Nhóm Nhanh chóng và đáng tin cậy 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 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 phản hồi với 200 khi ngoại tuyến" đã bị xoá. Chúng tôi cũng xoá tính năng kiểm tra "Tải trang đủ nhanh trên mạng di động".

Vấn đề với Chromium: 772558

Cập nhật bảng điều khiển Phần tử

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

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ử rồi 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 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 trải nghiệm. Tính năng Công cụ cho nhà phát triển mới này cho phép bạn kiểm thử các kiểu như vậy mà không phải luôn thay đổi URL theo cách thủ công.

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

Vấn đề với Chromium: 1156628

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

Sử dụng phím tắt Sao chép phần tử 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 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

Các sự cố với Chromium: 1150797, 1150797

Công cụ chọn màu cho các tài sản 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ữ phím Shift và nhấp vào công cụ chọn màu để chuyển qua các cách biểu diễn RGBA, HSLA và Hex của giá trị màu.

Công cụ chọn màu cho các tài sản CSS tuỳ chỉnh

Vấn đề với Chromium: 1147016

Phím 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 vài 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 Styles (Kiểu) để sao chép giá trị.

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

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 tài sản 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 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ới 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 được giải mã URL trong ngăn Cookie.

Chuyển đến bảng Application (Ứng dụng) và chọn ngăn Cookie. Chọn bất kỳ cookie nào trong danh sách. Bật hộp đánh dấu 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ới Chromium: 997625

Chỉ xoá cookie hiển thị

Nút Xoá tất cả cookie trong ngăn Cookie giờ đây sẽ được thay thế bằng nút Xoá cookie đã lọc.

Trong bảng Ứng dụng > ngăn Cookie, hãy nhập văn bản vào hộp văn bản để lọc cookie. Trong ví dụ ở đâ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, 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ó lựa chọn xoá tất cả cookie.

Chỉ xoá cookie hiển thị

Vấn đề với 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 chế độ kể 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ới 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 phần Gợi ý 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 Gợi ý ứng dụng về tác nhân người dùng để chỉnh sửa gợi ý ứ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à một 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à hiệu quả. Tìm hiểu thêm về Gợi ý ứng dụng tác nhân người dùng tại web.dev/user-agent-client-hints/.

Vấn đề với 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 bất cứ khi nào một trang tải lại.

Ghi nhật ký mạng

Vấn đề với 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 giờ đây sẽ 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 khách-máy chủ. Hãy tìm hiểu thêm về các trường hợp sử dụng và cách gửi ý kiến phản hồi về tương lai của hoạt động triển khai này tại web.dev/webtransport/.

Vấn đề với 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ới Chromium: 1028078

Các lựa chọn sao chép mới trong ngăn Console, 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 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 và bảng điều khiển Nguồn. Việc này khá hữu ích, đặ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

Các sự cố với 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 trên 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.

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ới Chromium: 1155120

Cập nhật chế độ xem chi tiết khung

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

Giờ đây, Công cụ cho nhà phát triển hiển thị trình thực thi 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 khung có trình chạy dịch vụ, sau đó chọn một trình chạy dịch vụ trong cây Service Workers (Trình chạy dịch vụ) để xem thông tin chi tiết.

Thông tin về Service Worker trong chế độ xem chi tiết Khung

Vấn đề với Chromium: 1122507

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

Trạng thái API performance.measureMemory() giờ đây sẽ xuất hiện trong phần 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. 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ới Chromium: 1139899

Cung cấp ý kiến phản hồi trên thẻ Vấn đề

Nếu bạn muốn cải thiện một 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 một thông báo về vấn đề rồi nhấp vào phần Thông báo vấn đề có hữu ích với bạn 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 phản hồi về vấn đề

Khung hình bị giảm 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, mục Frames (Khung) hiện sẽ đánh dấu các khung hình bị bỏ là màu đỏ. Di chuột lên biểu tượng đó để biết tốc độ khung hình.

Khung hình bị rớt

Vấn đề với 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ụ của 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àn hình đơn hoặc tư thế gập và tư thế màn hình đôi hoặc tư thế mở.

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

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

Vấn đề với Chromium: 1054281

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

Tự động hoá quá trình kiểm thử trình duyệt bằng Máy ghi âm 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 dễ dàng tự động hoá việc kiểm thử trình duyệt 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 qua Giao thức DevTools.

Truy cập 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ẻ Record (Ghi) trên ngăn bên trái. Thêm bản ghi mới rồi đặ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 cố gắng đ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 thêm vào tệp tương ứng. Nhấp lại vào nút Record (Ghi) để dừng quá trình ghi.

Để chạy tập lệnh, hãy làm theo Hướng dẫn bắt đầu sử dụng trong 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 cải thiện và mở rộng tính năng Máy ghi âm theo thời gian.

Máy ghi hình

Vấn đề với 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 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 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ới Chromium: 1093229

Công cụ gỡ lỗi CSS flexbox

Công cụ cho nhà phát triển thêm tính năng hỗ trợ thử nghiệm cho tính năng gỡ lỗi flexbox 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á thuộc tính align-items của CSS một cách rõ ràng hơn. Thuộc tính CSS gap cũng được hỗ trợ. Trong ví dụ ở đây, chúng ta có CSS gap: 12px;. Lưu ý mẫu nở cho mỗi khoảng trống.

Hộp linh hoạt

Vấn đề với Chromium: 1139949

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

Xem nhanh tất cả lỗi vi phạm về 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 dễ dàng làm việc với các trang web có số lượng lớn lỗi vi phạm về CSP và Loại đáng tin cậy.

Thẻ Các trường hợp vi phạm chính sách bảo mật nội dung (CSP)

Vấn đề với Chromium: 1137837

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

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

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 vượt quá giá trị đã nêu. 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ới Chromium: 1121900

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.