Công cụ cho nhà phát triển trở nên tối, chỉnh sửa @keyframe và tự động hoàn thành thông minh hơn

Paul Bakaus
Paul Bakaus

Tìm hiểu cách DevTools giúp bạn nhập ít hơn nhờ tính năng tự động hoàn thành thông minh hơn trong Console, cách chỉnh sửa quy tắc @keyframe trực tiếp trong ngăn Kiểu, cách tận hưởng các Biến tuỳ chỉnh CSS và cách chuyển sang giao diện tối.

Tính năng tự động hoàn thành thông minh hơn trong bảng điều khiển

Nếu giống như tôi và nhiều người khác, bạn nhập một lệnh vào bảng điều khiển để gỡ lỗi ứng dụng, thấy ứng dụng không hoạt động, lặp lại và nhập lại lệnh đó, lặp lại nhiều lần. Để giúp bạn làm việc đó, chúng tôi hiện sẽ tự động hoàn thành toàn bộ câu lệnh mà bạn đã nhập trước đó, như sau:

Tự động hoàn thành

Chỉnh sửa trực tiếp quy tắc @keyframe trong ngăn Kiểu

Khi chúng tôi giới thiệu trình kiểm tra ảnh động và trình chỉnh sửa hiệu ứng làm mượt cho DevTools, trình kiểm tra này chỉ giới hạn ở các hiệu ứng chuyển đổi vì chúng tôi chưa bao giờ hiển thị ảnh động CSS dựa trên @keyframe trong ngăn Kiểu. Tôi rất vui khi được thông báo rằng vấn đề này đã được giải quyết. Hãy thoải mái sáng tạo! Hãy xem twitt video của chúng tôi để xem trước.

Hỗ trợ thuộc tính CSS tuỳ chỉnh

Thuộc tính CSS tuỳ chỉnh trong Công cụ cho nhà phát triển

CSS có rất nhiều tính năng hữu ích, trong đó có biến tuỳ chỉnh, ra mắt trong Chrome 49. Chúng tôi đã đảm bảo cung cấp đầy đủ tính năng hỗ trợ trong DevTools. Vì vậy, nếu bạn đã sử dụng các biến trong Sass trước đây, hãy thử các biến gốc vì các biến này cho phép bạn chỉnh sửa các thuộc tính ngay trong ngăn Kiểu và cập nhật ngay các phần tử phụ thuộc.

Giao diện tối cho DevTools

Giao diện tối đang hoạt động

Cuối cùng, chúng tôi cũng đáp ứng một yêu cầu mà chúng tôi đã nghe hàng chục lần trong vài năm qua: Giờ đây, bạn có thể chọn giao diện tối trong DevTools. Chuyển đến phần cài đặt DevTools, Đặt giao diện thành tối và tận hưởng. Tôi muốn nói rằng tính năng này vẫn đang trong giai đoạn thử nghiệm vì nhiều thông tin trong đó được tạo tự động. Vì vậy, nếu bạn thấy có bất kỳ khía cạnh nào có thể cải thiện, hãy cho chúng tôi biết!

Những tính năng khác

  • Ngăn bảng điều khiển hiện tự động thu gọn khi bạn nhấp vào thẻ Bảng điều khiển đầy đủ.
  • Cây tệp trong phần Nguồn đã được cải tiến đáng kể với các biểu tượng mới và chức năng nhóm mới

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