Trang này được dịch bởi Cloud Translation API.

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 trên 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 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, 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 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 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 (máy Mac) để mở Trình đơn dòng lệnh, sau đó 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}Cache, Web1}Web1,

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

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

Đã tạm thời xoá dữ liệu trang web trong phần Ứng dụng > Xoá bộ nhớ. Tính năng mới trong Chrome 75 có thể chạy lệnh từ 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 những dữ liệu bị xoá trong phần Ứng dụng > Xoá bộ nhớ.

Tab 'Application' (Ứng dụng) với '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, Ứng dụng > IndexedDB chỉ cho phép bạn kiểm tra cơ sở dữ liệu IndexedDB từ nguồn chính. Ví dụ: nếu bạn có một <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 chương trình đó. Kể từ Chrome 75, Công cụ cho nhà phát triển sẽ 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 có cơ sở dữ liệu nào hiển thị.

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 hiển thị.

Hành vi mới. Cơ sở dữ liệu của bản minh hoạ đang hiển thị.

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

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 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 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 vào 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);

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 trên 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 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 cùng dòng đề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 nhập trong ngăn Breakpoints (Đ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 Breakpoints (Điểm ngắt).

Hình 9. Hành vi mới. Có 3 mục nhập trong ngăn Breakpoints (Đ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, ngăn IndexedDB và Cache (Bộ nhớ đệm) 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.

Chú giải công cụ chi tiết.

Hình 11 Chú giải công cụ chi tiết hiển thị 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 > Phần tử > Hiện chú giải công cụ kiểm tra chi tiết.

Chú giải công cụ đơn giản.

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

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

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

Kết quả 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 nhập vào Editor (Trình chỉnh sửa), họ không thể chuyển ra khỏi thẻ đó 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 việc để làm cho giao diện người dùng Công cụ cho nhà phát triển dễ điều hướng hơn bằng bàn phím. Hãy xem bài viết Điều hướng 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 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 > 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.