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

Jecelyn Yeen

Bảng điều khiển Nội dung nghe nhìn mới

Giờ đây, Công cụ cho nhà phát triển hiển thị thông tin về trình phát nội dung nghe nhìn trong bảng Nội dung nghe nhìn.

Bảng điều khiển Nội dung nghe nhìn mới

Trước khi có bảng điều khiển nội dung nghe nhìn mới trong Công cụ cho nhà phát triển, bạn có thể tìm thấy thông tin ghi nhật ký và gỡ lỗi về trình phát video trong chrome://media-internals.

Bảng điều khiển Phương tiện mới giúp bạn dễ dàng xem các sự kiện, nhật ký, thuộc tính và dòng thời gian giải mã khung hình trong cùng một thẻ trình duyệt với chính trình phát video. Bạn có thể xem trực tiếp và kiểm tra các vấn đề tiềm ẩn nhanh hơn (ví dụ: lý do xảy ra hiện tượng rớt khung hình, lý do JavaScript tương tác với trình phát theo cách không mong muốn).

Vấn đề với Chromium: 1018414

Chụp ảnh màn hình nút thông qua trình đơn theo bối cảnh của bảng điều khiển Phần tử

Giờ đây, bạn có thể chụp ảnh màn hình nút thông qua trình đơn theo bối cảnh trong bảng điều khiển Phần tử.

Ví dụ: bạn có thể chụp ảnh màn hình bảng nội dung bằng cách nhấp chuột phải vào phần tử đó rồi chọn Capture state screenshot (Chụp ảnh màn hình nút).

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

Vấn đề với Chromium: 1100253

Thông tin cập nhật về thẻ Vấn đề

Thanh cảnh báo Vấn đề trên Bảng điều khiển hiện đã được thay thế bằng thông báo thông thường.

Vấn đề trong thông báo trên bảng điều khiển

Theo mặc định, các vấn đề về cookie của bên thứ ba hiện được ẩn trong thẻ Vấn đề. Bật hộp đánh dấu mới Bao gồm các vấn đề về cookie của bên thứ ba để xem các vấn đề đó.

hộp đánh dấu vấn đề về cookie của bên thứ ba

Sự cố với Chromium: 1096481, 1068116, 1080589

Mô phỏng phông chữ trên máy còn thiếu

Mở thẻ Kết xuất và sử dụng tính năng mới Tắt phông chữ trên máy để mô phỏng các nguồn local() bị thiếu trong quy tắc @font-face.

Ví dụ: khi phông chữ "Rubik" được cài đặt trên thiết bị của bạn và quy tắc @font-face src sử dụng phông chữ này làm phông chữ local(), Chrome sẽ sử dụng tệp phông chữ cục bộ trên thiết bị của bạn.

Khi bạn bật chế độ Tắt phông chữ trên máy, Công cụ cho nhà phát triển sẽ bỏ qua phông chữ local() và tìm nạp các phông chữ đó từ mạng.

Mô phỏng phông chữ trên máy còn thiếu

Thông thường, các nhà phát triển và nhà thiết kế sử dụng hai bản sao của cùng một phông chữ trong quá trình phát triển:

  • Phông chữ cục bộ cho các công cụ thiết kế của bạn và
  • Phông chữ web cho mã của bạn

Việc tắt phông chữ trên máy sẽ giúp bạn dễ dàng:

  • Gỡ lỗi và đo lường hiệu suất tải và tối ưu hoá phông chữ web
  • Xác minh tính chính xác của các quy tắc @font-face của CSS
  • Tìm hiểu mọi điểm khác biệt giữa phông chữ trên web và phiên bản trên máy

Vấn đề với Chromium: 384968

Mô phỏng người dùng không hoạt động

API Phát hiện trạng thái rảnh cho phép nhà phát triển phát hiện người dùng không hoạt động và phản ứng với các thay đổi về trạng thái rảnh. Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng các thay đổi về trạng thái rảnh trong thẻ Cảm biến cho cả trạng thái người dùng và trạng thái màn hình thay vì chờ trạng thái rảnh thực tế thay đổi. Bạn có thể mở thẻ Cảm biến trong Ngăn.

Mô phỏng người dùng không hoạt động

Vấn đề với Chromium: 1090802

Mô phỏng prefers-reduced-data

Truy vấn phương tiện prefers-reduced-data sẽ phát hiện xem người dùng có muốn được phân phát nội dung thay thế sử dụng ít dữ liệu hơn cho trang để hiển thị hay không.

Giờ đây, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng truy vấn phương tiện prefers-reduced-data.

