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

Kayce Basques

Tính năng mới cho cookie

Gỡ lỗi lý do cookie bị chặn

Sau khi ghi lại hoạt động mạng, hãy chọn một tài nguyên mạng rồi chuyển đến thẻ Cookie đã cập nhật để tìm hiểu lý do cookie yêu cầu hoặc phản hồi của tài nguyên đó bị chặn. Hãy xem phần Thay đổi đối với hành vi mặc định không có SameSite để hiểu lý do bạn có thể thấy nhiều cookie bị chặn hơn trong Chrome 76 trở lên.

Thẻ Cookie.

Thẻ Cookie.

  • Cookie yêu cầu màu vàng không được gửi qua mạng. Các mục này bị ẩn theo mặc định. Nhấp vào hiển thị các cookie yêu cầu đã bị lọc ra để hiển thị các cookie đó.
  • Cookie phản hồi màu vàng đã được gửi qua mạng nhưng không được lưu trữ.
  • Di chuột qua biểu tượng Thông tin khác info để tìm hiểu lý do một cookie bị chặn.
  • Hầu hết dữ liệu trong bảng Cookie yêu cầu và Cookie phản hồi đều đến từ tiêu đề HTTP của tài nguyên. Dữ liệu Miền, Đường dẫn và Hết hạn/Tuổi tối đa được lấy từ Giao thức Công cụ của Chrome cho nhà phát triển.

Các vấn đề về Chromium #856777, #993843

Xem giá trị cookie

Nhấp vào một hàng trong Ngăn cookie để xem giá trị của cookie đó.

Xem giá trị của một cookie.

Xem giá trị của một cookie.

Vấn đề về Chromium #462370

Mô phỏng các tuỳ chọn prefers-color-scheme và prefers-reduced-motion khác nhau

Truy vấn nội dung đa phương tiện prefers-color-scheme cho phép bạn so khớp kiểu của trang web với lựa chọn ưu tiên của người dùng. Ví dụ: nếu truy vấn nội dung đa phương tiện prefers-color-scheme: dark là đúng, thì tức là người dùng đã đặt hệ điều hành của họ thành chế độ tối và ưu tiên giao diện người dùng ở chế độ tối.

Mở Command Menu (Trình đơn lệnh), chạy lệnh Show Rendering (Hiển thị kết xuất) rồi đặt trình đơn thả xuống Emulate CSS media feature prefers-color-scheme (Mô phỏng tính năng đa phương tiện CSS prefers-color-scheme) để gỡ lỗi kiểu prefers-color-scheme: dark và prefers-color-scheme: light.

prefers-color-scheme: dark

Khi bạn đặt prefers-color-scheme: dark (hộp giữa), ngăn Kiểu (hộp bên phải) sẽ hiển thị CSS được áp dụng khi truy vấn nội dung nghe nhìn đó là đúng và khung nhìn hiển thị các kiểu chế độ tối (hộp bên trái).

Bạn cũng có thể mô phỏng prefers-reduced-motion: reduce bằng trình đơn thả xuống Mô phỏng tính năng đa phương tiện CSS prefers-reduced-motion bên cạnh trình đơn thả xuống Mô phỏng tính năng đa phương tiện CSS prefers-color-scheme.

Vấn đề về Chromium #1004246

Mô phỏng múi giờ

Giờ đây, thẻ Cảm biến không chỉ cho phép bạn ghi đè thông tin vị trí địa lý mà còn mô phỏng các múi giờ tuỳ ý và kiểm thử tác động của các múi giờ đó đối với ứng dụng web. Có thể bạn sẽ ngạc nhiên khi biết rằng tính năng mới này cũng cải thiện độ tin cậy của tính năng mô phỏng vị trí địa lý: trước đây, các ứng dụng web có thể phát hiện hành vi giả mạo vị trí bằng cách so khớp vị trí với múi giờ địa phương của người dùng. Giờ đây, khi vị trí địa lý và mô phỏng múi giờ được ghép nối, danh mục không khớp này sẽ bị loại bỏ.

Thông tin cập nhật về mức độ sử dụng mã

Thẻ Mức độ sử dụng có thể giúp bạn tìm JavaScript và CSS không sử dụng.

Thẻ Mức độ sử dụng hiện sử dụng màu sắc mới để biểu thị mã đã sử dụng và chưa sử dụng. Cách kết hợp màu này đã được chứng minh là dễ tiếp cận hơn đối với những người khiếm thị màu. Thanh màu đỏ ở bên trái đại diện cho mã không dùng đến và thanh màu xanh dương ở bên phải đại diện cho mã đã dùng.

Hộp văn bản bộ lọc loại mới về phạm vi cung cấp cho phép bạn lọc thông tin về phạm vi cung cấp theo loại: chỉ hiển thị phạm vi cung cấp JavaScript, chỉ hiển thị CSS hoặc hiển thị tất cả các loại phạm vi cung cấp.

Thẻ Phạm vi.

Thẻ Phạm vi.

Bảng điều khiển Nguồn hiển thị dữ liệu về mức độ sử dụng mã khi có. Khi bạn nhấp vào các dấu màu đỏ hoặc xanh dương bên cạnh số dòng, thẻ Coverage (Mức độ sử dụng) sẽ mở ra và làm nổi bật tệp.

Dữ liệu về mức độ phù hợp trong bảng điều khiển Nguồn.

Dữ liệu về mức độ phù hợp trong bảng điều khiển Nguồn. Dòng 8 là ví dụ về mã không dùng đến. Dòng 11 là ví dụ về mã đã sử dụng.

Vấn đề về Chromium #1003671, #1004185

Gỡ lỗi lý do yêu cầu tài nguyên mạng

Sau khi ghi lại hoạt động mạng, hãy chọn một tài nguyên mạng rồi chuyển đến thẻ Trình khởi tạo để tìm hiểu lý do tài nguyên được yêu cầu. Phần Yêu cầu ngăn xếp lệnh gọi mô tả ngăn xếp lệnh gọi JavaScript dẫn đến yêu cầu mạng.

Thẻ Trình khởi tạo.

Thẻ Trình khởi tạo.

Vấn đề về Chromium 963183, 842488

Bảng điều khiển Console và Sources (Bảng điều khiển và Nguồn) lại tuân theo các lựa chọn ưu tiên về thụt lề

Trong thời gian dài, DevTools đã có một chế độ cài đặt để tuỳ chỉnh tuỳ chọn thụt lề thành 2 khoảng trắng, 4 khoảng trắng, 8 khoảng trắng hoặc thẻ. Gần đây, chế độ cài đặt này về cơ bản là vô dụng vì bảng điều khiển Console và Sources (Bảng điều khiển và Nguồn) đang bỏ qua chế độ cài đặt này. Lỗi này hiện đã được khắc phục.

Chuyển đến Cài đặt > Lựa chọn ưu tiên > Nguồn > Độ thụt lề mặc định để đặt lựa chọn ưu tiên.

Vấn đề về Chromium #977394

Phím tắt mới để di chuyển con trỏ

Nhấn tổ hợp phím Ctrl+P trong bảng điều khiển hoặc bảng Nguồn để di chuyển con trỏ đến dòng ở trên. Nhấn tổ hợp phím Control+N để di chuyển con trỏ đến dòng bên dưới.

Vấn đề về Chromium #983874

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.