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