Max Home IndustryСовершенно новая версия Devtools for React, библиотеки JavaScript с открытым исходным кодом от Facebook, была выпущена в виде бета-версии.
Как мы обсуждали ранее в этом году, React — это библиотека JavaScript с открытым исходным кодом, которую вы можете использовать для создания пользовательских интерфейсов. Он был создан Facebook и стал открытым исходным кодом в 2013 году. Используя React, вы декларативно описываете то, что хотите отобразить, используя компоненты и элементы. Devtools — это расширение, которое вы можете использовать для проверки иерархии компонентов React в инструментах разработчика Chrome. Новая версия Devtools включает начальную версию для Firefox, которая позволит вам делать то же самое в инструментах разработчика Firefox.
Когда дело дошло до новых инструментов разработки, разработчики решили начать все с нуля, чтобы создать определенный API для работы с внутренними компонентами. Это дало бы возможность другим инструментам получить преимущества без необходимости зависеть от деталей реализации, так что в будущем разработчики будут иметь больше свободы для внутреннего рефакторинга, не беспокоясь о поломке инструментов.
Существующая версия инструментов разработки представляет собой ответвление панели «Элементы» Blink и описана Джаредом Форсайтом в сообщении блога о новых инструментах следующим образом:
«Императивная, управляемая мутациями и тесно интегрированная со специфичными для Chrome API».
Напротив:
Новые инструменты разработки менее тесно связаны с Chrome, и их легче рассуждать благодаря React.
Что касается функций, новая версия добавляет новое древовидное представление инструментов разработки, которое, по словам разработчиков, дает более богатое представление о ваших свойствах, включая содержимое объектов и массивов. Пользовательские компоненты выделяются, а собственные компоненты не выделяются. Компоненты с отслеживанием состояния имеют красный коллапс, а изменяющиеся свойства выделяются зеленым цветом.
Поиск — еще одна область, которая была улучшена, так как теперь вы можете выбрать панель поиска и начать поиск компонента по имени.
Как показано выше, боковая панель также была переработана. Теперь он показывает контекст для компонента, и вы можете щелкнуть правой кнопкой мыши, чтобы сохранить значение свойства / состояния как глобальную переменную.