Google перебудовує Dart DevTools з нуля у Flutter

Флаттер - це a фреймворк кросплатформного програмування, що має на меті вирішити проблеми розробки кросплатформних додатків без безладу невласного коду. Володіючи знаннями мови програмування Dart, розробник може створювати програми для Android, iOS, Інтернету та комп’ютера з єдиним інтерфейсом користувача для всіх. Флаттер 1.9 надав підтримку macOS і Catalina в альфа-стані, поки Версія версії 1.12 розширила підтримку після попереднього альфа-стану і v1.17 Flutter і v2.8 Dart відзначили свої перші стабільні випуски у 2020 році. Сьогодні Google випускає нову версію коду DevTools для Dart і Flutter, яка була перебудована з нуля у Flutter і містить кілька покращень.

У попередньому повідомленні Google згадав про свій намір замінити поточну версію Dart DevTools на нову версію Flutter. Тепер це сталося, оскільки новий DevTools було перебудовано з нуля у Flutter. Ця нова версія DevTools додає такі покращення, як зміни продуктивності та сторінок пам’яті, а також абсолютно нову сторінку мережі.

Але навіщо перебудовувати щось, коли воно все ще працює? Команда, яка стоїть за Flutter, стверджує, що при створенні високопродуктивних продуктів важливі переваги продуктивності Інтерфейси користувача, і найкращий спосіб продемонструвати впевненість у цих твердженнях – це застосувати ті самі інструменти для себе. Перебудова у Flutter також дозволяє розробникам вибрати модель розподілу після написання коду, який є відхиленням від поточної блок-схеми прийняття рішень, де модель розподілу диктуватиме код.

DevTools постачається як веб-програма, яка спрощує інтеграцію інструменту в існуючі інструменти в усіх цільові платформи та IDE. DevTools — це окремий набір інструментів, який працює у веб-переглядачі та працює з мобільними програмами, настільними програмами та Інтернетом програми.

DevTools містить такі функції:

• Флаттер-інспектор: інструмент для візуалізації та дослідження дерев віджетів. Ви можете вибирати віджети у запущеній програмі, уповільнювати всі анімації, переглядати базові лінії тексту тощо.
  • Однією з нових функцій є Layout Explorer, який можна знайти на вкладці Flutter Inspector поруч із Details Tree. Layout Explorer дозволяє перевіряти модель Flutter flex layout. Команда наводить приклад того, як цей інструмент може допомогти налагодити, наприклад, чому ряд віджетів виглядає не так, як очікував розробник.

• Перегляд шкали часу: показує час створення для кожного кадру та діаграму полум’я. Це полегшує ідентифікацію проблемних кадрів у контексті.
  • Ця панель тепер містить нову кнопку «Відстежити збірки віджетів», яка додає час створення всіх віджетів у ваш додаток на часову шкалу (за рахунок продуктивності збірки вашого профілю, тому він не на за замовчуванням). Це зручно, коли ви намагаєтеся дізнатися, які саме віджети знаходяться за повільним кадром.

• Вид пам'яті: показує, як ваша програма використовує пам’ять у певний момент.
  • Це подання тепер показує теплову карту виділеної пам’яті, а також дозволяє відстежувати пам’ять платформи.

• Перегляд продуктивності: це традиційний профайлер ЦП. Це дозволяє записувати сеанс вашої програми та бачити, на які функції ЦП витрачав більшу частину часу. Ви можете використовувати це, щоб вирішити, куди витрачати час на оптимізацію.
• DevTools навіть включає свій власний Налагоджувач. Це може бути корисно, якщо ви не використовуєте IDE, але все одно хочете мати можливість додавати точки зупину, покроково переглядати код, переглядати значення змінних тощо.

• Перегляд мережі: це абсолютно нове.
  • Як випливає з назви, він дозволяє перевіряти мережевий трафік. Ви можете переглянути всю історію запитів, зроблених вашою програмою з моменту її запуску, і отримати детальну інформацію про кожен із них. Це звільняє вас від необхідності самостійно реєструвати ці події під час спроби налагодити мережеву проблему.
  • Вкладка Мережа наразі показує трафік HTTP; майбутні вдосконалення включають показ загальний трафік вводу/виводу сокета.
  • Мережеві запити також відображаються в поданні часової шкали, щоб ви могли бачити їх у контексті.
• Перегляд журналювання: показує події з вашої програми та фреймворку. За допомогою нього ви можете легко фільтрувати повідомлення (наприклад, ви можете вказати «-gc», щоб відфільтрувати події Garbage Collector, або «flutter.frame», щоб відображати лише події фрейму). У Dart журналювання повідомлень можна структурувати, і перегляд журналу використовує це.

Щоб повністю використовувати DevTools, ви можете прочитати документація. Якщо ви знайдете будь-які помилки або хочете проголосувати за нові функції, ви можете зробити це далі GitHub.