Узнайте, как DevTools позволяет вам меньше печатать с помощью более умного автозаполнения консоли, как редактировать правила @keyframe прямо на панели «Стили», как весело работать с пользовательскими переменными CSS и как присоединиться к темной стороне.
Умное автозаполнение в вашей консоли
Если вы похожи на меня и многих других, вы вводите в консоль команду для отладки вашего приложения, видите, что она не работает, выполняете итерацию и вводите ее снова, и снова, и снова. Чтобы помочь в этом, мы теперь автозаполняем полные операторы, которые вы вводили ранее, например:
Редактируйте правила @keyframe напрямую на панели «Стили».
Когда мы представили инспектор анимации и редактор замедления в DevTools, они были ограничены переходами, поскольку мы никогда не отображали CSS-анимацию на основе @keyframe на панели «Стиль». Я рад сообщить, что теперь это осталось в прошлом, так что сходите с ума! Посмотрите наш видео-твит для предварительного просмотра.
Поддержка пользовательских свойств CSS
В CSS много хорошего, и одна из них — пользовательские переменные, которые появятся в Chrome 49. Мы позаботились о том, чтобы включить полную поддержку в DevTools, поэтому, если вы раньше использовали переменные в Sass, попробуйте нативные переменные. , поскольку они позволяют оперативно редактировать свойства на панели «Стили» и немедленно обновлять зависимые элементы.
Темная тема для DevTools
Наконец мы уступили просьбе, которую слышали десятки раз за последние пару лет: теперь вы можете выбрать темную сторону в DevTools. Зайдите в настройки DevTools, установите темную тему и наслаждайтесь. Я бы сказал, что это все еще находится в стадии бета-тестирования, поскольку многие из них генерируются автоматически, поэтому, если вы увидите какие-либо области, в которых можно было бы улучшить, обязательно дайте нам знать !
Лучшее из остальных
- Ящик консоли теперь автоматически сворачивается при нажатии на полную вкладку «Консоль».
- Дерево файлов в Sources было приятно переработано: появились новые значки и новые функции группировки.
Как всегда, дайте нам знать, что вы думаете, через Twitter или комментарии ниже, а также сообщайте об ошибках на crbug.com/new .
До следующего месяца!
Пол Бакаус и команда DevTools