Thông báo của Công cụ cho nhà phát triển – Thông tin chi tiết tổng hợp về tiến trình, bảng màu và nhiều thông tin khác

Paul Bakaus
Paul Bakaus

Chrome Canary một tháng với nhiều tính năng phong phú. Hãy đọc tiếp để tìm hiểu tập lệnh của bên thứ ba nào gây ra vấn đề về hiệu suất trên trang web của bạn thông qua Chi tiết tổng hợp trong tiến trình, cách chọn màu phù hợp với bảng màu mới, cách mô phỏng kết nối Wi-Fi cho hội nghị với cấu hình mạng có thể tuỳ chỉnh và cách khai thác thêm sức mạnh từ giao diện người dùng Công cụ cho nhà phát triển bằng trình đơn chính mớichú giải công cụ tốt hơn.


đổ lỗi rõ ràng hơn cho các vấn đề về hiệu suất: Thông tin chi tiết tổng hợp trong Dòng thời gian

Thông tin chi tiết được tổng hợp theo dòng thời gian

Trên các trang web hiện nay, chúng tôi đang sử dụng ngày càng nhiều dịch vụ beacon, phân tích, mạng xã hội, tải phông chữ và quảng cáo từ các bên thứ ba, đôi khi một vài dịch vụ. Để đảm bảo điều này không xảy ra và giúp bạn nắm bắt được vấn đề, chúng tôi sẽ giới thiệu các thông tin chi tiết tổng hợp cho Dòng thời gian.

Trong thẻ Aggregated Details (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 đó chia nhỏ dữ liệu được chọn theo miền, miền phụ hoặc các URL khác biệt. Ví dụ: trong Dòng thời gian ở trên của một lượt tải trang, bạn hiện có thể dễ dàng phân bổ tốc độ chậm cho các 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, riêng biệt

Trình đơn chính mới.

Để sắp xếp gọn gàng thanh công cụ chính, chúng tôi đã di chuyển ngăn, các chế độ cài đặt và biểu tượng cố định vào một trình đơn chính mới, riêng biệt.

Đặc biệt, việc ghép nối thiết bị 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í đế sẽ có biểu tượng của riêng nó.

Ngoài tính năng gắn vào đế, chúng tôi còn thêm tính năng tìm tệp, lối tắt và trợ giúp truy cập nhanh (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 tiến

Chú giải công cụ mới.

Chúng tôi có rất nhiều nút trong Công cụ cho nhà phát triển và chúng tôi biết rằng không phải tất cả các nút này đều là cách tự giải thích. Giờ đây, chúng tôi giúp việc khám phá các hành động và lối tắt của chúng trở nên dễ dàng hơn bằng cách thay thế các chú giải công cụ dựa trên hệ thống bằng các chú giải công cụ tuỳ chỉnh, phù hợp với nền tảng.

Chú giải công cụ mới sẽ xuất hiện nhanh hơn nhiều và có cả phím tắt (nếu có).

Tạo hồ sơ điều tiết mạng tuỳ chỉnh

Hồ sơ mạng tuỳ chỉnh.

Nếu các tuỳ chọn mặc định của Network Throttler 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 "Hội nghị Wi-Fi" hoặc để hoài niệm, muốn 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 điều khiển Cài đặt mới để bạn có thể thực hiện bất kỳ thao tác nào trong số đó.

Bảng màu tự động, Material và bảng màu tuỳ chỉnh

Cho dù bạn muốn tạo lại các màu kỳ diệu hay sử dụng bảng màu hiện có, Công cụ 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 nút chuyển nhỏ bên cạnh bảng màu, bạn có thể chọn trong số các lựa chọn sau:

  1. 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, vì vậy, đâ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ó.
  2. Material DesignBảng màu của Material Design cung cấp những màu sắc đẹp mắt 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ẽ tìm thấy tất cả các màu chính nhưng chúng tôi sẽ sớm đưa tất cả các sắc độ về màu đó vào.
  3. 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 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 chúng đi khắp nơi và nhấp chuột phải để hiển thị thêm tùy chọn, chẳng hạn như xóa.

Hãy cho chúng tôi biết suy nghĩ của bạn và cách chúng tôi có thể mở rộng câu chuyện màu sắc hơn nữa.

Những video hay nhất còn lại

  • Giờ đây, yêu cầu được thực hiện qua fetch() API sẽ hiển thị trong Bảng điều khiển mạng
  • Bố cục bảng điều khiển tự động đảm bảo rằng khi bạn đổi kích thước các bảng điều khiển Công cụ cho nhà phát triển
    sẽ thích ứng với các hạn chế mới về không gian.
  • Inspect Element & Device Mode (Kiểm tra chế độ phần tử và 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 giờ đây sẽ đổi màu ngay cả khi nút được làm nổi bật. (Trước đây tất cả đều là người da trắng.)
  • Các phần tử bị ẩn (được kích hoạt bằng cách nhấn "h" trên nút DOM đã chọn) giờ đây sẽ hiển thị chỉ báo vòng tròn màu xám ở bên trái và điểm ngắt DOM cũng hiển thị vòng tròn màu xanh dương tương tự. (Điều này tương tự như các chỉ báo màu cam mà chúng ta đã có để buộc trạng thái của phần tử như :hover).

Như thường lệ, hãy cho chúng tôi biết suy nghĩ của bạn qua Twitter hoặc các bình luận bên dưới, đồng thời gửi lỗi đến crbug.com/new.

Đến tháng sau!
Paul Bakaus và nhóm Công cụ cho nhà phát triển