Обновление архитектуры DevTools: переход на веб-компоненты

Этот пост является частью серии постов в блоге, описывающих изменения, которые мы вносим в архитектуру DevTools и то, как она построена.

Когда DevTools был впервые создан много-много лет назад, команда решила создать специальную среду пользовательского интерфейса. В то время это был разумный выбор, и он хорошо послужил DevTools.

Но с тех пор на платформе появились различные функции, и одна из них, веб-компоненты, отлично подходит для создания новых элементов пользовательского интерфейса в DevTools. Опираясь на возможности платформы, мы можем значительно сократить объем специального кода пользовательского интерфейса, который нам приходится поддерживать, и вкладывать больше средств в создание функций для DevTools, а не в поддержку специальной инфраструктуры.

Чтобы помочь с переходом, мы создали руководство по созданию элементов пользовательского интерфейса в DevTools, чтобы поделиться им с более широкой командой DevTools. Некоторые из руководств специально разработаны для DevTools и их архитектуры, которая накладывает свой собственный набор ограничений, но некоторые из них представляют собой общие рекомендации по подходам, которые мы использовали для создания, структурирования и тестирования веб-компонентов.

Сегодня мы делаем этот документ общедоступным по адресу goo.gle/building-ui-devtools . Если вы когда-нибудь задумывались о том, как веб-компоненты используются в крупных реальных приложениях, или о некоторых проблемах, возникающих при интеграции компонентов в большую, уже существующую базу кода, этот документ может помочь и дать некоторые ответы. Если у вас есть какие-либо вопросы о наших правилах, напишите мне в Твиттере .

Загрузите предварительный просмотр каналов

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра дают вам доступ к новейшим функциям DevTools, тестируют передовые API-интерфейсы веб-платформы и находят проблемы на вашем сайте раньше, чем это сделают ваши пользователи!

Связь с командой Chrome DevTools

Используйте следующие параметры, чтобы обсудить новые функции и изменения в публикации или что-либо еще, связанное с DevTools.