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

Các tính năng mới dành cho cookie

Khắc phục 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 khiến 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 về 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 dây. Theo mặc định, các đề xuất này sẽ bị ẩn. Hãy nhấp vào hiển thị các cookie yêu cầu đã được lọc ra để hiển thị các cookie này.
  • Cookie phản hồi màu vàng đã được gửi qua dây 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 cookie bị chặn.
  • Hầu hết dữ liệu trong bảng Cookie yêu cầuCookie phản hồi đều đến từ các tiêu đề HTTP của tài nguyên. Dữ liệu Miền, Đường dẫnHế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 sự cố với Chromium #856777, #993843

Xem các 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 cookie.

Xem giá trị của cookie.

Sự cố Chromium #462370

Mô phỏng các lựa chọn ưu tiên màu khác nhau và tính năng prefers-reduced-motion khác nhau

Truy vấn nội dung đa phương tiện prefers-color-definition cho phép bạn khớp kiểu của trang web với các 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à đúng, thì tức là người dùng đã đặt hệ điều hành của họ sang chế độ tối và ưu tiên giao diện người dùng ở chế độ tối.

Mở Trình đơn lệnh, chạy lệnh Show Rendering (Hiện tính năng kết xuất), sau đó đặt trình đơn thả xuống Emulate CSS đa phương tiện Preferreds-color-Schema (Mô phỏng tính năng đa phương tiện của CSS) để gỡ lỗi các kiểu prefers-color-scheme: darkprefers-color-scheme: light.

lựa chọn ưu tiên-màu sắc-lược đồ: tối

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

Sự cố Chromium #1004246

Mô phỏng múi giờ

Giờ đây, thẻ Cảm biến không chỉ cho phép bạn override geolocation, mà còn mô phỏng các múi giờ tuỳ ý và kiểm thử mức độ tác động đến các ứng dụng web. Có lẽ đáng ngạc nhiên là tính năng mới này cũng cải thiện độ tin cậy của quy trình 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 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ỏ.

Nội dung cập nhật về mức độ sử dụng mã

Thẻ Phạm vi lập chỉ mục có thể giúp bạn tìm JavaScript và CSS không dùng đến.

Thẻ Mức độ sử dụng hiện sử dụng các màu mới để biểu thị mã đã sử dụng và chưa sử 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 khiếm thị. Thanh màu đỏ ở bên trái đại diện cho mã chưa sử dụng, còn thanh màu xanh lục ở bên phải đại diện cho mã đã sử dụng.

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

Thẻ Mức độ phù hợp.

Thẻ Mức độ phù hợp.

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ó sẵn. Khi nhấp vào các dấu màu đỏ hoặc hơi xanh bên cạnh số dòng, thẻ sẽ mở ra và đánh dấu 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à một ví dụ về mã đã sử dụng.

Các sự cố với Chromium #1003671, #1004185

Gỡ lỗi tại sao tài nguyên mạng được yêu cầu

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ẻ Initiator (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ẻ Người khởi tạo.

Vấn đề với Chromium 963183, 842488

Bảng điều khiển và Bảng điều khiển nguồn sẽ tuân thủ các lựa chọn ưu tiên về thụt lề một lần nữa

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ề của bạn cho 2 không gian, 4 không gian, 8 khoảng trắng hoặc thẻ. Gần đây, chế độ cài đặt này về cơ bản vô hiệu vì bảng điều khiển Console và Bảng điều khiển nguồn đã bỏ qua chế độ cài đặt này. Lỗi này hiện đã được khắc phục.

Chuyển đến Settings > Preferences > Sources > Default Indentation (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.

Sự cố Chromium #977394

Phím tắt mới cho thao tác bằng con trỏ

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

Sự cố Chromium #983874

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