React developer tools не работает

Вкладка React не отображается в инструментах разработчика Chrome

Я установил расширение для браузера React Developer Tools Chrome. Но я не вижу вкладку React в инструментах разработчика, вместо этого есть новые вкладки под названием «Компоненты» и «Профилировщик».

Я переустановил расширение, перезапустил браузер и компьютер, установил флажок «Разрешить доступ к URL-адресам файлов» в разделе chrome: // extensions /. Я перешел на URL-адрес с реакцией https://reactjs.org/tutorial/tutorial.html & пока вкладка «Реагировать» не появляется. Однако плагин Chrome (детектор реакции в правом верхнем углу браузера) указывает, что в нем есть response.js. Как мне отобразить вкладку React?

Я использую «реагировать»: «16.8.6»

2 ответа

Вы не можете видеть вкладку React, потому что Facebook обновил React DevTools, чтобы иметь вкладки Components и Profiler. Вкладка ⚛️ Components служит той же цели, что и вкладка React в более старых версиях. Из описания,

В Chrome DevTools вы получите две новые вкладки: «Компоненты» и «Профилировщик».

На вкладке «Компоненты» отображаются корневые компоненты React, которые были отображены на странице, а также подкомпоненты, которые они в итоге отобразили.

Это видно из версии 4.0.0 . См. Примечания к выпуску здесь.

После установки расширения рядом с вашими расширениями появится небольшой значок типа «атом-реакция» (обычно в верхней правой части экрана), и если веб-сайт не был создан с помощью ReactJS, этот знак расширения будет затенен и в DevTools не было бы меню. Однако я бы порекомендовал попробовать обновить GoogleChrome и переустановить расширение. Иногда перезагрузка компьютера поможет.

Источник

react dev-tools installed on Chrome but still not working #603

Comments

mkents commented Mar 31, 2017

With react dev-tools installed on Chrome browser, and navigating to a url with react — https://www.hellosign.com/ (blue indicator sees that it had react.js in it), the dev-tools tab does not appear in the console. This issue has been discussed before, but having researched it for 2014, 2015, and 2016 can find no proposed resolution that seems to work now, save one hack that only applies in one very narrow set of circumstances.

Any new ideas on how to get around this? Thanks.

The text was updated successfully, but these errors were encountered:

jaredly commented Mar 31, 2017

is the react code located inside of an iframe?

mkents commented Mar 31, 2017

Looking at the minified source, there are iframes for the google tag manager and a zendesk widget. Was looking to the chrome extensions to let me view and manipulate the react.js code on the page. I’m a react.js newbie, so I may be missing something that’s right in front of me here.

jaredly commented Mar 31, 2017

Are you sure there’s react on the page? (not sure what you mean by «the blue indicator»)

mkents commented Apr 1, 2017

Along with the react developer tools there is another chrome plugin that indicates whether a page has react.js code in it, called the react detector.
.. so on the https://www.hellosign.com/ page, it indicates that there is react.js code on the page .. but then with no develop tool showing as available in the console, nothing you can do, knowing it’s there, but unable to test or manipulate it.

ngyikp commented Apr 2, 2017

www.hellosign.com doesn’t seem to use React for me. Their main application at app.hellosign.com does though.

Besides that, react-detector may probably break in the future as it doesn’t light up on www.facebook.com (when logged in to a FB account)

martellaj commented Apr 4, 2017

Not working for me either; even on facebook.com. Stuck on «Connecting to React. «.

Tushkiz commented Apr 6, 2017

it is working for me, tried on app.hellosign.com and also facebook home page.

Chrome: Version 57.0.2987.133 (64-bit)
OS: Windows 10

martellaj commented Apr 6, 2017

I bit the bullet and just uninstalled/re-installed the extension and now it’s working properly.

kyleshevlin commented Apr 16, 2017

This wasn’t working for me either. After quitting Chrome completely and restarting Chrome, the React Devtools worked again.

gaearon commented Apr 20, 2017

Going to close because this seems like a mix of misunderstanding (“React detector” is not an official thing and I don’t know how it works) and Chrome bugs (the ones reported to be fixed by reinstalling / quitting the app).

Источник

Как вы отлаживаете React Native?

Как отладить их код React с помощью React Native, когда приложение работает в симуляторе приложения?

