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

Kayce Basques

Các tính năng mới và thay đổi chính sắp ra mắt trong Công cụ cho nhà phát triển trong Chrome 66 bao gồm:

• Bỏ qua tập lệnh trong bảng điều khiển Network (Mạng)
• Tự động điều chỉnh mức thu phóng trong Chế độ thiết bị
• In đẹp trong thẻ Xem trước và thẻ Phản hồi
• Xem trước nội dung HTML trong thẻ Xem trước
• Ghi đè cục bộ với các kiểu bên trong HTML

Đọc tiếp hoặc xem phiên bản video của ghi chú phát hành bên dưới.

Bỏ qua tập lệnh trong bảng điều khiển Mạng

Cột Initiator (Trình khởi tạo) trong bảng Network (Mạng) cho bạn biết lý do yêu cầu một tài nguyên. Cho Ví dụ: nếu JavaScript khiến tìm nạp hình ảnh, cột Trình khởi tạo sẽ hiển thị cho bạn dòng Mã JavaScript gây ra yêu cầu.

Trước đây, nếu khung của bạn đưa các yêu cầu mạng vào một trình bao bọc, thì cột Trình khởi tạo thì không phải là một cách hữu ích. Tất cả các yêu cầu mạng đều trỏ đến cùng một dòng mã trình bao bọc.

Điều bạn thực sự muốn trong trường hợp này là xem mã xử lý ứng dụng gây ra yêu cầu. Đó là hiện có thể:

1. Di chuột qua cột Người khởi tạo. Ngăn xếp cuộc gọi dẫn đến yêu cầu sẽ xuất hiện trong cửa sổ bật lên.
2. Nhấp chuột phải vào cuộc gọi mà bạn muốn ẩn khỏi kết quả của trình khởi tạo.
3. Chọn Thêm tập lệnh vào danh sách bỏ qua. Giờ đây, cột Initiator (Trình khởi tạo) sẽ ẩn mọi lệnh gọi khỏi tập lệnh mà bạn đã bỏ qua.

Hình 1 Đang bỏ qua requests.js

Quản lý các tập lệnh bị bỏ qua trên thẻ Danh sách bỏ qua trong phần Cài đặt.

Hãy xem phần Bỏ qua tập lệnh hoặc mẫu tập lệnh để tìm hiểu thêm về cách bỏ qua tập lệnh.

Tạo bản in đẹp trong các thẻ Xem trước và Phản hồi

Thẻ Preview (Xem trước) trong bảng điều khiển Network (Mạng) giờ đây có thể in tài nguyên theo mặc định khi phát hiện thấy những tài nguyên đó đã bị giảm bớt.

Hình 2. Thẻ Preview (Xem trước) in đẹp nội dung của analytics.js theo mặc định

Để xem phiên bản chưa rút gọn của một tài nguyên, hãy sử dụng thẻ Phản hồi. Bạn cũng có thể làm theo cách thủ công các tài nguyên in đẹp từ thẻ Response (Phản hồi) thông qua nút Format (Định dạng) mới.

Hình 3. In thủ công nội dung của analytics.js bằng nút Định dạng

Xem trước nội dung HTML trong thẻ Xem trước

Trước đây, thẻ Preview (Xem trước) trong bảng điều khiển Network (Mạng) đã hiển thị mã của một tài nguyên HTML trong trong một số trường hợp nhất định, trong khi hiển thị bản xem trước của HTML trong những trường hợp khác. Thẻ Xem trước hiện luôn sẵn sàng thực hiện kết xuất cơ bản của HTML. Ứng dụng này không nhằm mục đích trở thành một trình duyệt hoàn chỉnh nên có thể không hiển thị HTML chính xác như bạn mong đợi. Nếu bạn muốn xem mã HTML, hãy nhấp vào thẻ Phản hồi hoặc nhấp chuột phải vào một tài nguyên rồi chọn Mở trong bảng điều khiển Nguồn.

Hình 4. Xem trước HTML trong thẻ Xem trước

Tự động điều chỉnh mức thu phóng ở Chế độ thiết bị

Khi ở Chế độ thiết bị, hãy mở trình đơn thả xuống Thu phóng rồi chọn Tự động điều chỉnh mức thu phóng để tự động đổi kích thước khung nhìn bất cứ khi nào bạn thay đổi hướng thiết bị.

Cơ chế Ghi đè cục bộ hiện hoạt động với một số kiểu được xác định trong HTML

Khi Công cụ cho nhà phát triển khởi chạy tính năng Ghi đè cục bộ trong Chrome 65, có một hạn chế là công cụ này không thể theo dõi các thay đổi đối với các kiểu được xác định trong HTML. Ví dụ: trong Hình 7 có một kiểu quy tắc trong head của tài liệu khai báo font-weight: bold cho các phần tử h1.

Hình 5. Ví dụ về các kiểu được xác định trong HTML

Trong Chrome 65, nếu bạn đã thay đổi phần khai báo font-weight qua ngăn Kiểu của Công cụ cho nhà phát triển, Cục bộ Các lệnh ghi đè sẽ không theo dõi sự thay đổi. Nói cách khác, trong lần tải lại tiếp theo, kiểu sẽ đảo ngược quay lại font-weight: bold. Tuy nhiên, trong Chrome 66, những thay đổi như thế này giờ đây sẽ vẫn tồn tại sau khi tải trang.

Mẹo hay: Bỏ qua các tập lệnh khung để làm cho Điểm ngắt trình nghe sự kiện hữu ích hơn

Quay lại khi tôi tạo video Bắt đầu với gỡ lỗi JavaScript, một số người xem đã nhận xét các điểm ngắt của trình nghe sự kiện không hữu ích cho các ứng dụng được tạo dựa trên các khung, vì sự kiện trình nghe thường được gói trong mã khung. Ví dụ: trong Hình 8, tôi đã thiết lập một click điểm ngắt trong Công cụ cho nhà phát triển. Khi tôi nhấp vào nút trong bản minh hoạ, Công cụ cho nhà phát triển sẽ tự động tạm dừng trong dòng đầu tiên của mã trình nghe. Trong trường hợp này, nó sẽ tạm dừng trong mã bao bọc của Vue.js trên dòng 1802, không thực sự hữu ích.

Hình 6. Điểm ngắt click sẽ tạm dừng trong Vue.js' mã trình bao bọc

Vì tập lệnh Vue.js nằm trong một tệp riêng biệt, nên tôi có thể bỏ qua tập lệnh đó từ Ngăn xếp lệnh gọi để làm cho điểm ngắt click này hữu ích hơn.

Hình 7. Bỏ qua tập lệnh Vue.js từ ngăn Ngăn xếp cuộc gọi

Vào lần tiếp theo tôi nhấp vào nút và kích hoạt điểm ngắt click, nút này sẽ thực thi mã Vue.js mà không dừng ở đó rồi tạm dừng ở dòng mã đầu tiên trong trình nghe của ứng dụng, tôi thực sự muốn tạm dừng một chút.

Hình 8. Điểm ngắt click hiện tạm dừng trên mã trình nghe của ứng dụng

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