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 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 phần Nguồn bảng điều khiể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 thức để viết, đánh giá và duy trì các ứng dụng không có lỗ hổng bảo mật DOM XSS với 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 lỗi vi phạm CSP Điểm ngắt và bật hộp đánh dấu Vi phạm Loại đáng tin cậy để tạm dừng trên 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

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. Di chuột lên để xem trước trường hợp ngoại lệ. Nhấp vào đó để mở rộng thẻ Vấn đề. Thẻ này sẽ cung cấp thêm thông tin chi tiết về các 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 có nội dung không hiển thị trong khung nhìn. Ảnh chụp màn hình toàn trang chính xác ngay bây giờ.

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.

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 thật mà không bị động theo dõi. 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 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ó tải trước nhằm cải thiện thời gian LCP của bạn.
  • Đã 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 Issues bảng điều khiển.
  • Ứ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 đã hoàn toàn sử dụng các kỹ thuật kiểm tra chức năng cho phép tiêu chí dễ cài đặt. Đây cũng là những tín hiệu bạn thấy trong Ngăn Tệp kê khai.

    • Thông báo "Đăng ký trình chạy dịch vụ..." quy trình kiểm tra sẽ chuyển sang nhóm PWA được tối ưu hoá và "Mục đích sử dụng" HTTPS" kiểm tra hiện được đưa vào như một phần của "các yêu cầu về khả năng cài đặt" chính kiểm tra.
    • Nhóm Nhanh và đáng tin cậy đã bị xoá. Như "yêu cầu về khả năng cài đặt" được cải tiến kiểm tra tính năng kiểm tra khả năng hoạt động ngoại tuyến, "trang hiện tại và start_url sẽ phản hồi bằng 200 khi ngoại tuyến" đã bị xoá. "Tải trang đủ nhanh trên mạng di động" đã xoá kết quả kiểm tra của Google.

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 :target hộp đánh dấu để 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ử đều 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 lúc nào cũng 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ữ phím Shift rồi nhấp vào công cụ chọn màu để chuyển qua RGBA, HSLA, và biểu diễn hệ thập lục phân của giá trị màu.

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 lớp CSS hoặc thuộc tính CSS trong ngăn Styles (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ả nội dung khai báo không hợp lệ và các thuộc tính 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 (Xóa tất cả cookie) trong ngăn Cookie giờ đây sẽ được thay thế bằng Xóa cookie đã lọc .

Trong bảng Application (Ứng dụng) > Ngăn Cookie, nhập văn bản vào hộp văn bản để lọc cookie. Ngang bằng ví dụ của chúng tôi ở đây, chúng tôi lọc danh sách theo "ƯU ĐÃI". 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.

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 xóa dữ liệu trang web trong ngăn Bộ nhớ, Công cụ cho nhà phát triển hiện chỉ xóa cookie của bên thứ nhất bằng cách 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 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 Tác nhân người dùng phần gợi ý ứng dụng khách để 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 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. Tìm hiểu thêm về Thông tin gợi ý về ứ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ì tính năng "ghi nhật ký mạng" cài đặt

Công cụ cho nhà phát triển hiện duy trì tính năng "Ghi nhật ký mạng" cài đặt. Trước đây, Công cụ cho nhà phát triển đã đặ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ề 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. 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ề tương lai của việc triển khai trong web.dev/webtransport/.

Vấn đề về Chromium: 1152290

"Trực tuyến" đã đổi tê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. Đây là 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) cần 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 có 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 Tình trạng sẵn có 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ọc hỏi 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 Chế độ cài đặt khác > Công cụ khác > Vấn đề > để mở thẻ Vấn đề. Mở rộng một vấn đề rồi nhấp vào 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 rớt khung hình xuống dưới 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 Samsung Galaxy Fold.

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

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 nội dung nghe nhìn CSS mới tính năng screen-spanning và API JavaScript getWindowSegments. Biểu tượng thử nghiệm thể hiện trạng thái của cờ các tính năng Nền tảng web thử nghiệm. Biểu tượng được đánh dấu khi cờ đượ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 giúp bạn tự động kiểm tra trình duyệt một cách 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 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ẻ Ghi âm 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 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 lại) 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 cải thiện và mở rộng ứng dụ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ữ nhằm trợ 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 bằng một loạt các kiểu chữ trực quan loại đầu vào.

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. Chiến lược phát hành đĩa đơn 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 ý mẫu nở cho từng 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ó số lượng lớn về chính sách bảo mật nội dung và vi phạm 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ế AA/AAA tỷ lệ tương phản của nguyên tắc này 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 sánh với 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 toán dựa trên giá trị các thuộc tính về không gian (độ đậ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à 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ố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > 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.

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.