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

Kayce Basques
Kayce Basques
X GitHub

Các 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 Các 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.

  • Request Cookies (Cookie yêu cầu) màu vàng không được gửi qua mạng. Theo mặc định, các mục này sẽ bị ẩn. Nhấp vào hiển thị các cookie yêu cầu đã bị lọc ra để hiển thị các cookie đó.
  • Response Cookies (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 lên Thông tin khác info để tìm hiểu lý do cookie bị chặn.
  • Hầu hết dữ liệu trong các bảng Request Cookies (Cookie yêu cầu) và Response Cookies (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 bảng điều khiển Cookie để xem giá trị của cookie đó.

Xem giá trị của cookie.

Xem giá trị của cookie.

Vấn đề về Chromium #462370

Mô phỏng các lựa chọn ưu tiên khác nhau cho prefers-color-scheme và prefers-reduced-motion

Truy vấn nội dung nghe nhìn prefers-color-scheme cho phép bạn điều chỉnh kiểu trang web cho phù hợp 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 nghe nhìn prefers-color-scheme: dark là true, tức là người dùng đã đặt hệ điều hành của họ ở chế độ tối và thích giao diện người dùng ở chế độ tối.

Mở Trình đơn lệnh, chạy lệnh Hiện quá trình kết xuất, rồi đặt trình đơn thả xuống Mô phỏng tính năng đa phương tiện prefers-color-scheme của CSS để gỡ lỗi các kiểu prefers-color-scheme: dark và prefers-color-scheme: light.

prefers-color-scheme: dark

Khi prefers-color-scheme: dark được đặt (hộp ở giữa), ngăn Kiểu (hộp bên phải) sẽ cho thấy CSS được áp dụng khi truy vấn nội dung nghe nhìn đó là đúng và khung hiển thị sẽ cho thấy 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 prefers-reduced-motion của CSS bên cạnh trình đơn thả xuống Mô phỏng tính năng đa phương tiện prefers-color-scheme của CSS.

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 định vị vị trí mà còn cho phép bạn mô phỏng các múi giờ tuỳ ý và kiểm tra tác động lên các ứng dụng web của bạn. Có lẽ 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 hoạt độ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 tính năng mô phỏng vị trí địa lý và múi giờ được kết hợp, danh mục thông tin 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 được sử dụng.

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

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

Thẻ Phạm vi bao phủ.

Thẻ Phạm vi bao phủ.

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

Dữ liệu về mức độ sử dụng trong bảng điều khiển Nguồn.

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

Các 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. Mục Ngăn xếp lệnh gọi yêu cầu 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.

Các vấn đề về Chromium 963183, 842488

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

Từ lâu, Công cụ cho nhà phát triển đã có một chế độ cài đặt để tuỳ chỉnh lựa chọn ưu tiên về thụt lề thành 2 khoảng trắng, 4 khoảng trắng, 8 khoảng trắng hoặc các thẻ. Gần đây, chế độ cài đặt này gần như vô dụng vì các bảng điều khiển Console và Sources đang bỏ qua chế độ cài đặt này. Lỗi này hiện đã được khắc phục.

Chuyển đến phầ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 của bạn.

Vấn đề #977394 của Chromium

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

Nhấn Control+P trong bảng điều khiển Console hoặc Sources để 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 đề #983874 của Chromium

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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.