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