Отладка React Native с использованием отладчика vscode

Мне нужно отладить мое приложение, поддерживающее реакцию, на VsCode, и я новичок, чтобы реагировать на собственную разработку .. :) Я ищу и использую разные методы, но безуспешно .. :( Сначала я следую этому методу https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67, а также этому методу https://thewikihow.com/video_0_MnXPD55-E. но не повезло.

Позвольте мне объяснить мою процедуру отладки.

Сначала добавьте собственные конфигурации реакции в обед.json.
Добавьте packager.info.json в каталог .expo следующим образом
{ «expoServerPort»: 19001, г. «packagerPort»: 19002, г. "packagerPid": 65931 }
Затем добавьте settings.json в каталог .vscode следующим образом
```
{
    "react-native": {
        "packager": {
            "port" : 19002
        }
    }
}
```
Затем запустите Attach to packager в параметрах отладки vscode и включите

Remote JS Debugging

реагировать на собственное приложение, работающее на моем реальном устройстве Android. но точка отладки vscode не срабатывает.

После того как я попробовал

Debug Android

вариант vscode отладчик. тогда появится окно http: // локальный: 8081 / отладчик-ui /. но доза точки отладчика vscode не попадает.

Может ли кто-нибудь знать, как правильно настроить реакцию на отладку собственного приложения с помощью vscode, пожалуйста, дайте мне инструкции для этого ... :) :) Спасибо..

android react-native debugging visual-studio-code vscode-debugger

05.12.2018 06:58

Коллекции (ArrayList , HashSet , HashMap)

5 458

Ответы 3

Используйте присоединение к конфигурации упаковщика и закройте эту вкладку localhost: 8081 / debugger-ui, потому что, если она останется открытой, vscode не сможет подключиться к отладчику. Теперь попробуйте еще раз, нажмите зеленую кнопку воспроизведения в отладчике vscode и перезагрузите приложение.

Также нам понадобится расширение react native tools, иначе вы получите ошибку: The configured debug type "reactnative" is not supported. Вот мой файл launch.json, который я использую сейчас на случай, если он вам понадобится:

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name": "Debug Android", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "android", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug iOS", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "ios", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Attach to packager", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "attach", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Chrome Attach to packager", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "chrome", "request": "attach", "port": 9222, "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" }, { "name": "Debug in Exponent", "program": "${workspaceRoot}/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "exponent", "sourceMaps": true, "outDir": "${workspaceRoot}/.vscode/.react" } ] }

Нашел мою недостающую часть .. выполните все мои действия, а затем просто ЗАГРУЗИТЕ ПРИЛОЖЕНИЕ .. :)

— 05.12.2018 17:28

05.12.2018 07:14

Для людей, у которых все еще возникают проблемы с запуском.

Для меня это было исправлено:

Начало пряжи
Закройте окна экспозиции все в своем браузере.
Запустите приложение на своем телефоне.
Запустите приложение на телефоне и встряхивайте его, пока не попадете в меню отладчика и Disable Debugging.
Зайдите в ./expo/packager-info.json. Скопируйте порт упаковщика.
Вставьте в файл, который вы создали из вышеупомянутого руководства на YouTube ./vscode/settings.json.
Нажмите F5 в VSCode
Встряхните телефон, чтобы включить отладку.

16.02.2019 18:41

Вы можете использовать расширение React Native Tools (предоставляемое Microsoft) в VS Code, чтобы включить отладку (как и любую другую IDE, но не Chrome) для приложений React Native.

Подробно все инструкции можно прочитать в мой другой ответ.

21.05.2019 11:42