Cmd+D из симулятора. Появится Chrome, и оттуда вы сможете использовать Инструменты разработчика.

Отладка собственных приложений React

Для отладки JavaScript-кода вашего приложения реагирования сделайте следующее:

1. Запустите ваше приложение в симуляторе iOS.
2. Нажмите Command + D и веб-страница должна открыться по адресу http: // localhost: 8081 / debugger-ui . (Chrome только сейчас) или используйте Shake Gesture
3. Включите Pause On Caught Exceptions для лучшей отладки.
4. Нажмите, Command + Option + I чтобы открыть инструменты разработчика Chrome, или откройте его с помощью View -> Developer -> Developer Tools .
5. Теперь вы сможете отлаживать, как обычно.

По желанию

Установите расширение React Developer Tools для Google Chrome. Это позволит вам перемещаться по иерархии представления, если вы выберете React вкладку, когда инструменты разработчика открыты.

Live Обновить

Для активации Live Reload сделайте следующее:

1. Запустите ваше приложение в симуляторе iOS.
2. Нажмите Control + Command + Z .
3. Теперь вы увидите Enable/Disable Live Reload , Reload и Enable/Disable Debugging варианты.

Для приложения Android, если вы используете Genymotion, вы можете переключать меню, нажимая CMD + m , но вам, возможно, придется включить его в меню, выполнив это.

• Убрать виджет
• Включите его, CMD + m нажав на отладку в Chrome

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

Ваши инструменты Chrome Dev должны быть открыты, чтобы это работало

если вы хотите выполнить отладку с помощью устройства Android в Windows, просто откройте командную строку и введите (убедитесь, что ваш adb работает правильно)

это покажет экран как изображение

оно автоматически откроет новое окно. Затем откройте проверяющий элемент или нажмите F12 для консоли.

Работает на: windows , osx и linux .

Он поддерживает: react native и redux

Вы также можете проверить дерево виртуальных компонентов и изменить стили, которые отражены в приложении.

cmd ⌘ + D как ни странно у меня не получилось. Нажатие ctrl + cmd ⌘ + Z в симуляторе iOS открыло для меня окно браузера отладки.

Это экран, который выскакивает:

Отладку реагировать на нативную версию 0.40.0 в Debian 8 (Jessie) можно, перейдя по адресу http: // localhost: 8081 / debugger-ui в Chromium или Firebug, когда ваше приложение работает в симуляторе Android. Чтобы получить доступ к меню разработчика в приложении, выполните следующую команду в другом окне терминала, как указано здесь :

adb shell input keyevent 82

У меня недостаточно репутации, чтобы комментировать предыдущие ответы, и это здорово. 🙂 Вот несколько способов отладки при разработке собственного приложения.

Живая перезагрузка

С помощью клавиш ⌘ + R реагирование на родную систему позволяет легко увидеть ваши изменения или даже просто включить прямую перезагрузку, и сторож « обновит » симулятор последними изменениями. Если вы получили ошибку, вы можете получить подсказку по номеру строки на этом красном экране. Несколько отмен вернут вас в рабочее состояние и начнут снова.

console.log(‘yeah, seriously.’)

Я предпочитаю позволить программе запускаться и регистрировать некоторую информацию, а не добавлять debugger точку останова. (жесткий отладчик полезен при работе с внешними пакетами / библиотеками и поставляется с автозаполнением, поэтому вы знаете, какие другие методы вы можете использовать.)

Enable Chrome Debugging с debugger; точкой останова в вашей программе.

Ну, это зависит от типа ошибок, с которыми вы столкнулись, и ваших предпочтений отладки. Для большинства undefined is not an object (evaluating ‘something.something’) метод 1 и 2 будет достаточно хорош для меня.

В то время как работа с внешними библиотеками или пакетами, написанными другими разработчиками, потребует больше усилий для отладки, следовательно, хороший инструмент, такой как Chrome Debugging

Иногда это исходит от самой платформы реакции-натива, так что поиск проблем с реакцией натива определенно поможет.

надеюсь, это поможет кому-то там.

Вместо Cmd+M , для Android Эмулятор Нажмите F10 в Windows. Эмулятор начинает показывать все опции отладки реагировать на ошибки.

запустите это в терминале для журнала Android.

