Tháng này, Chrome Canary đã ra mắt nhiều tính năng. Hãy đọc tiếp để tìm hiểu xem tập lệnh nào của bên thứ ba gây ra sự cố về hiệu suất trên trang web của bạn qua phần Thông tin chi tiết tổng hợp trong Dòng thời gian, cách chọn màu sắc phù hợp với bảng màu mới, cách mô phỏng Wi-Fi hội nghị với cấu hình mạng có thể tuỳ chỉnh và cách khai thác tối đa Giao diện người dùng của Công cụ cho nhà phát triển nhờ trình đơn chính mới và phần chú thích rõ ràng hơn.
Xác định vấn đề về hiệu suất một cách chính xác hơn: Thông tin chi tiết tổng hợp trong Dòng thời gian
Trên các trang web hiện nay, chúng ta đang sử dụng ngày càng nhiều beacon, dịch vụ phân tích, mạng xã hội, tải phông chữ và quảng cáo của bên thứ ba, đôi khi quá nhiều. Để đảm bảo điều này không xảy ra và giúp bạn nắm được vấn đề, chúng tôi sẽ ra mắt thông tin chi tiết tổng hợp trên Dòng thời gian.
Trong thẻ Thông tin chi tiết tổng hợp, bạn có thể chỉ tập trung vào các hàm tốn kém hoặc toàn bộ cây lệnh gọi, sau đó phân tích dữ liệu đã chọn theo miền, miền con hoặc URL riêng biệt. Ví dụ: trong Tiến trình tải trang ở trên, giờ đây, bạn có thể dễ dàng phân bổ các sự cố chậm trễ cho tập lệnh của bên thứ ba đến từ các miền như facebook.net hoặc twitter.com.
Trình đơn chính mới, chuyên biệt
Để thanh công cụ chính không bị lộn xộn, chúng tôi đã di chuyển ngăn, biểu tượng cài đặt và biểu tượng kết nối vào một trình đơn chính mới, chuyên dụng.
Cụ thể, tính năng kết nối đã trở nên đơn giản hơn nhiều. Thay vì phải nhấn và giữ biểu tượng trước đó, mỗi vị trí kết nối đều có biểu tượng riêng.
Ngoài việc gắn vào đế sạc, chúng tôi còn thêm tính năng tìm kiếm tệp truy cập nhanh, lối tắt và tính năng trợ giúp (dẫn đến trang chủ mới của chúng tôi).
Khám phá Công cụ cho nhà phát triển thông qua chú giải công cụ được cải thiện
Chúng tôi có rất nhiều nút trong Công cụ cho nhà phát triển và biết rằng không phải tất cả những nút đó đều tự giải thích được. Giờ đây, chúng tôi đã giúp bạn dễ dàng khám phá các thao tác và lối tắt của chúng bằng cách thay thế chú giải công cụ gốc của hệ thống bằng chú giải công cụ tuỳ chỉnh, nhất quán với nền tảng.
Chú giải công cụ mới xuất hiện nhanh hơn nhiều và bao gồm cả phím tắt (nếu có).
Tạo hồ sơ điều tiết mạng tuỳ chỉnh
Nếu các tuỳ chọn mặc định cho Trình điều tiết mạng quá hạn chế đối với trường hợp sử dụng của bạn và bạn cần tuỳ chọn "Wi-Fi hội nghị" hoặc muốn sử dụng phương thức cũ và mô phỏng dòng"110 Baud", thì tôi có tin vui cho bạn. Chúng tôi đã thêm một bảng Cài đặt mới cho phép bạn thực hiện bất kỳ thao tác nào trong số đó.
Bảng màu tự động, Material và tuỳ chỉnh
Cho dù bạn muốn tạo lại màu sắc của phép thuật hay làm việc với bảng màu hiện có, thì công cụ Colorpicker (Bộ chọn màu) cải tiến sẽ giúp bạn chọn một bảng màu nhất quán cho trang web của mình.
Bằng cách nhấp vào biểu tượng trình chuyển đổi nhỏ bên cạnh bảng, bạn có thể chọn trong số các lựa chọn sau:
- Màu trang — Bảng màu này được tạo tự động từ các màu chúng tôi tìm thấy trong CSS của bạn, nên đây là một lựa chọn tuyệt vời nếu bạn đang mở rộng một trang web hiện có.
- Material Design – Bảng màu Material Design cung cấp các màu sắc đẹp ngay từ đầu và là lựa chọn lý tưởng khi bắt đầu một dự án mới. Hiện tại, bạn sẽ thấy tất cả màu cơ bản, nhưng chúng tôi sẽ sớm cung cấp tất cả sắc thái.
- Tuỳ chỉnh – Đó là sân chơi của riêng bạn. Thêm màu mới bằng cách chọn một màu trong bộ chọn, sau đó nhấp vào biểu tượng "dấu cộng" bên cạnh bảng màu. Sắp xếp lại bằng cách kéo các mục đó xung quanh rồi nhấp chuột phải để hiện thêm các tuỳ chọn, chẳng hạn như xoá.
Cho chúng tôi biết ý kiến của bạn và cách chúng tôi có thể mở rộng câu chuyện về màu sắc hơn nữa.
Tốt nhất trong phần còn lại
- Các yêu cầu được thực hiện bằng API fetch() hiện xuất hiện trong Bảng điều khiển mạng
- Tính năng Tự động bố trí bảng điều khiển đảm bảo rằng khi bạn đổi kích thước bảng điều khiển DevTools
, các bảng điều khiển sẽ điều chỉnh cho phù hợp với các giới hạn không gian mới. - Inspect Element & Device Mode (Kiểm tra phần tử và chế độ thiết bị) có một bộ biểu tượng mới.
- Các thuộc tính trong bảng điều khiển DOM hiện có màu khác nhau ngay cả khi nút được làm nổi bật. (Trước đây, tất cả đều có màu trắng.)
- Các phần tử ẩn (được kích hoạt bằng cách nhấn phím "h" trên một nút DOM đã chọn) hiện hiển thị một chỉ báo vòng tròn màu xám ở bên trái và điểm ngắt DOM cũng làm như vậy với một vòng tròn màu xanh dương. (Điều này tương tự như các chỉ báo màu cam mà chúng ta đã có để buộc một trạng thái phần tử như :hover).
Như thường lệ, hãy cho chúng tôi biết ý kiến của bạn qua Twitter hoặc bình luận bên dưới, đồng thời gửi lỗi đến crbug.com/new.
Hẹn gặp lại bạn vào tháng sau!
Paul Bakaus và nhóm Công cụ cho nhà phát triển