Google I/O 2016 — это завершение. DevTools широко присутствовала на I/O, включая доклад Пола Бакауса, Пола Айриша и Сета Томпсона, в котором описывалось будущее DevTools. Посмотрите видео ниже или читайте дальше, чтобы узнать больше о том, в каком направлении движется DevTools в 2016 году и в последующий период.
Авторская работа
DevTools стремится упростить каждый этап жизненного цикла веб-разработки. Вы, вероятно, знаете, что DevTools может помочь вам отладить или профилировать веб-сайт, но вы, возможно, не знаете, как использовать его для создания сайта. Под «авторством» мы подразумеваем процесс создания сайта. Одна из целей в обозримом будущем — облегчить вам повторение, экспериментирование и эмуляцию вашего сайта на нескольких устройствах.
Режим устройства
Команда DevTools продолжает работать над режимом устройства, который получил первое серьезное обновление в Chrome 49. Ознакомьтесь с мартовской публикацией ( Новый режим устройства для мира, ориентированного на мобильные устройства ) для обзора обновлений. Основная цель — обеспечить бесперебойный рабочий процесс для просмотра и эмуляции вашего сайта во всех форм-факторах.
Вот краткий обзор некоторых обновлений режима устройства, которые появились в Canary с момента публикации статьи в марте.
При просмотре страницы как конкретного устройства вы можете больше погрузиться в процесс, показывая аппаратное обеспечение устройства на своей странице.
Меню ориентации устройства позволяет просматривать страницу, когда активны различные элементы пользовательского интерфейса системы, такие как панель навигации и клавиатура.
История рабочего стола также улучшилась. Благодаря функции масштабирования в режиме устройства вы можете имитировать экраны рабочего стола, большие, чем экран, на котором вы фактически работаете, например экран 4K (3840 x 2160 пикселей).
Вы можете регулировать сеть непосредственно из пользовательского интерфейса режима устройства, вместо того, чтобы переключаться на панель «Сеть».
Исходные различия
Когда вы меняете стиль сайта, легко потерять след изменений. Чтобы это исправить, DevTools будет использовать визуальные подсказки в поле номера строки на панели «Источники», чтобы помочь вам отслеживать изменения. Удаленные строки обозначаются красной линией, измененные строки выделяются фиолетовым цветом, а новые строки выделяются зеленым цветом.
Вы также сможете отслеживать свои изменения на новой вкладке панели «Быстрый исходный код»:
Впервые вкладка «Быстрый исходный код» позволяет вам сосредоточиться на исходном коде HTML или JavaScript одновременно с правилами CSS. Кроме того, когда вы щелкаете свойство CSS на панели «Стили», вкладка «Быстрый источник» автоматически переходит к определению в источнике и выделяет его.
Включите эксперимент с различиями источников в Chrome Canary, чтобы опробовать его сегодня.
Живое редактирование Sass
Вот краткий обзор некоторых предстоящих крупных улучшений в рабочем процессе редактирования Sass. Эти особенности находятся на очень ранней стадии экспериментальной фазы. Мы сообщим об этом в следующем сообщении, когда они будут готовы для вас.
По сути, DevTools позволит вам просматривать и редактировать переменные Sass так, как вы всегда на это надеялись. Щелкните значение, скомпилированное из переменной Sass, и новая вкладка «Быстрые источники» перейдет к определению переменной.
При редактировании значения, скомпилированного из переменной Sass, вы обновляете переменную Sass, а не только выбранное вами отдельное свойство.
Прогрессивные веб-приложения
Посмотрите на список докладов о Интернете и Chrome на Google I/O 2016 , и вы увидите огромную тему, возникающую в мире веб-разработки: прогрессивные веб-приложения .
По мере появления модели прогрессивных веб-приложений DevTools быстро совершенствуется, предоставляя разработчикам инструменты, необходимые для создания отличных прогрессивных веб-приложений. Мы поняли, что создание и отладка этих современных приложений часто сопряжены с уникальными требованиями, поэтому DevTools посвятил целый раздел разработке прогрессивных веб-приложений. Откройте Chrome Canary, и вы увидите, что панель «Ресурсы» заменена панелью «Приложения». Все предыдущие функции панели «Ресурсы» по-прежнему доступны. Есть всего несколько новых панелей, разработанных специально для разработки прогрессивных веб-приложений:
Панель «Манифест» дает визуальное представление файла манифеста приложения. Отсюда вы можете вручную запустить рабочий процесс «Добавить на главный экран».
Панель Service Workers позволяет вам проверять и взаимодействовать с Service Worker, зарегистрированным для текущей страницы.
А панель «Очистить хранилище» позволяет стереть все виды данных, чтобы вы могли просмотреть страницу с чистого листа.
JavaScript
Пересечение границы между интерфейсом и серверной частью — сложная часть полнофункциональной веб-разработки. Если вы обнаружите, что ваш бэкэнд возвращает код состояния 500 во время отладки веб-приложения, вы фактически достигли предела полезности DevTools, требуя изменить контексты и запустить среду разработки бэкэнда для отладки проблемы.
Однако с бэкэндами, написанными на Node.js, границы между фронтендом и бэкендом начинают стираться. Поскольку Node.js работает на движке JavaScript V8 (тот же движок, который используется в Google Chrome), мы хотели сделать возможным отладку Node.js из DevTools. Благодаря командам V8, DevTools и Google Cloud Platform для Node.js теперь вы можете использовать все мощные функции отладки DevTools для анализа приложения Node.js. Функциональность уже достигла ночных сборок Node.js, хотя интеграция DevTools все еще дорабатывается перед включением в основной выпуск. Отладка вашего приложения Node.js из DevTools когда-нибудь будет так же проста, как передача node --inspect app.js и подключение из DevTools в любом окне Chrome.
Хотя существующие инструменты, такие как Node Inspector , предоставляют возможности отладки на основе графического пользовательского интерфейса, новая интеграция Node.js DevTools останется актуальной с новейшими функциями отладки DevTools, такими как отладка асинхронного стека, черный ящик и поддержка ES6.