Mô phỏng tính năng prefers-reduced-data

Vấn đề với Chromium: 1096068

Hỗ trợ các tính năng JavaScript mới

Công cụ cho nhà phát triển hiện hỗ trợ tốt hơn một số tính năng ngôn ngữ JavaScript mới nhất:

  • Toán tử gán logic – Công cụ cho nhà phát triển hiện hỗ trợ chỉ định logic với các toán tử mới &&=, ||= và ??= trong bảng điều khiển Bảng điều khiển và Bảng điều khiển nguồn.
  • In đẹp dấu phân tách số – Công cụ cho nhà phát triển hiện in đúng cách các dòng phân cách số trong bảng điều khiển Nguồn.

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

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

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

Huỷ kích thước hình ảnh

Các lượt kiểm tra mới trong Lighthouse 6.2:

  • Tránh các tác vụ dài trong luồng chính. Báo cáo các tác vụ dài nhất trên luồng chính. Đây là cách hữu ích để xác định những yếu tố góp phần gây ra độ trễ đầu vào kém nhất.
  • Các đường liên kết cho phép thu thập dữ liệu. Kiểm tra xem thuộc tính href của các phần tử liên kết có liên kết đến một đích đến thích hợp hay không để người dùng có thể tìm thấy các đường liên kết đó.
  • Phần tử hình ảnh chưa được định kích thước – Kiểm tra xem width và height rõ ràng có được đặt trên các phần tử hình ảnh hay không. Kích thước hình ảnh rõ ràng có thể làm giảm sự thay đổi về bố cục và cải thiện CLS.
  • Tránh sử dụng ảnh động không được ghép. Báo cáo ảnh động không được kết hợp có hiện tượng giật và giảm CLS.
  • Nghe các sự kiện unload. Báo cáo sự kiện unload. Thay vào đó, hãy cân nhắc sử dụng các sự kiện pagehide hoặc visibilitychange vì sự kiện unload không kích hoạt một cách đáng tin cậy.

Các bước kiểm tra cập nhật trong Lighthouse 6.2:

  • Xoá JavaScript không dùng đến. Lighthouse giờ đây sẽ cải thiện việc kiểm tra nếu một trang có bản đồ nguồn JavaScript có thể truy cập công khai.

Vấn đề với Chromium: 772558

Ngừng sử dụng danh sách "nguồn gốc khác" trong ngăn Trình chạy dịch vụ

Công cụ cho nhà phát triển hiện cung cấp một đường liên kết để xem danh sách đầy đủ trình chạy dịch vụ từ các nguồn gốc khác trong một thẻ trình duyệt mới – chrome://serviceworker-internals/?devtools.

Trước đây, Công cụ cho nhà phát triển hiển thị một danh sách được lồng trong bảng điều khiển Ứng dụng > ngăn Trình chạy dịch vụ.

Liên kết đến các nguồn gốc khác

Vấn đề với Chromium: 807440

Hiển thị tóm tắt mức độ phù hợp cho các mục được lọc

Công cụ cho nhà phát triển hiện sẽ tính toán lại và hiển thị bản tóm tắt thông tin về mức độ phù hợp theo cách linh động khi áp dụng các bộ lọc trong thẻ Phạm vi bao phủ. Trước đây, thẻ Phạm vi lập chỉ mục luôn hiển thị bản tóm tắt tất cả thông tin về mức độ phù hợp.

Trong ví dụ bên dưới, hãy chú ý đến nội dung tóm tắt lúc đầu là 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., sau đó là 57 kB of 604 kB (10%) used so far. 546 kB unused. sau khi áp dụng tính năng lọc CSS.

Tóm tắt mức độ phù hợp cho các mục đã lọc

Vấn đề với Chromium: 1061385

Chế độ xem chi tiết mới về khung trong bảng điều khiển Application (Ứng dụng)

Công cụ cho nhà phát triển hiện hiển thị chế độ xem chi tiết cho từng khung. Để truy cập vào khung này, hãy nhấp vào một khung trong trình đơn Frames (Khung) trong bảng điều khiển Application (Ứng dụng).

Chế độ xem chi tiết mới về khung trong bảng điều khiển Application (Ứng dụng)

Vấn đề với Chromium: 1093247

Thông tin chi tiết về khung cho cửa sổ đã mở

Công cụ cho nhà phát triển hiện cũng hiển thị các cửa sổ / cửa sổ bật lên đã mở trong cây khung. Chế độ xem chi tiết khung của các cửa sổ đang mở có chứa thông tin bảo mật bổ sung.

