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

Kayce Basques
Kayce Basques
X GitHub

Các tính năng mới và thay đổi lớn sắp 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 Trình khởi tạo trong bảng điều khiển Mạng cho biết lý do một tài nguyên được yêu cầu. Ví dụ: nếu JavaScript khiến một hình ảnh được tìm nạp, cột Trình khởi tạo sẽ cho bạn biết dòng mã JavaScript đã gây ra yêu cầu.

Trước đây, nếu khung của bạn bao bọc các yêu cầu mạng trong một trình bao bọc, thì cột 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 hướng đến cùng một dòng mã 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 Trình 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 cuộc gọi mà bạn muốn ẩn khỏi kết quả của người khởi xướng.
  3. Chọn Thêm tập lệnh vào danh sách bỏ qua. Giờ đây, cột Trình khởi tạo sẽ ẩn mọi lệnh gọi từ tập lệnh mà bạn đã bỏ qua.

Bỏ qua "requests.js".

Hình 1 Đang 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 một 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 theo định dạng 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 tài nguyên theo cách dễ đọc theo mặc định khi phát hiện thấy các tài nguyên đó đã được rút gọn.

Theo mặc định, thẻ Xem trước sẽ in nội dung của analytics.js theo cách dễ đọc.

Hình 2. Thẻ Xem trước in nội dung của analytics.js theo cách dễ đọc 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ể định dạng 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.

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

Hình 3. Định dạng 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 cho thấy mã của một tài nguyên HTML trong một số trường hợp, đồng thời hiển thị bản xem trước của HTML trong các trường hợp khác. Giờ đây, thẻ Xem trước luôn kết xuất HTML cơ bản. Đây không phải là một trình duyệt đầy đủ, vì vậy, có thể trình duyệt này 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 ở 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 hiển thị 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

Khi Công cụ cho nhà phát triển ra mắt tính năng Ghi đè cục bộ trong Chrome 65, một hạn chế là tính năng này 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 khai báo font-weight thông qua ngăn Kiểu của Công cụ cho nhà phát triển, thì Ghi đè cục bộ sẽ không theo dõi thay đổi đó. Nói cách khác, vào lần tải lại tiếp theo, kiểu này sẽ quay trở lại font-weight: bold. Nhưng trong Chrome 66, những thay đổi như thế này hiện vẫn duy trì trong các lần tải trang.

Mẹo bổ sung: Bỏ qua các tập lệnh khung để giúp Các điểm ngắt của trình xử lý sự kiệ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 các khung, vì trình nghe sự kiện thường được bao bọc trong mã khung. Ví dụ: trong Hình 8, tôi đã thiết lập một điểm ngắt click 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 ở dòng đầu tiên của mã trình nghe. Trong trường hợp này, quá trình gỡ lỗi sẽ tạm dừng ở mã trình bao bọc của Vue.js trên dòng 1802, điều này không hữu ích lắm.

Điểm ngắt khi 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 đó trong ngăn Ngăn xếp lệnh gọi để làm cho điểm ngắt click này hữu ích hơn.

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

Hình 7. Bỏ qua tập lệnh Vue.js trong ngăn 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, thao tác 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à vị trí mà 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 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.