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

Kayce Basques

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) sẽ 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 sẵn thuộc tính có một giá trị có ý nghĩa để bạn có thể xem trước loại thay đổi mà giá trị đó sẽ trên nút.

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ó thể nhìn thấy thay đổi trong khung nhìn.

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 sẽ có thể nhìn thấy 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 Xoá dữ liệu trang web để xoá tất cả dữ liệu liên quan đến trang, bao gồm: Trình chạy dịch vụ, localStorage, sessionStorage, IndexedDB, SQL web, Cookie, Bộ nhớ đệm, và Bộ nhớ đệm của ứng dụng.

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

Tính năng xoá dữ liệu trang web hiện đã hoạt động trên Ứng dụng > Xoá bộ nhớ trong một thời gian. Gói thuê bao 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 việc dữ liệu nào sẽ bị xoá Ứng dụng > Xoá bộ nhớ.

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 là Application (Ứng dụng) > 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ó một <iframe> trên trang của mình và <iframe> đó đang sử dụng IndexedDB, bạn sẽ không thể xem(các) cơ sở dữ liệu của cơ sở dữ liệu đó. Kể từ Chrome 75, Công cụ cho nhà phát triển cho thấy IndexedDB cho mọi nguồn gốc.

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 có cơ sở dữ liệu nào đều có thể nhìn thấy.

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 biết tài nguyên của trang lớn đến mức nào sau trình duyệt sẽ giải nén chúng. Trước đây, thông tin này chỉ có sẵn khi sử dụng yêu cầu lớn hàng. 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.

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);

Tạm thờ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 trên điểm ngắt như sau: ở đầu dòng, trước khi document.querySelector('#dante') được gọi, hoặc trước khi gọi addEventListener('click', logWarning). Nếu bật cả 3 tính năng này, về cơ bản bạn sẽ tạo 3 điểm ngắt. Trước đây, ngăn Đ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. Kể từ Chrome 75, mỗi điểm ngắt cùng dòng sẽ có một mục riêng 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 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 IndexedDB và Cache cho biết tổng số tài nguyên trong một cơ sở dữ liệu hoặc bộ nhớ đệm.

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.

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 phần chú thích chi tiết trong phần Cài đặt > Lựa chọn ưu tiên > Elements > Hiện chú thích kiểm tra chi tiết.

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

Hoạt động 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 sử dụng bàn phím người dùng đã gắn thẻ vào Trình chỉnh sửa, nhưng họ không có cách nào để thoát khỏi thẻ vì phím Tab dùng để thụt lề. Để ghi đè chế độ 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 kỳ 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ố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > 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 của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển 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 bài Tính năng mới trong Công cụ cho nhà phát triển.