Thông tin chi tiết về khung cửa sổ đã mở

Vấn đề với Chromium: 1107766

Thông tin bảo mật và cách ly (COEP / COOP)

Giờ đây, công cụ cho nhà phát triển hiển thị ngữ cảnh bảo mật, Cross-Origin-Nhúng-Policy (COEP) và Cross-Origin-Opener-Policy (COOP) trong phần thông tin chi tiết về khung.

Thông tin bảo mật và cách ly

Nhiều thông tin bảo mật khác sẽ sớm được thêm vào chế độ xem chi tiết khung.

Vấn đề với Chromium: 1051466

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

Phần đề xuất màu có thể truy cập được trong ngăn Kiểu

Công cụ cho nhà phát triển hiện cung cấp các đề xuất về màu cho văn bản có độ tương phản màu thấp.

Trong ví dụ bên dưới, h1 có văn bản có độ tương phản thấp. Để khắc phục lỗi này, hãy mở công cụ chọn màu của thuộc tính color trong ngăn Kiểu. Sau khi bạn mở rộng mục Tỷ lệ tương phản, Công cụ cho nhà phát triển sẽ cung cấp các đề xuất về màu AA và AAA. Nhấp vào màu được đề xuất để áp dụng màu.

Vấn đề với Chromium: 1093227

Khôi phục ngăn Thuộc tính trong bảng điều khiển Phần tử

Ngăn Thuộc tính đã quay lại. Ngăn này không còn được dùng trong Chrome 84. Trong một phiên bản tương lai của Công cụ cho nhà phát triển, chúng tôi sẽ cải thiện quy trình kiểm tra thuộc tính của các phần tử.

Ngăn thuộc tính trong bảng điều khiển Phần tử

Vấn đề với Chromium: 1105205, 1116085

Giá trị tiêu đề X-Client-Data mà con người có thể đọc được trong bảng điều khiển Mạng

Khi kiểm tra tài nguyên mạng trong bảng điều khiển Mạng, Công cụ cho nhà phát triển hiện định dạng mọi giá trị tiêu đề X-Client-Data trong ngăn Tiêu đề dưới dạng mã.

Tiêu đề HTTP X-Client-Data chứa danh sách các mã thử nghiệm và cờ Chrome được bật trong trình duyệt của bạn. Giá trị tiêu đề thô trông giống như các chuỗi mờ vì chúng là các vùng đệm giao thức được mã hoá theo hệ cơ sở 64, chuyển đổi tuần tự. Để làm cho nội dung minh bạch hơn cho nhà phát triển, Công cụ cho nhà phát triển hiện đang hiển thị các giá trị đã giải mã.

Giá trị tiêu đề "X-Client-Data" mà con người có thể đọc được

Vấn đề với Chromium: 1103854

Tự động hoàn thành phông chữ tuỳ chỉnh trong ngăn Kiểu

Các mặt phông chữ đã nhập hiện được thêm vào danh sách tự động hoàn thành CSS khi chỉnh sửa thuộc tính font-family trong ngăn Styles (Kiểu).

Trong ví dụ này, 'Noto Sans' là phông chữ tuỳ chỉnh được cài đặt trong máy cục bộ. Mã này sẽ xuất hiện trong danh sách hoàn thành của CSS. Trước đây, tính năng này không hoạt động.

Tự động hoàn thành phông chữ tuỳ chỉnh

Vấn đề với Chromium: 1106221

Hiển thị nhất quán loại tài nguyên trong bảng điều khiển Mạng

Công cụ cho nhà phát triển hiện hiển thị nhất quán cùng loại tài nguyên với yêu cầu mạng ban đầu và thêm / Redirect vào giá trị cột Loại khi chuyển hướng (trạng thái 302) xảy ra.

Trước đây, Công cụ cho nhà phát triển đôi khi thay đổi loại thành Other.

Hiển thị loại tài nguyên chuyển hướng

Vấn đề với Chromium: 997694

Nút Xoá trong bảng điều khiển Phần tử và Mạng

Các hộp văn bản bộ lọc trong ngăn Styles (Kiểu) và bảng Network (Mạng), cũng như hộp văn bản tìm kiếm DOM trong bảng điều khiển Elements (Phần tử) nay có nút Clear (Xoá). Thao tác nhấp vào Clear (Xoá) sẽ xoá mọi văn bản bạn đã nhập.

Nút Xoá trong bảng điều khiển Phần tử và Mạng

Vấn đề với Chromium: 1067184

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   Thêm   > 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.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59