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

Sau đây là các tính năng mới và những thay đổi lớn sắp tới đối với Công cụ cho nhà phát triển trong Chrome 66:

Đọ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 sẽ cho bạn biết lý do tài nguyên được yêu cầu. Ví dụ: nếu JavaScript khiến hệ thống tìm nạp một hình ảnh, cột Initiator (Trình khởi tạo) sẽ cho bạn thấy dòng mã JavaScript gây ra yêu cầu.

Trước đây, nếu các yêu cầu mạng được bao bọc bởi khung của bạn 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 trỏ đến cùng một dòng mã bao bọc.

Những gì bạn thực sự muốn trong tình huống này là xem mã xử lý ứng dụng gây ra yêu cầu. Giờ đây, bạn có thể làm như sau:

  1. Di chuột qua cột Người khởi tạo. Ngăn xếp lệnh gọi đưa ra 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.

Đang bỏ qua "requests.js".

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

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

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 thẻ Xem trước và Phản hồi

Theo mặc định, thẻ Preview (Xem trước) trong bảng điều khiển Network (Mạng) hiện sẽ in tài nguyên đẹp mắt khi phát hiện các tài nguyên đó đã được giảm thiểu.

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

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

Để xem phiên bản không 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 tài nguyên đẹp 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 theo cách thủ công nội dung của analytics.js thông qua nút Định dạng.

Hình 3. In theo cách thủ công nội dung của analytics.js thông qua 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) giờ đây luôn kết xuất cơ bản của HTML. Trình duyệt 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ẻ 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.

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 bất cứ khi nào bạn thay đổi hướng của thiết bị.

Tính năng 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 ra mắt tính năng 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 sẽ 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ông cụ cho nhà phát triển, thì tính năng Ghi đè cục bộ sẽ không theo dõi thay đổi này. Nói cách khác, trong lần tải lại tiếp theo, kiểu sẽ hoàn nguyên về font-weight: bold. Tuy nhiên, trong Chrome 66, những thay đổi như thế này hiện vẫn tồn tại sau khi tải trang.

Mẹo hay: Bỏ qua các tập lệnh khung để giúp 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 với gỡ lỗi JavaScript, một số người xem nhận xét rằng 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 xây dựng trên khung, vì các 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 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, mã 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ã bao bọc của Vue.js.

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

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

Đang bỏ qua tập lệnh Vue.js trong ngăn Ngăn xếp lệnh gọi.

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

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

Điểm ngắt lượt nhấp hiện 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 sẽ 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 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   Thêm   > 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.

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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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