Tìm hiểu cách Công cụ cho nhà phát triển ưu tiên sử dụng thiết bị di động nhờ Chế độ thiết bị mới, tinh giản và luôn bật. Sử dụng các nút màu để nhanh chóng thêm màu vào bộ chọn của bạn và tìm hiểu xem tính năng nào sắp ra mắt trong Công cụ cho nhà phát triển.
Đôi nét về tương lai của hoạt động sáng tác
Chúng ta vừa trở lại sau Hội nghị dành cho nhà phát triển Chrome. Hôm nay, tôi sẽ trình bày cho các bạn thấy cách làm việc với Công cụ cho nhà phát triển hiện nay và trong tương lai. Tôi thường không đề cập đến bất kỳ tính năng nào vẫn đang là thử nghiệm hoặc công việc nặng nề trong thông báo này, nhưng lần này tôi sẽ ngoại lệ. Nếu bạn không có thời gian xem toàn bộ buổi nói chuyện, thì sau đây là nội dung chính:
Chế độ thiết bị phiên bản 2
Chúng tôi vẫn đang nỗ lực phát triển phiên bản mới và táo bạo này của Chế độ thiết bị nhưng chúng tôi muốn mang đến cho mọi người cơ hội dùng thử tính năng này, vì vậy chúng tôi đã bật tính năng này trong Canary của bạn. Với các thay đổi này, chúng tôi sẽ đẩy Công cụ cho nhà phát triển vào một tương lai ưu tiên thiết bị di động, trong đó phát triển cho thiết bị di động là mặc định và Phát triển máy tính để bàn là “tiện ích bổ sung”. Chúng tôi dự kiến sẽ lặp lại nhiều lần hơn trong vài tuần tới với bài đăng mở rộng trên blog sau khi hoàn thành.
Kiểm tra ảnh động mạnh mẽ
Tính năng Kiểm tra ảnh động đang trong quá trình thực hiện sẽ cung cấp cho bạn bức tranh đầy đủ, chi tiết về những gì đang xảy ra đối với bất kỳ thứ gì đang chuyển động. Thay vì cho bạn thấy hiệu ứng chuyển đổi trên một phần tử tại một thời điểm, chúng tôi đã thêm các phương pháp phỏng đoán để nhóm các ảnh động phức tạp để bạn có thể tập trung vào tất cả những gì mình đang thấy. Hãy xem video. Chúng tôi sẽ cung cấp một bài đăng trên blog độc lập và quy mô lớn hơn khi ra mắt toàn bộ.
Chế độ bố cục (xem trước)
Chưa hoàn toàn sẵn sàng cho giờ vàng nhưng rất hứa hẹn là Chế độ bố cục mới, một tính năng mà tôi rất mong được thấy được xây dựng hoàn chỉnh. Chế độ bố cục bổ sung khả năng chỉnh sửa WYSIWYG vào Công cụ cho nhà phát triển đối với mọi phần tử trên trang. Cho đến nay, bạn có thể chỉnh sửa chiều cao, chiều rộng, khoảng đệm và lề trong ngữ cảnh. Có thể mất nhiều thời gian hơn một chút cho đến khi chúng tôi sẵn sàng cho bạn dùng thử nhưng chúng tôi sẽ thông báo cho bạn.
Lập hồ sơ hiệu suất bằng bảng điều khiển Dòng thời gian đã cập nhật
Trong nỗ lực lớn hơn nhằm giới thiệu mô hình hiệu suất RAW mới, đã có hàng trăm thay đổi nhỏ và lớn hơn đối với bảng điều khiển Dòng thời gian. Các thay đổi này cùng nhau biến đổi và cải thiện câu chuyện phân tích hiệu suất khá nhiều. Vì vậy, thay vì trình bày riêng từng thay đổi, anh ấy đã hướng dẫn chúng tôi cách khắc phục hiệu quả hoạt động của một trang web một cách hiệu quả. Trong trường hợp này, trang web dành cho thiết bị di động của Hotel Tonight đã được phát trực tiếp trên sân khấu. Trong số các tính năng mới được công bố, chúng tôi giới thiệu chuỗi phim tải và hiệu suất, thác nước đi kèm trong mạng, thông tin tóm tắt về chế độ xem dạng cây và khả năng xem chi phí hiệu suất theo miền và tệp.
Dễ dàng thêm màu của nền trước và màu nền vào mọi phần tử
Bất cứ khi nào muốn thêm màu nền hoặc thuộc tính màu vào phần tử, bạn không thể chỉ mở công cụ chọn màu. Thay vào đó, hầu hết các em đều nhập nội dung như “background: red;” mỗi lần biểu tượng công cụ chọn màu xuất hiện, sau đó chọn màu thực tế mà mình muốn.
Chúng tôi cho rằng mình có thể đơn giản hoá quy trình này. Chúng tôi đã thêm hai nút tiện lợi xuất hiện khi bạn di chuột qua góc dưới cùng bên phải của bộ chọn, cho phép bạn thêm màu và hiển thị bộ chọn chỉ với một cú nhấp chuột:
Tốt nhất trong phần còn lại
- Chúng tôi đã lãng phí rất nhiều bất động sản trước đây trong Bảng điều khiển kiểu bằng cách hiển thị các loại nội dung nghe nhìn chung. Giờ đây, chúng tôi sẽ ẩn nội dung đó trước bộ chọn của bạn nếu nội dung đó không bất thường!
- Bây giờ, bạn có thể di chuột lâu qua bộ chọn CSS trong bảng Kiểu để xem số phần tử trên trang mà bộ chọn đó sẽ áp dụng.
- Bạn vẫn chưa từ bỏ việc in? Tính năng mô phỏng nội dung nghe nhìn in vẫn đang hoạt động để xem trang của bạn sẽ trông như thế nào khi được in – chúng tôi chỉ mới chuyển trang đó vào phần Cài đặt hiển thị.
- Khi chọn một phần tử để kiểm tra, chúng tôi hiện sẽ tự động mở rộng và đóng cây con DOM có liên quan. Thật khó để giải thích, nhìn thấy là tin tưởng.
Như thường lệ, hãy cho chúng tôi biết suy nghĩ 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.
Đến tháng sau!
Paul Bakaus và nhóm Công cụ cho nhà phát triển