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:

Đọ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. Ví dụ: nếu JavaScript khiến tìm nạp hình ảnh, thì cột Trình khởi tạo sẽ hiển thị cho bạn dòng mã JavaScript đã dẫn đến 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ả 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. Hiện tại, điều đó 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.

Bỏ qua "requests.js".

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 các tài nguyên đó đã được giảm thiểu.

Thẻ Xem trước in nội dung của analytics.js theo mặc định.

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ể tạo bản in đẹp cho tài nguyên trong thẻ Response (Phản hồi) thông qua nút Format (Định dạng) mới.

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

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 tài nguyên HTML 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ẻ Preview (Xem trước) hiện luôn thực hiện thao tác kết xuất cơ bản đối với HTML. Trình duyệt 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 tài nguyên rồi chọn 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 nhìn mỗi khi 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 Ghi đè cục bộ trong Chrome 65, một hạn chế là công cụ 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 nội dung 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, trong lần tải lại tiếp theo, kiểu sẽ chuyển về 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

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 rằng các điểm ngắt trình nghe sự kiện không hữu ích đối với các ứng dụng được tạo dựa trên 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 trong dòng đầu tiên của mã trình nghe. Trong trường hợp này, công cụ này sẽ tạm dừng trong mã bao bọc của Vue.js trên dòng 1802, điều này không hữu ích.

Đ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 sẽ 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 đó từ ngăn Call Stack (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 từ ngăn Ngăn xếp lệnh gọi.

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ó sẽ thực thi mã Vue.js mà không tạm dừng, sau đó tạm dừng trên dòng mã đầu tiên trong trình nghe của ứng dụng. Đây cũng là nơi tôi thực sự muốn tạm dừng tất cả.

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. Đ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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59