Если вы используете Microsoft Visual Code, установите расширение React Native Tools. Затем вы можете добавить точки останова, просто нажав на нужный номер строки. Выполните следующие шаги для настройки и отладки приложения:

Не забудьте включить Debug JS Remote в эмуляторе, если вы его используете.

Для Android: Ctrl + M (эмулятор) или встряхнуть телефон (в устройстве), чтобы открыть меню.

Для iOS: Cmd + D или Shake the Phone, чтобы открыть меню

Убедитесь, что у вас есть хром.

В открывшемся меню выберите «Отладка JS Remotely Option».

Chrome будет автоматически открыт по адресу localhost: 8081 / debugger-ui. Вы также можете вручную перейти к отладчику по этой ссылке.

Там откройте консоль, и вы сможете увидеть заметки логов.

Для меня лучший способ отладки на React-Native — использовать «Reactotron» .

Установите Reactotron и добавьте их в свой package.json:

теперь это просто вопрос входа в ваш код. например: console.tron.log(‘debug’)

1. Запустите ваше приложение в симуляторе — response-native run-ios
2. Нажмите Ctrl + D и нажмите Отладка JS Удаленно

1. веб-страница должна открыться по адресу http: // localhost: 8081 / debugger-ui , если нет, введите URL и перейдите по этой ссылке в Chrome
2. Щелкните правой кнопкой мыши на странице и выберите «Проверить», после чего откроются инструменты разработчика для Chrome.

Перейдите к источникам в верхнем меню и найдите файл класса js в проводнике файлов справа.

Вы можете установить точки останова в представлении и отладить код, как показано на рисунке.

По умолчанию мой симулятор ios не улавливал нажатия клавиш, поэтому cmd-D не работал. Мне пришлось включить настройки клавиатуры с помощью меню симулятора:

Оборудование> Клавиатура> Подключить клавиатуру

Теперь cmd-D запускает отладку Chrome.

Для приложения Android. Нажмите Ctrl + M, чтобы выбрать debug js удаленно, и откроется новое окно в chrome с URL http: // localhost: 8081 / debugger-ui . Теперь вы можете отлаживать приложение в браузере Chrome

Наличие пробела в пути к файлу препятствует работе Cmd + D . Я переместил свой проект в место без пробелов и, наконец, получил отладчик Chrome для работы. Похоже, ошибка .

Если вы хотите включить отладку по умолчанию:

Чтобы заставить это работать на Android:

Очень просто всего две команды

Предполагая, что вы хотите показать это меню на эмуляторе Android

Затем попробуйте ⌘+m открыть это диалоговое окно настроек разработчика на эмуляторе Android на Mac.

Если это не показывает, тогда иди AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box .

А затем повторите попытку ⌘+m .

Если он не отображается, перейдите к настройкам запущенного эмулятора и в Send keyboard shortcuts to выпадающем меню / выпадающем меню выберите Emulator controls (default) опцию.

А затем повторите попытку ⌘+m .

Надеюсь, это поможет, это сработало для меня.

Если вы используете Redux, я настоятельно рекомендую React Native Debugger. Он включает в себя Chrome devtools, но также имеет Redux devtools и React devtools.

Redux Devtools : это позволяет вам просматривать свои действия и шаг за шагом перемещаться по ним. Он также позволяет вам просматривать ваше хранилище с избыточностью и имеет функцию автоматического изменения предыдущего состояния с обновленным состоянием для каждого действия, так что вы можете видеть это, когда вы шагаете вперед и назад через ряд действий.

Реагировать на Devtools : это позволяет вам проверять определенный компонент, а именно все его свойства и состояние компонента. Если у вас есть фрагмент состояния компонента, который является логическим, он позволяет щелкнуть по нему, чтобы переключить его и посмотреть, как ваше приложение реагирует на его изменения. Отличная особенность.

Chrome Devtools Позволяет увидеть все выходные данные консоли, использовать точки останова, сделать паузу в отладчике; и т.д. Стандартные функции отладки. Если вы щелкнете правой кнопкой мыши область, где ваши действия перечислены в Redux Devtools, и выберите «Разрешить проверку сети», вы сможете проверить вызовы API на вкладке сети Chrome Devtools, что приятно.

В заключение, иметь все это в одном месте — это фантастика! Если вам не нужен один из них, вы можете включить или выключить его. Получите React Native Debugger и наслаждайтесь жизнью.

Источник