Google I/O 2016 завершился. DevTools был представлен на I/O с большим успехом, включая доклад Пола Бакауса, Пола Айриша и Сета Томпсона, которые рассказали о будущем DevTools. Посмотрите видео ниже или продолжайте читать, чтобы узнать больше о том, куда движется DevTools в 2016 году и далее.
Авторство
DevTools нацелен на то, чтобы сделать каждый этап жизненного цикла веб-разработки проще. Вы, вероятно, знаете, что DevTools может помочь вам отладить или профилировать веб-сайт, но вы можете не знать, как использовать его для помощи в создании сайта. Под «созданием» мы подразумеваем процесс создания сайта. Одна из целей в обозримом будущем — сделать так, чтобы вам было проще итерировать, экспериментировать и эмулировать ваш сайт на нескольких устройствах.
Режим устройства
Команда DevTools продолжает итерацию опыта Device Mode, который получил свое первое крупное обновление в Chrome 49. Ознакомьтесь с постом от марта ( A new Device Mode for a mobile-first world ) для обзора обновлений. Главная цель — обеспечить бесперебойный рабочий процесс для просмотра и эмуляции вашего сайта во всех форм-факторах.
Ниже представлен краткий обзор некоторых обновлений режима устройства, которые появились в Canary с момента публикации статьи в марте.
При просмотре страницы с определенного устройства вы можете глубже погрузиться в процесс, показав аппаратное обеспечение устройства на странице.
Меню ориентации устройства позволяет просматривать страницу, когда активны различные элементы пользовательского интерфейса системы, такие как панель навигации и клавиатура.
История рабочего стола также улучшилась. Благодаря функции масштабирования в Device Mode вы можете эмулировать экраны рабочего стола, которые больше экрана, на котором вы фактически работаете, например, экран 4K (3840 пикселей x 2160 пикселей).
Вы можете регулировать сеть непосредственно из пользовательского интерфейса режима устройства, не переключаясь на панель «Сеть».
Различия в источниках
При итерации стиля сайта легко потерять отслеживание изменений. Чтобы исправить это, DevTools будет использовать визуальные подсказки на панели номеров строк на панели Sources, чтобы помочь вам отслеживать изменения. Удаленные строки обозначены красной линией, измененные строки выделены фиолетовым, а новые строки выделены зеленым.
Вы также сможете отслеживать свои изменения на новой вкладке панели «Быстрый источник»:
Впервые вкладка Quick Source позволяет вам сосредоточиться на исходном коде HTML или JavaScript одновременно с правилами CSS. Кроме того, когда вы нажимаете свойство CSS на панели Styles, вкладка Quick Source автоматически переходит к определению в источнике и выделяет его.
Включите эксперимент по сравнению исходных кодов в Chrome Canary, чтобы опробовать его уже сегодня.
Редактирование Sass в реальном времени
Вот краткий обзор некоторых предстоящих крупных улучшений в рабочем процессе редактирования Sass. Эти функции находятся на ранней стадии экспериментальной фазы. Мы расскажем об этом в более позднем посте, когда вы сможете их опробовать.
По сути, DevTools позволит вам просматривать и редактировать переменные Sass, как вы всегда надеялись. Щелкните по значению, которое было скомпилировано из переменной Sass, и новая вкладка Quick Sources перейдет к определению переменной.
При редактировании значения, скомпилированного из переменной Sass, ваши изменения обновляют переменную Sass, а не только отдельное выбранное вами свойство.
Прогрессивные веб-приложения
Взгляните на список докладов о вебе и Chrome на Google I/O 2016, и вы увидите, что в мире веб-разработки появляется важная тема: прогрессивные веб-приложения .
По мере появления модели Progressive Web App DevTools быстро совершенствуется, чтобы предоставить разработчикам инструменты, необходимые для создания великолепных прогрессивных веб-приложений. Мы поняли, что создание и отладка этих современных приложений часто сопровождается уникальными требованиями, поэтому DevTools посвятил целую панель разработке Progressive Web Application. Откройте Chrome Canary, и вы увидите, что панель Resources была заменена панелью Application. Все предыдущие функции панели Resources по-прежнему присутствуют. Есть только несколько новых панелей, разработанных специально для разработки Progressive Web App:
Панель Manifest дает визуальное представление файла манифеста приложения. Отсюда вы можете вручную запустить рабочий процесс «Добавить на домашний экран».
Панель Service Workers позволяет вам проверять и взаимодействовать с Service Worker, зарегистрированным для текущей страницы.
А панель «Очистить хранилище» позволяет стереть все виды данных, чтобы вы могли просматривать страницу с чистого листа.
JavaScript
Пересечение границы между фронтендом и бэкендом — сложная часть веб-разработки fullstack. Если вы обнаружили, что ваш бэкенд возвращает код статуса 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.