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 lớn sẽ có trong Công cụ cho nhà phát triển trong Chrome 66 bao gồm:

Hãy đọ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 điều khiển Network (Mạng) cho bạn biết lý do yêu cầu một tài nguyên. Ví dụ: nếu JavaScript khiến một hình ảnh được tìm nạp, thì 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 gói các yêu cầu mạng trong một trình bao bọc, thì cột Initiator (Trình khởi tạo) sẽ không hữu ích lắm. 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ã ứng dụng gây ra yêu cầu. Giờ đây, bạn có thể làm được điều đó:

  1. Di chuột qua cột Đầu mối khởi tạo. Ngăn xếp lệnh gọi gây ra yêu cầu sẽ xuất hiện trong một cửa sổ bật lên.
  2. Nhấp chuột phải vào lệnh gọi mà bạn muốn ẩn khỏi kết quả của phương thức khởi tạo.
  3. Chọn Thêm tập lệnh vào danh sách bỏ qua. Cột Trình khởi tạo hiện ẩn mọi lệnh gọi từ tập lệnh mà bạn đã bỏ qua.

Bỏ qua "requests.js".

Hình 1 Bỏ qua requests.js

Quản lý các tập lệnh bị bỏ qua trong 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.

In đẹp trong thẻ Xem trước và Phản hồi

Thẻ Xem trước trong bảng điều khiển Mạng hiện in đẹp các tài nguyên theo mặc định khi phát hiện rằng các tài nguyên đó đã được rút gọn.

Theo mặc định, thẻ Xem trước sẽ in đẹp nội dung của analytics.js.

Hình 2. Thẻ 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ể in đẹp các tài nguyên theo cách thủ công từ thẻ Response (Phản hồi) thông qua nút Format (Định dạng) mới.

In đẹp nội dung của analytics.js theo cách thủ công thông qua nút Định dạng.

Hình 3. In đẹp nội dung của analytics.js theo cách thủ công thông qua nút Format (Định dạng)

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

Trước đây, thẻ Xem trước trong bảng điều khiển Mạng hiển thị mã của tài nguyên HTML trong một số trường hợp, trong khi hiển thị bản xem trước của HTML trong các trường hợp khác. Thẻ Xem trước hiện luôn thực hiện việc kết xuất HTML cơ bản. Đây không phải là trình duyệt đầy đủ, vì vậy, trình duyệt này 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ẻ Response (Phản hồi) hoặc nhấp chuột phải vào một tài nguyên rồi chọn Open in Sources panel (Mở trong bảng điều khiển Nguồn).

Xem trước HTML trong thẻ Xem trước.

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

Tự động điều chỉnh mức thu phóng trong 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ị.

Giờ đây, tính năng Ghi đè cục bộ hoạt động với một số kiểu được xác định trong HTML

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

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

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 nội dung khai báo font-weight thông qua ngăn Style (Kiểu) trong Công cụ cho nhà phát triển, thì tính năng Local Overrides (Ghi đè cục bộ) sẽ không theo dõi thay đổi đó. Nói cách khác, ở lần tải lại tiếp theo, kiểu sẽ quay lại font-weight: bold. Tuy nhiên, trong Chrome 66, những thay đổi như vậy hiện vẫn tồn tại trong các lần tải trang.

Mẹo bổ sung: Bỏ qua tập lệnh khung để các Điểm ngắt của trình nghe sự kiện trở nên hữu ích hơn

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

Điểm ngắt lượt nhấp sẽ tạm dừng trong mã trình bao bọc của Vue.js.

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

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 đó khỏi ngăn Call Stack (Ngăn xếp lệnh gọi) để điểm ngắt click này trở nên hữu ích hơn.

Bỏ qua tập lệnh Vue.js khỏi ngăn Ngăn xếp lệnh gọi.

Hình 7. Bỏ qua tập lệnh Vue.js trong ngăn Call Stack (Ngăn xếp lệnh gọi)

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

Giờ đây, điểm ngắt lượt nhấp sẽ tạm dừng trên mã trình nghe của ứng dụng.

Hình 8. Giờ đây, điểm ngắt click sẽ tạm dừng trên mã trình nghe của ứng dụng

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.