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

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

0 голосов
/ 05 декабря 2018

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

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

  1. Сначала добавьте реакционные нативные конфигурации в обед.json.

  2. Добавьте файл packager.info.json в каталог .expo, например,

    {"expoServerPort": 19001, "packagerPort": 19002, "packagerPid": 65931}

  3. Затем добавьте файл settings.json в каталог .vscode следующим образом 

    {
    "react-native": {
        "packager": {
            "port" : 19002
        }
    }
}

  4. Затем запустите Attach to packager с параметрами отладки vscode и включите

Удаленная отладка JS

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

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

Отладка Android

опция vscode отладчик. Затем http://localhost:8081/debugger-ui/окно всплывающее.но точечная доза отладчика vscode не достигнута.

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

Ответы [ 3 ]

0 голосов
/ 16 февраля 2019

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

Что исправило это для меня:

  1. Начало пряжи
  2. Закрыть все Экспо окна в вашем браузере.
  3. Запустите приложение на своем телефоне.
  4. Запустите приложение на телефоне и покачивайте его, пока не войдете в меню отладчика и Disable Debugging.
  5. Войдите в ./expo/packager-info.json.Скопируйте порт упаковщика.
  6. Вставьте в файл, который вы создали из вышеупомянутого учебника на YouTube ./vscode/settings.json
  7. Нажмите F5 в VSCode
  8. Встряхните свой телефон, чтобы включить отладку.
0 голосов
/ 21 мая 2019

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

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

0 голосов
/ 05 декабря 2018

Используйте команду присоединить к конфигурации упаковщика и закройте вкладку 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" } ] }

...