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 cải thiện (có tính năng tự động hoàn thành), khả năng chỉnh sửa bằng nội dung Shadow DOM, nội dung 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ũng nhận được các đề xuất tự động hoàn thành cho các giá trị bộ lọc hợp lệ. Các đề xuất này sẽ cập nhật theo thời gian thực khi bạn nhập truy vấn. 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 Shadow DOM
Công cụ 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 chức năng này mở rộng đến 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 trong 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 gốc của console.log, chứ không phải phiên bản được gói
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 nội dung 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 của mình. 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 tìm hiểu 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+để lấy tiêu điểm trên dữ liệu đầu vào của Bảng điều khiển. Bạn có thể thấy thao tác này hữu ích cho quy trình làm việc chỉ sử dụng bàn phím trong DevTools. [crbug.com/144943]Đề xuất tự động hoàn thành kiểu đường viền cho các giá trị (chấm, nét đứt, đôi, rãnh) đã được cập nhật để khớ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 đang là một tính năng thử nghiệm, bạn có thể dùng thử tính năng đóng vào bên trái để khám phá xem tính năng này có phù hợp với quy trình làm việc của bạn hay không. 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à tháo ra 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]
Hiện tại, tôi xin phép dừng tại đây. Cảm ơn bạn đã đọc!