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

Kayce Basques
Kayce Basques
X GitHub

Xin chào! Sau đây là những điểm mới trong Chrome DevTools trong Chrome 75.

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

Các giá trị đặt sẵn 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 các hàm làm 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, DevTools hiện sẽ điền thuộc tính bằng một giá trị có ý nghĩa để 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 mới của tính năng tự động hoàn thành.

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

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

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

Nhấn Control+Shift+P hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh, sau đó 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: Worker dịch vụ, localStorage, sessionStorage, IndexedDB, Web SQL, Cookie, Bộ nhớ đệm và Bộ nhớ đệm của ứng dụng.

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 đã có trong phần Ứng dụng > Xoá bộ nhớ một thời gian. Tính năng mới trong Chrome 75 là khả năng 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 những dữ liệu nào sẽ bị xoá khỏi Ứng dụng > Xoá bộ nhớ.

Thẻ "Ứng dụng" có lựa chọn "Xoá bộ nhớ" được chọn.

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

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

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

Trước đây, Ứ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 có một <iframe> trên trang của mình và <iframe> đó đang sử dụng IndexedDB, thì bạn sẽ không thể thấy(các) cơ sở dữ liệu của <iframe> đó. Kể từ Chrome 75, DevTools sẽ hiển thị cơ sở dữ liệu IndexedDB cho tất cả các nguồn.

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 xuất hiện.

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 xuất hiện.

Hành vi mới. Cơ sở dữ liệu của bản minh hoạ sẽ xuất hiện.

Hình 6. Hành vi mới. Cơ sở dữ liệu của bản minh hoạ sẽ xuất hiện.

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

Xem kích thước chưa nén của một 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 chuyển của tài nguyên. Bạn muốn xem kích thước của các tài nguyên trên trang sau khi trình duyệt giải nén chúng. Trước đây, thông tin này chỉ có khi bạn sử dụng các 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 lên cột Kích thước để xem kích thước chưa nén của một tài nguyên.

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

Vấn đề liên quan trê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, Công cụ cho nhà phát triển đã cho phép bạn chỉ định chính xác thời điểm cầ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, 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 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 đều 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 trong ngăn Breakpoints (Đ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

Giờ đây, ngăn IndexedDB và Cache 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 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.

Một chú giải công cụ chi tiết.

Hình 11 Một chú thích chi tiết cho biết 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ú thích chi tiết của công cụ kiểm tra.

Một chú giải công cụ tối giản.

Hình 12 Một chú thích tối giản chỉ cho biết 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 chế độ thụt lề bằng phím tab trong trình chỉnh sửa của bảng điều khiển Nguồn

Thử nghiệm khả năng hỗ trợ tiếp cận cho thấy có một bẫy phím tab trong Trình chỉnh sửa. Khi người dùng bàn phím nhấn phím Tab để chuyển đến Trình chỉnh sửa, họ không thể nhấn phím Tab để chuyển ra khỏi trình chỉnh sửa này 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 tính năng Di chuyển tiêu điểm bằng phím Tab.

Gần đây, chúng tôi đã nỗ lực rất nhiều để giúp giao diện người dùng của Công cụ cho nhà phát triển có thể thao tác bằng bàn phím. Hãy xem bài viết Đ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 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.