Gần đây, một số tính năng cập nhật đã được đưa vào Công cụ của Chrome cho nhà phát triển, một số tính năng nhỏ, một số tính năng lớn. Chúng ta sẽ bắt đầu với các nội dung cập nhật của bảng điều khiển Thành phần, sau đó chuyển sang thảo luận về Bảng điều khiển, Tiến trình và nhiều nội dung khác.
Tắt tính năng sao chép quy tắc kiểu dưới dạng nhận xét
Giờ đây, khi sao chép toàn bộ quy tắc CSS trong ngăn Kiểu, các kiểu bạn đã tắt sẽ được bao gồm. Các kiểu này sẽ tồn tại trong bảng nhớ tạm dưới dạng nhận xét. [crbug.com/316532]
Sao chép dưới dạng đường dẫn CSS
Giờ đây, bạn có thể sử dụng "Sao chép dưới dạng đường dẫn CSS" dưới dạng một mục trong trình đơn cho các nút DOM trong bảng điều khiển Phần tử (tương tự như mục trong trình đơn Sao chép XPath).
Việc tạo bộ chọn CSS không chỉ giới hạn ở các tệp định kiểu/JavaScript, mà còn có thể là giải pháp thay thế cho các chiến lược định vị trong kiểm thử WebDriver. [crbug.com/277286]
Xem các kiểu phần tử Shadow DOM
Giờ đây, bạn có thể kiểm tra kiểu của các phần tử con của gốc bóng. [crbug.com/279390]
copy() của bảng điều khiển hoạt động cho các đối tượng
Phương thức copy() từ Command Line API (API dòng lệnh) hiện hoạt động cho các đối tượng. Hãy thử copy({foo:'bar'}) vào bảng điều khiển Console và lưu ý cách phiên bản đã chuyển đổi thành chuỗi và định dạng của đối tượng hiện có trong bảng nhớ tạm. [crbug.com/289348]
Bộ lọc biểu thức chính quy cho bảng điều khiển
Lọc thông báo của bảng điều khiển bằng biểu thức chính quy trong bảng điều khiển. crbug.com/318308]
Dễ dàng xoá trình nghe sự kiện
Hãy thử getEventListeners(document).mousewheel[0]; trong bảng điều khiển Console để truy xuất trình nghe sự kiện con lăn chuột đầu tiên trên tài liệu. Tiếp tục từ đây, hãy thử $_.remove(); để xoá trình nghe sự kiện đó ($_ = giá trị của biểu thức được đánh giá gần đây nhất). crbug.com/309524]
Xoá cảnh báo CSS
Những cảnh báo kiểu "Giá trị thuộc tính CSS không hợp lệ" mà bạn có thể đã thấy hiện đã bị xoá. Chúng tôi đang nỗ lực không ngừng để triển khai tính năng này hiệu quả hơn trước CSS trong thế giới thực, bao gồm cả các cuộc tấn công trình duyệt. crbug.com/309982]
Các thao tác trên dòng thời gian được tóm tắt trong biểu đồ hình tròn
Bảng điều khiển Dòng thời gian hiện chứa một biểu đồ hình tròn trong ngăn Chi tiết, biểu đồ này cho thấy nguồn gốc của chi phí kết xuất một cách trực quan. Nhờ đó, bạn có thể nhanh chóng xác định nút thắt cổ chai.
Bạn sẽ thấy rằng phần lớn thông tin từng hiển thị trong cửa sổ bật lên hiện đã được chuyển sang ngăn riêng. Để xem, hãy bắt đầu quay video Dòng thời gian rồi chọn một khung hình. Hãy lưu ý đến ngăn Chi tiết mới chứa biểu đồ hình tròn. Khi ở chế độ xem Khung, bạn sẽ thấy các số liệu thống kê thú vị như FPS trung bình (1000ms/frame duration) cho(các) khung đã chọn. [crbug.com/247786]
Thông tin chi tiết về sự kiện đổi kích thước hình ảnh
Các sự kiện đổi kích thước và giải mã hình ảnh trong bảng điều khiển Dòng thời gian hiện chứa đường liên kết đến nút DOM trong bảng điều khiển Phần tử.
Đường liên kết URL của hình ảnh sẽ đưa bạn đến tài nguyên tương ứng trong Ngăn tài nguyên. crbug.com/244159]
Khung GPU
Các khung hình xảy ra trên GPU hiện hiển thị ở trên cùng, phía trên các khung hình trên luồng chính. crbug.com/305863]
Ngắt trên trình nghe popstate
'popstate' hiện có sẵn dưới dạng điểm ngắt trình nghe sự kiện trong thanh bên của bảng điều khiển Nguồn. [crbug.com/88112]
Các chế độ cài đặt kết xuất có trong ngăn
Giờ đây, khi mở ngăn, bạn sẽ thấy một số ngăn, trong đó có ngăn Rendering (Hiển thị), hãy sử dụng ngăn này để hiển thị hình chữ nhật vẽ, đồng hồ FPS, v.v. Tính năng này được bật theo mặc định tại phần Settings (Cài đặt) > "Show 'Rendering' view in console drawer" (Hiển thị chế độ xem "Rendering" (Hiển thị) trong ngăn bảng điều khiển)
Sao chép hình ảnh dưới dạng URL dữ liệu
Giờ đây, bạn có thể sao chép nội dung của các thành phần hình ảnh trong bảng điều khiển Tài nguyên dưới dạng URI dữ liệu (data:image/png;base64,iVBO...).
Để thử tính năng này, hãy tìm tài nguyên hình ảnh trong Frames > [Resource] > Images (Khung > [Tài nguyên] > Hình ảnh) rồi nhấp chuột phải vào bản xem trước hình ảnh để truy cập vào trình đơn theo bối cảnh, sau đó chọn "Copy Image as Data URL" (Sao chép hình ảnh dưới dạng URL dữ liệu). crbug.com/321132]
Lọc URI dữ liệu
Nếu bạn chưa bao giờ nghĩ rằng chúng thuộc về, thì giờ đây, bạn có thể lọc URI dữ liệu ra khỏi thẻ Mạng. Chọn biểu tượng Bộ lọc
Khắc phục lỗi Thời gian mạng
Chúng tôi rất xin lỗi nếu bạn thấy hình ảnh của mình mất 300.000 năm để tải xuống. ;) Chúng tôi đã khắc phục những thời gian không chính xác này cho tài nguyên mạng. crbug.com/309570]
Hành vi ghi lại hoạt động mạng có nhiều quyền kiểm soát hơn
Hành vi của việc ghi lại mạng có đôi chút khác biệt. Trước tiên, nút ghi hoạt động giống như bạn mong đợi từ Dòng thời gian hoặc hồ sơ CPU. Và như bạn mong đợi, nếu bạn tải lại trang trong khi Công cụ cho nhà phát triển đang mở, thì tính năng ghi lại hoạt động mạng sẽ tự động bắt đầu. Sau đó, tính năng này sẽ tắt. Vì vậy, nếu bạn muốn ghi lại hoạt động mạng sau khi tải trang, hãy bật tính năng này. Điều này giúp bạn dễ dàng hình dung thác nước mà không bị các yêu cầu mạng muộn làm sai lệch kết quả. crbug.com/325878]
Các giao diện DevTools hiện có sẵn thông qua tiện ích
Giờ đây, bạn có thể sử dụng các tệp kiểu của người dùng thông qua tính năng Thử nghiệm của DevTools (hộp đánh dấu: "Allow custom UI themes" (Cho phép giao diện người dùng tuỳ chỉnh)). Tính năng này cho phép tiện ích Chrome áp dụng kiểu tuỳ chỉnh cho DevTools. Hãy xem Mẫu tiện ích giao diện DevTools để biết ví dụ. crbug.com/318566]
Đó là tất cả nội dung của bản tin DevTools lần này. Nếu bạn chưa xem, hãy tham khảo bản tin tháng 11.