Xin chào tất cả mọi người! Trong ấn bản trước của DevTools Digest, chúng ta đã tìm hiểu về ngăn xếp lệnh gọi không đồng bộ mạnh mẽ và một số tính năng khác. Trong phiên bản này, chúng ta sẽ thấy tính năng lọc Bảng điều khiển mạng (có tính năng tự động hoàn thành) được cải tiến, các tính năng chỉnh sửa với nội dung Shadow DOM, bản cập nhật CodeMirror 4 và nhiều tính năng khác.
Lọc bảng điều khiển mạng
Giờ đây, bạn có thể lọc tài nguyên theo một số trường nhất định, chẳng hạn như Miền. Một định dạng bộ lọc là: Domain:website.com. Ngoài tính năng lọc, bạn còn nhận được đề xuất tự động hoàn thành cho các giá trị bộ lọc hợp lệ. Các giá trị này sẽ cập nhật theo thời gian thực khi bạn nhập cụm từ tìm kiếm. Bạn có thể thấy tính năng này hữu ích khi cần tìm tất cả tài nguyên do một miền cụ thể phân phát. [crbubg.com/258421]
Chỉnh sửa nội dung DOM tối
Công cụ dành cho nhà phát triển luôn có thể chỉnh sửa HTML thông thường trong bảng điều khiển Phần tử. Giờ đây, các tính năng này mở rộng cho các phần tử thuộc Shadow DOM. [crbug.com/348991]
Nâng cấp lên CodeMirror 4.0
CodeMirror, trình chỉnh sửa văn bản dựa trên JavaScript đang được sử dụng trong Bảng điều khiển nguồn đã được nâng cấp lên phiên bản 4. Do đó, chúng tôi đã thêm một loạt chức năng mới. crbug.com/356878]
Tìm nhanh thuộc tính CSS
Giờ đây, bạn có thể tìm tên thuộc tính, giá trị hoặc bộ chọn quy tắc trong hộp tìm kiếm mới trong ngăn Kiểu. Kết quả được làm nổi bật theo thời gian thực khi bạn nhập cụm từ tìm kiếm. [crbug.com/278852]
Dấu thời gian bên cạnh thông báo trên bảng điều khiển
Khi ghi nhật ký các thông báo liên tiếp, bạn nên xem thời gian chính xác mà thông báo được ghi lại. Bạn có thể bật tính năng này thông qua Thử nghiệm cho Công cụ cho nhà phát triển. [crbug.com/131714]
Bảng chi tiết về số liệu thống kê bộ nhớ cho ảnh chụp nhanh vùng nhớ khối xếp
Khi xem ảnh chụp nhanh vùng nhớ khối xếp đã ghi, hãy chú ý đến biểu đồ hình tròn thống kê cung cấp thông tin tổng quan trực quan, được mã hoá bằng màu sắc về khía cạnh nào của JavaScript đang tiêu tốn nhiều bộ nhớ nhất. Hiện là một tính năng thử nghiệm, hãy bật "Số liệu thống kê tổng quan nhanh về vùng nhớ khối xếp" để dùng thử. [crbug.com/346335]
Xem nguồn ban đầu của console.log, chứ không phải phiên bản được bao bọc
Có thể bạn có hàm trình bao bọc console.log, nhưng thật không may, trong bảng điều khiển, tất cả thông báo của bạn đều đến từ một hàm như util.js:46. Giờ đây, bạn có thể yêu cầu DevTools phân giải các vị trí ban đầu. Nhập tệp gói các thông điệp nhật ký của bảng điều khiển vào hộp nhập "Skip stepping through sources with particular names" (Bỏ qua việc chuyển qua các nguồn có tên cụ thể) để DevTools đưa tệp đó vào hộp đen, sau đó hiển thị nguồn thực sự của câu lệnh nhật ký. [crbug.com/231007]
Một vài tính năng bổ sung nhỏ nhưng mạnh mẽ
Làm mới ngăn Trình nghe sự kiện trong Bảng điều khiển phần tử, sau khi thêm hoặc xoá linh động trình nghe sự kiện JavaScript. [crbug.com/341044]
Bạn có thể sử dụng
Ctrl+để tập trung vào dữ liệu đầu vào trên Bảng điều khiển. Tính năng này cũng hữu ích cho quy trình làm việc chỉ dùng bàn phím trong Công cụ cho nhà phát triển. [crbug.com/144943]đề xuất tự động hoàn thành theo kiểu đường viền cho các giá trị (dấu chấm, nét đứt, đôi, rãnh) đã được cập nhật cho phù hợp với thông số kỹ thuật. [crbug.com/349998]
Nút Khôi phục các chế độ cài đặt mặc định rồi tải lại **đã được thêm vào bảng điều khiển Cài đặt. Nút này thực hiện đúng như nội dung mô tả. [crbug.com/135451]
Hiện là tính năng thử nghiệm, bạn có thể dùng thử bản dựng bên trái để xem mức độ phù hợp của tính năng này đối với quy trình làm việc của bạn. Các chế độ bố cục khác là gắn vào cửa sổ chính (bên phải hoặc dưới cùng) và gỡ vào một cửa sổ riêng. [crbug.com/134282]
"wheel" hiện được cung cấp dưới dạng điểm ngắt trình nghe sự kiện, ngoài các sự kiện nhấp, di chuyển chuột, nhấn chuột, v.v. thông thường. [crbug.com/347562]
Đó là tất cả nội dung tôi muốn chia sẻ. Cảm ơn bạn đã đọc!