Обладая одними из самых высоких оценок удовлетворенности и показателей роста среди всех существующих фреймворков JavaScript, Svelte снова и снова доказывает, что его скорость и близость к ванильному JavaScript — это свойства, которые любят разработчики. Его онлайн-сообщества вовлечены, его интуитивность заманчива, а его возможности объединения с небольшим объемом памяти — все это синергирует, чтобы обеспечить высококачественный опыт разработчиков.
Несмотря на эти впечатляющие преимущества, инструментарий разработчика Svelte не так совершенен, как в некоторых других фреймворках. Некоторые существующие Svelte DevTools больше не поддерживаются, но ни один из них не предлагал полный набор основных функций, таких как отладка во времени и визуализация компонентов.
Так родился Canopy: универсальный DevTool для постоянно растущего сообщества разработчиков Svelte, созданный под эгидой технологического акселератора OSLabs.
Отладка путешествия во времени
Как хорошо известно любому пользователю популярного расширения DevTools для другой библиотеки или среды JavaScript, такой как React или Vue, визуализация изменений состояния, не выходя из окна DevTools, часто удобна, если не необходима — и именно здесь начинается функциональность Canopy.
Панель DevTool перечисляет все значения состояния, присутствующие в приложении Svelte разработчика при инициализации, и динамически обновляет эти значения при каждом изменении состояния (путем прослушивания определенных событий разработки Svelte). Он также сохраняет моментальный снимок при каждом изменении состояния. В результате разработчики могут легко вернуться к любому предыдущему состоянию приложения, что упрощает поиск точного момента возникновения ошибки. Для удобства каждый снимок помечен соответствующим состоянием, которое изменилось с момента предыдущего снимка.
Визуализатор компонентов
Отслеживание значений состояния компонентов — это только половина дела. В больших приложениях со многими компонентами сбой загрузки одного компонента может привести к каскаду ошибок, которые трудно отладить. Чтобы помочь с такими проблемами, Canopy предлагает визуализатор компонентов.
Как видно на рисунке выше, просматривая все визуализированные компоненты на боковой панели, разработчики могут легко определить, какие компоненты Svelte успешно визуализируются как HTML-элементы, а какие нет.
Открытый код
Как было сказано выше, Canopy — это продукт с открытым исходным кодом, который стал возможен благодаря технологическому ускорителю OSLabs. Он создан с использованием Svelte (конечно же!) и TypeScript, чтобы обеспечить быстрый и надежный продукт. Мы приветствуем любой вклад от сообщества Svelte: комментарии, вопросы, предложения, отчеты об ошибках, запросы функций — и, конечно же, дополнения к кодовой базе. Чтобы использовать Canopy, вы можете просто зайти на Github page и следовать инструкциям там. Так что, если вы стройный разработчик Svelte — проверьте это!
Команда Канопи
Вэнс Макгрэди — GitHub | ЛинкедИн
Джастин Пейдж — GitHub | ЛинкедИн
