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

Xin chào! Dưới đây là các tính năng mới trong Công cụ của Chrome cho nhà phát triển trong Chrome 75.

Phiên bản video của trang này

Các giá trị đặt trước có ý nghĩa khi tự động hoàn thành các hàm CSS

Một số thuộc tính CSS (như filter) nhận các hàm cho giá trị. Ví dụ: filter: blur(1px) thêm hiệu ứng làm mờ 1 pixel vào một nút. Khi tự động hoàn thành các thuộc tính như filter, Công cụ cho nhà phát triển hiện sẽ điền giá trị có ý nghĩa vào thuộc tính đó để bạn có thể xem trước loại thay đổi mà giá trị sẽ có trên nút.

Hành vi tự động hoàn thành cũ.

Hình 1 Hành vi tự động hoàn thành cũ. Công cụ cho nhà phát triển đang tự động hoàn thành cho filter: blur và không có thay đổi nào hiển thị trong khung nhìn.

Hành vi tự động hoàn thành mới.

Hình 2. Hành vi tự động hoàn thành mới. Công cụ cho nhà phát triển đang tự động hoàn thành cho filter: blur(1px) và thay đổi này sẽ hiển thị trong khung nhìn.

Vấn đề liên quan đến Chromium: #931145

Xoá dữ liệu trang web khỏi Trình đơn Lệnh

Nhấn tổ hợp phím Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh rồi chạy lệnh Clear Site Data (Xoá dữ liệu trang web) để xoá tất cả dữ liệu liên quan đến trang, bao gồm: Service worker, localStorage, sessionStorage, IndexedDB, Web1, SQL

Lệnh Xoá dữ liệu trang web.

Hình 3. Lệnh Xoá dữ liệu trang web.

Tính năng xoá dữ liệu trang web đã hoạt động trên Ứng dụng > Xoá bộ nhớ được một lúc. Tính năng mới trong Chrome 75 có thể chạy lệnh trong Trình đơn Command.

Nếu không muốn xoá tất cả dữ liệu trang web, bạn có thể kiểm soát loại dữ liệu sẽ bị xoá trong phần Ứng dụng > Xoá bộ nhớ.

Thẻ 'Application' (Ứng dụng) trong đó 'Clear Storage' (Xoá bộ nhớ) được chọn.

Hình 4. Ứng dụng > Xoá bộ nhớ.

Vấn đề liên quan đến Chromium: #942503

Xem tất cả cơ sở dữ liệu IndexedDB

Trước đây, Application > IndexedDB chỉ cho phép bạn kiểm tra cơ sở dữ liệu IndexedDB từ nguồn gốc chính. Ví dụ: nếu bạn có <iframe> trên trang và <iframe> đang sử dụngIndexedDB, thì bạn sẽ không thể xem(các) cơ sở dữ liệu của trang đó. Kể từ Chrome 75, Công cụ cho nhà phát triển hiển thị cơ sở dữ liệu IndexedDB cho mọi nguồn gốc.

Hành vi cũ. Trang đang nhúng một bản minh hoạ sử dụng IndexedDB, nhưng không hiển thị cơ sở dữ liệu nào.

Hình 5. Hành vi cũ. Trang đang nhúng một bản minh hoạ sử dụng IndexedDB, nhưng không hiển thị cơ sở dữ liệu nào.

Hành vi mới. Có thể nhìn thấy cơ sở dữ liệu của bản minh hoạ.

Hình 6. Hành vi mới. Có thể nhìn thấy cơ sở dữ liệu của bản minh hoạ.

Vấn đề liên quan đến Chromium: #943770

Xem kích thước không nén của tài nguyên khi di chuột

Giả sử rằng bạn đang kiểm tra hoạt động mạng. Trang web của bạn sử dụng tính năng nén văn bản để giảm dung lượng truyền tài nguyên. Bạn muốn xem dung lượng của tài nguyên của trang sau khi trình duyệt giải nén các tài nguyên đó. Trước đây, thông tin này chỉ có sẵn khi sử dụng hàng yêu cầu lớn. Bây giờ, bạn có thể truy cập thông tin này bằng cách di chuột qua cột Kích thước.

