Как установить react devtools
Русские Блоги
Как установить React Dev Tools в Chrome
1. Настройте внутренний источник npm Taobao.
Сначала проверьте текущий источник npm
Настроить источник Taobao
Вернуться к официальному источнику
2. Обновите исходный код Taobao.
3. Загрузите пакет react devtool.
Загрузите пакет инструмента react dev на github по адресу:Официальный пакет React dev tool
и распакуйте, затем войдите в распакованный каталог
4. Выполните следующие команды с помощью npm.
В настоящее время в пути к распакованному пакету, response-devtools-3.2.1> shells> chrome, есть другие папки для сборки и распаковки ниже.
5. установка хрома
Интеллектуальная рекомендация
Измените имя хоста, сопоставьте IP-адрес и имя хоста, закройте вход в систему без пароля и пароля по selinux и SSH.
После изменения перезапустите виртуальный, и все будет в порядке. Чтобы мы могли соединяться друг с другом, не вводя IP-адрес в каждой виртуальной машине, мы должны сопоставить IP-адрес и имя хоста. З.
Уханьский университет предложил самый большой в мире набор данных масок, закрывающих лица (ссылка для скачивания прилагается): RMFD
Предисловие НедавниеПолучить COVID-19(Новая коронавирусная пневмония) Пострадавшие от эпидемии научные круги и промышленность последовательно использовали технологии искусственного интеллекта, чтобы п.
Русские Блоги
Инструменты отладки React: react-devtools
Открываем index01.html, открываем консоль:
Как с этим бороться?
(1) Установка react-devtools :
(2) Эксплуатация react-devtools :
Появляется:
Следуйте подсказкам для выполнения соответствующих операций.
В случае React DOM: положите Добавлено до введения React DOM:
означает:
Снова запустите response-devtools, откройте index01.html,
npm install react-devtools, обратитесь по ссылке:npm react-devtools
Конечно, есть способ напрямую установить надстройки браузера, см. ссылку:facebook/react-devtools
Интеллектуальная рекомендация
Измените имя хоста, сопоставьте IP-адрес и имя хоста, закройте вход в систему без пароля и пароля по selinux и SSH.
После изменения перезапустите виртуальный, и все будет в порядке. Чтобы мы могли соединяться друг с другом, не вводя IP-адрес в каждой виртуальной машине, мы должны сопоставить IP-адрес и имя хоста. З.
Уханьский университет предложил самый большой в мире набор данных масок, закрывающих лица (ссылка для скачивания прилагается): RMFD
Предисловие НедавниеПолучить COVID-19(Новая коронавирусная пневмония) Пострадавшие от эпидемии научные круги и промышленность последовательно использовали технологии искусственного интеллекта, чтобы п.
react-devtools
React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).
It works both with React DOM and React Native.
Installation
Install the react-devtools package. Because this is a development tool, a global install is often the most convenient:
If you prefer to avoid global installations, you can add react-devtools as a project dependency. With Yarn, you can do this by running:
With NPM you can just use NPX:
Usage with React Native
Run react-devtools from the terminal to launch the standalone DevTools app:
If you’re not in a simulator then you also need to run the following in a command prompt:
If you’re using React Native 0.43 or higher, it should connect to your simulator within a few seconds.
Integration with React Native Inspector
You can open the in-app developer menu and choose «Show Inspector». It will bring up an overlay that lets you tap on any UI element and see information about it:
However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:
You can choose «Hide Inspector» in the same menu to exit this mode.
Inspecting Component Instances
When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.
First, follow the instructions for debugging in Chrome to open the Chrome console.
Usage with React DOM
The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).
Run react-devtools from the terminal to launch the standalone DevTools app:
Как использовать инструменты разработчика React
Изучите этот очень полезный инструмент, который нам абсолютно необходимо установить при создании приложения React.
Они предоставляют инспектор, который показывает дерево компонентов React, которое строит вашу страницу, и для каждого компонента вы можете проверить свойства, состояние, хуки и многое другое.
После того, как вы установили React Developer Tools, вы можете открыть обычные инструменты разработчика браузера (в Chrome щелкните правой кнопкой мыши на странице, затем нажмите Inspect ) и вы найдете 2 новые панели:Составные частииПрофайлер.
Если вы наведете указатель мыши на компоненты, вы увидите, что на странице браузер выберет части, которые визуализируются этим компонентом.
Если вы выберете любой компонент в дереве, правая панель покажет вам ссылку народительский компонент, и пропс передал ему:
Вы можете легко перемещаться, щелкая по названиям компонентов.
Вы можете щелкнуть значок глаза на панели инструментов разработчика, чтобы проверить элемент DOM, а также, если вы используете первый значок со значком мыши (который удобно расположен под аналогичным обычным значком DevTools), вы можете навести курсор на элемент в пользовательский интерфейс браузера, чтобы напрямую выбрать компонент React, который его отображает.
Вы можете использовать bug значок для записи данных компонента в консоль.
Это довольно круто, потому что после того, как вы напечатали там данные, вы можете щелкнуть правой кнопкой мыши любой элемент и нажать «Сохранить как глобальную переменную». Например, здесь я сделал это с помощью url prop, и я смог проверить его в консоли, используя назначенную ему временную переменную, temp1 :
С помощьюИсходные карты, которые автоматически загружаются Next.js в режиме разработки, на панели Components мы можем щелкнуть <> code, и DevTools переключится на панель Source, показывая нам исходный код компонента:
ВПрофайлерtab, если возможно, еще круче. Это позволяет намзаписывать взаимодействиев приложении и посмотрите, что произойдет. Я пока не могу показать пример, потому что для создания взаимодействия требуется как минимум 2 компонента, а сейчас у нас есть только один. Об этом я расскажу позже.
Я показал все скриншоты в Chrome, но React Developer Tools работает точно так же в Firefox:
React Developer Tools от React
React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more. To get started, just open the Firefox devtools and switch to the «⚛️ Components» or «⚛️ Profiler» tab.
Метаданные расширения
Используется
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.
Этому дополнению нужно:
Features:
* Support multiple DevTools instances per page (@bvaughn in #22949)
* Advocate for StrictMode usage within Components tree (@bvaughn in #22886)
* StyleX plug-in for resolving atomic styles to values for props.xstyle (@bvaughn in #22808)
* Timeline search (@bvaughn in #22799)
* Add test selectors to experimental build (@bvaughn in #22760)
* Timeline: Improved snapshot view (@bvaughn in #22706)
* Display root type for root updates in «what caused this update?» (@eps1lon in #22599)
* Add open in editor for fb (@ezzak in #22649)
Bugfix:
* DevTools should inject itself for XHTML pages too (not just HTML) (@bvaughn in #22932)
* Don’t restore profiling data if we’re profling (@eps1lon in #22753)
* DevTools should properly report re-renders due to (use)context changes (@bvaughn in #22746)
* Filter empty commits (all Fibers bailed out) from Profiler (@bvaughn in #22745)
* Accept json file in import fileinput (@jyash97 in #22717)
* Expose css vars to reach-ui portal components (@jyash97 in #22716)
* Fix DevTools advanced tooltip display conditional check (@bvaughn in #22669)
Misc:
* Internally log errors occurring or reported to the frontend (@jstejada in #22948)
* Emit new event when DevTools connects in standalone app (@jstejada in #22848)
* DevTools: Log version in internal logger (@jstejada in #22825)
* Proof of Concept for E2E tests using playwright (@akgupta0777 in #22754)
* Add internal link to Scheduling Profiler (@bvaughn in #22730)