React developer tools что это за программа

Изучите этот очень полезный инструмент, который нам абсолютно необходимо установить при создании приложения React.

Один очень полезный инструмент, который нам абсолютно необходимо установить при создании приложения React, например, приложения Next.js, — это React Developer Tools.

Доступно для обоихХромиFire Fox, инструменты разработчика React — важный инструмент, который вы можете использовать для проверки приложения React.

Они предоставляют инспектор, который показывает дерево компонентов React, которое строит вашу страницу, и для каждого компонента вы можете проверить свойства, состояние, хуки и многое другое.

После того, как вы установили React Developer Tools, вы можете открыть обычные инструменты разработчика браузера (в Chrome щелкните правой кнопкой мыши на странице, затем нажмите Inspect ) и вы найдете 2 новые панели:Составные частииПрофайлер.

Если вы наведете указатель мыши на компоненты, вы увидите, что на странице браузер выберет части, которые визуализируются этим компонентом.

11. Отладка React-приложений

Если вы выберете любой компонент в дереве, правая панель покажет вам ссылку народительский компонент, и пропс передал ему:

Вы можете легко перемещаться, щелкая по названиям компонентов.

Вы можете щелкнуть значок глаза на панели инструментов разработчика, чтобы проверить элемент DOM, а также, если вы используете первый значок со значком мыши (который удобно расположен под аналогичным обычным значком DevTools), вы можете навести курсор на элемент в пользовательский интерфейс браузера, чтобы напрямую выбрать компонент React, который его отображает.

Вы можете использовать bug значок для записи данных компонента в консоль.

Это довольно круто, потому что после того, как вы напечатали там данные, вы можете щелкнуть правой кнопкой мыши любой элемент и нажать «Сохранить как глобальную переменную». Например, здесь я сделал это с помощью url prop, и я смог проверить его в консоли, используя назначенную ему временную переменную, temp1 :

С помощьюИсходные карты, которые автоматически загружаются Next.js в режиме разработки, на панели Components мы можем щелкнуть <> code, и DevTools переключится на панель Source, показывая нам исходный код компонента:

ВПрофайлерtab, если возможно, еще круче. Это позволяет намзаписывать взаимодействиев приложении и посмотрите, что произойдет. Я пока не могу показать пример, потому что для создания взаимодействия требуется как минимум 2 компонента, а сейчас у нас есть только один. Об этом я расскажу позже.

Я показал все скриншоты в Chrome, но React Developer Tools работает точно так же в Firefox:

Скачать мою бесплатнуюСправочник по React

Больше руководств по реакции:

• Пример простого приложения React: получение информации о пользователях GitHub через API
• Создайте простой счетчик с помощью React
• Настройка VS Code для разработки на React
• Как передать реквизиты дочернему компоненту через React Router
• Создайте приложение с Electron и React
• Учебник: создание электронной таблицы с помощью React
• Дорожная карта для изучения React
• Узнайте, как использовать Redux
• Начало работы с JSX
• Стилизованные компоненты
• Введение в Redux Saga
• Введение в React Router
• Введение в React
• Компоненты React
• Виртуальный DOM
• Реагировать на события
• Состояние реакции
• React Props
• Фрагмент реакции
• API контекста React
• React PropTypes
• Концепции React: декларативный
• Реагировать: как показать другой компонент при нажатии
• Как зацикливаться внутри React JSX
• Props vs State в React
• Что лучше: jQuery или React?
• Сколько JavaScript вам нужно знать, чтобы использовать React?
• Введение в Гэтсби
• Как сослаться на элемент DOM в React
• Однонаправленный поток данных в React
• Реагировать на компоненты более высокого порядка
• Реагировать на события жизненного цикла
• Концепция React: неизменность
• Концепция React: чистота
• Введение в React Hooks
• Введение в приложение create-react-app
• Концепция React: композиция
• React: презентационные и контейнерные компоненты
• Разделение кода в React
• Рендеринг на стороне сервера с помощью React
• Как установить React
• CSS в React
• Использование SASS в React
• Обработка форм в React
• React StrictMode
• Реагировать на порталы
• React Render Props
• Тестирование компонентов React
• Как передать параметр обработчикам событий в React
• Как обрабатывать ошибки в React
• Как вернуть несколько элементов в JSX
• Условный рендеринг в React
• React, как передать props дочерним компонентам
• Как получить значение элемента ввода в React
• Как использовать хук useState React
• Как использовать хук useCallback React
• Как использовать хук useEffect React
• Как использовать хук useMemo React
• Как использовать хук useRef React
• Как использовать хук useContext React
• Как использовать хук useReducer React
• Как подключить приложение React к бэкэнду в том же источнике
• Учебное пособие по маршрутизатору Reach Router
• Как использовать инструменты разработчика React
• Как научиться React
• Как отлаживать приложение React
• Как отрендерить HTML в React
• Как исправить ошибку `dangerousSetInnerHTML` не соответствовало в React
• Как я исправил проблему с состоянием формы входа в React и автозаполнением браузера
• Как настроить HTTPS в приложении React на локальном хосте
• Как исправить ошибку «не удается обновить компонент при рендеринге другого компонента» в React
• Могу ли я использовать перехватчики React внутри условного оператора?
• Использование useState с объектом: как обновить
• Как перемещать блоки кода с помощью React и Tailwind
• React, сфокусируйте элемент в React при добавлении в DOM
• Реагировать, редактировать текст по двойному щелчку

Источник: tech-wiki.online

91 — chrome extensions для react и redux — React JS

Что такое React Developer Tool?

React Developer Tools — это расширение Chrome DevTools для библиотеки React JavaScript. Очень полезный инструмент, если вы работаете с приложениями React.js. Это расширение добавляет инструменты отладки React в Инструменты разработчика Chrome. Это помогает вам проверять и редактировать дерево компонентов React, которое строит страницу, и для каждого компонента можно проверить свойства, состояние, хуки и т. Д.

Инструмент React Developer также помогает узнать, использовался ли в конкретном приложении React.js или нет. Он также доступен в Firefox.

Как добавить расширение?

Перейдите по ссылке React Developer Tools

1. Нажмите » Добавить в Chrome» .
2. Инструмент добавлен в ваш Chrome.
3. Перейдите на вкладку «Расширения» справа вверху, нажмите на нее. В раскрывающемся списке видно, что расширение было добавлено.

Чтобы удалить расширение, вам нужно будет нажать « Удалить из Chrome» .

Как использовать расширение?

Определение того, использует ли приложение React.js Откройте приложение, которое вы хотите проверить, теперь нажмите на вкладку расширения, а затем на React Developer Tools. Если расширение остается красочным , что означает , что он построен с React.js и если это бесцветное , то это означает , что приложение не использует React.js Проверка и редактирование компонентов React В приложении щелкните правой кнопкой мыши, в раскрывающемся списке выберите « Проверить» или введите Ctrl + Shift + I. Он открывает Chrome DevTools , теперь на верхней панели щелкните двойные стрелки, выпадающий список откроется следующим образом. При нажатии на Компоненты откроется дерево компонентов React. Здесь можно проверить, отредактировать реквизиты, состояние, понять структуру. Точно так же, нажав на Profiler . Нажав на профилировщик, вы сможете записывать информацию о производительности.

Источник: progler.ru