Di chuột qua cột Kích thước để xem kích thước không nén của tài nguyên.

Hình 7. Di chuột qua cột Kích thước để xem kích thước không nén của tài nguyên.

Vấn đề liên quan đến Chromium: #805429

Điểm ngắt cùng dòng trong ngăn điểm ngắt

Giả sử bạn thêm một điểm ngắt dòng mã vào dòng mã sau:

document.querySelector('#dante').addEventListener('click', logWarning);

Hiện tại, Công cụ cho nhà phát triển đã cho phép bạn chỉ định chính xác thời điểm nên tạm dừng tại một điểm ngắt như sau: ở đầu dòng, trước khi document.querySelector('#dante') được gọi hoặc trước khi addEventListener('click', logWarning) được gọi. Nếu bật cả 3 điểm ngắt, về cơ bản bạn sẽ tạo 3 điểm ngắt. Trước đây, ngăn Breakpoints (Điểm ngắt) không cung cấp cho bạn khả năng quản lý 3 điểm ngắt này riêng lẻ. Kể từ Chrome 75, mỗi điểm ngắt cùng dòng sẽ có mục nhập riêng trong ngăn Breakpoints (Điểm ngắt).

Hành vi cũ. Chỉ có một mục nhập trong ngăn Điểm ngắt.

Hình 8. Hành vi cũ. Chỉ có 1 mục nhập trong ngăn Điểm ngắt.

Hành vi mới. Có 3 mục nhập trong ngăn Điểm ngắt.

Hình 9. Hành vi mới. Có 3 mục nhập trong ngăn Điểm ngắt.

Vấn đề liên quan đến Chromium: #927961

Số lượng tài nguyên IndexedDB và Bộ nhớ đệm

Giờ đây, các ngăn IndexedDBCache cho biết tổng số tài nguyên trong cơ sở dữ liệu hoặc bộ nhớ đệm.

Tổng số mục nhập trong cơ sở dữ liệu IndexedDB.

Hình 10. Tổng số mục nhập trong cơ sở dữ liệu IndexedDB.

Các vấn đề liên quan đến Chromium: #941197, #930773, #930865

Chế độ cài đặt để tắt chú thích về hoạt động kiểm tra chi tiết

Chrome 73 ra mắt chú thích chi tiết khi ở chế độ Kiểm tra.

Phần chú thích chi tiết.

Hình 11 Một chú thích chi tiết cho thấy màu sắc, phông chữ, lề và độ tương phản.

Giờ đây, bạn có thể tắt các chú thích chi tiết này trong phần Cài đặt > Lựa chọn ưu tiên > Phần tử > Hiện chú giải công cụ kiểm tra chi tiết.

Một chú thích tối giản.

Hình 12 Chú thích tối thiểu chỉ hiển thị chiều rộng và chiều cao.

Vấn đề liên quan đến Chromium: #948417

Chế độ cài đặt bật/tắt tính năng thụt lề thẻ trong trình chỉnh sửa bảng điều khiển Nguồn

Quá trình kiểm thử khả năng hỗ trợ tiếp cận cho thấy có một bẫy thẻ trong Trình chỉnh sửa. Sau khi người dùng bàn phím gắn thẻ vào Trình chỉnh sửa, họ không có cách nào để thoát khỏi bàn phím vì phím Tab đã được dùng để thụt lề. Để ghi đè hành vi mặc định và sử dụng phím Tab để di chuyển tiêu điểm, hãy bật Cài đặt > Lựa chọn ưu tiên > Nguồn > Bật tiêu điểm di chuyển thẻ.

Gần đây, có rất nhiều hoạt động nhằm cải thiện khả năng điều hướng bằng bàn phím trong giao diện người dùng Công cụ cho nhà phát triển. Hãy xem video Điều hướng trong Công cụ của Chrome cho nhà phát triển bằng công nghệ hỗ trợ của Rob để tìm hiểu thêm.

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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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