React devtools для внедренных элементов
Это мой первый пост в блоге. Очень хотелось писать чаще, но все идет не так, как планировалось.
Как разработчик, вы могли столкнуться с программным продуктом для разработчиков. Это действительно помогает идентифицировать рендеринг, состояние и свойства на уровне компонентов.
React devtools - незаменимый инструмент для разработки веб-приложений на React.
Использование расширения chrome / firefox было нормальным использованием инструментов разработки реакции в браузере.
Но иногда наш вариант использования для разработки веб-приложений отличается от обычного. Если у вас есть ситуация, когда приложение реакции было загружено в iframe, тогда вы не можете использовать расширение браузера для отладки элементов реакции внутри iframe.
Затем мы переходим к react-devtools в виде пряжи или пакета npm в рамках разработки.
Чтобы установить react devetools как часть вашей разработки, нам нужно сначала установить пакет yarn или npm. Вот команда для глобального добавления или включения в проект.
После того, как вы установили response-devtools. Теперь вы можете запустить React Devtools из любой командной строки (терминала), как если бы вы выполняли npm start или yarn start.
Используйте команду ниже, чтобы запустить response-devtools в действии.
Наконец-то,
Если вы установили глобально, то
добавьте <script src="http://localhost:8097"></script> в качестве самого первого <script> тега в <head> вашей страницы при разработке:
<!doctype html> <html lang="en"> <head> <script src="http://localhost:8097"></script>
Если вы установили как часть зависимости проекта (не нужно добавлять js-скрипт)
(Важно, чтобы этот импорт выполнялся перед любым другим импортом в вашем приложении)
Более подробную информацию можно найти в
