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 Chrome DevTools 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, chẳng hạn như filter, lấy hàm cho các 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, DevTools 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 thành filter: blur và không có thay đổi nào xuất hiện 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 thành filter: blur(1px) và thay đổi sẽ hiển thị trong khung nhìn.

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

Xoá dữ liệu trang web trong Trình đơn lệnh

localStoragesessionStorageIndexedDB

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

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

Bạn có thể xoá dữ liệu trang web trong phần Ứng dụng > Xoá bộ nhớ từ lâu. Tính năng mới trong Chrome 75 là có thể chạy lệnh từ Trình đơn lệnh.

Nếu không muốn xoá tất cả dữ liệu trang web, bạn có thể kiểm soát dữ liệu nào 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 (Ứng dụng) > IndexedDB (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 có <iframe> trên trang và <iframe> đó đang sử dụng IndexedDB, thì bạn sẽ không thể xem(các) cơ sở dữ liệu của <iframe> đó. 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 này đ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 hiển thị.

Hình 5. Hành vi cũ. Trang này đ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 hiển thị.

Hành vi mới. Bạn có thể thấy các 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ử 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 kích thước truyền tải của tài nguyên. Bạn muốn biết kích thước của tài nguyên trên 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. Giờ đây, 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 chưa 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 chưa 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);

Trong một thời gian, DevTools đã cho phép bạn chỉ định thời điểm chính xác để 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, về cơ bản, bạn đang tạo 3 điểm ngắt. Trước đây, ngăn Breakpoints (Điểm ngắt) không cho phép bạn quản lý riêng 3 điểm ngắt này. Kể từ Chrome 75, mỗi điểm ngắt nội tuyến sẽ có mục riêng trong ngăn Breakpoints (Điểm ngắt).

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

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

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

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

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

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

Các ngăn IndexedDB và Bộ nhớ đệm hiện 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 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ú giải công cụ kiểm tra chi tiết

Chrome 73 đã ra mắt chú giải công cụ chi tiết khi ở chế độ Kiểm tra.

Chú giải công cụ 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ú giải công cụ chi tiết này trong phần Cài đặt > Lựa chọn ưu tiên > Thành phần > Hiện chú giải công cụ kiểm tra chi tiết.

Chú giải công cụ tối thiểu.

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

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

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

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

Gần đây, chúng tôi đã làm rất nhiều việc để giúp giao diện người dùng của DevTools dễ thao tác hơn bằng bàn phím. Hãy xem bài viết Điều hướng Chrome DevTools bằng công nghệ hỗ trợ của Rob để tìm hiểu thêm.

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.