web-dev-qa-db-fra.com

Très nouveau pour React Native - Débogage dans du code Visual Studio?

J'ai suivi les instructions de débogage dans VSCode comme indiqué dans

https://github.com/Microsoft/vscode-react-native

J'ai connecté mon Nexus 6P à l'aide d'un câble USB avec mon MBP2015 et activé les options pour les développeurs et le débogage USB, mais lorsque je sélectionne Debug Android sous VSC, je reçois ce message.

[Error] "Could not debug. Android project not found."

J'ai joint une photo de cela aussi.

Si je veux déboguer sur le simulateur IOS, je sélectionne le débogage IOS dans VSC, mais j'obtiens cela et le simulateur ne démarre pas.

[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-react-native] Building and running application.
[vscode-react-native] Executing command: react-native run-ios --simulator
Scanning 772 folders for symlinks in /Users/me/reactnativework/my-app/node_modules (4ms)
ENOENT: no such file or directory, uv_chdir
[Error] "Could not debug. Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'"

J'ai vu peu de messages ici sur un problème similaire, mais aucun ne répond ou n'est pas le même problème que le mien.

Comment déboguer une application React Native la plus simple possible à l'aide de points d'arrêt afin de pouvoir suivre l'exécution du code dans Visual Studio Code?

Voici mon 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": "Debug in Exponent",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}
debuggingreact-nativevisual-studio-code
3
pixel

Il existe plusieurs façons d'activer le débogage du point d'arrêt à l'aide de vs code.

  1. Exécutez le conditionneur et le débogueur en utilisant le code vs: Déboguer Android/Déboguer iOS
  2. Utiliser exposant
  3. Attacher à emballeur

D'après mon expérience, le débogage le plus stable dans vs code consiste à utiliser la troisième option, Attach to packager. 

Pour utiliser cela, vous pouvez démarrer un conditionneur externe (à partir de la ligne de commande i.e) et attacher le débogueur à son port.

    {
        "name": "Attach to packager",
        "program": "${workspaceRoot}/.vscode/launchReactNative.js",
        "type": "reactnative",
        "request": "attach",
        "port": 19002, // change this with your port
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/.vscode/.react"
    },

Les 2 autres options, qui causent toujours un empaqueteur multi-instance et une erreur d’emballeur, finissent par perdre du temps à tuer le port. Au moins pour moi, utiliser attach to packager est beaucoup plus confortable.

Si vous créez l'application à l'aide de l'exposant, vous ne pourrez pas exécuter Debug Android/iOS, la seule option consiste à utiliser le débogage dans l'exposant ou vous pouvez toujours utiliser l'attachement au conditionneur avec la même méthode qu'auparavant.

4
Ganesh Cauda

Suivez ces étapes

  • Installer l'extension React-native Full Pack

 enter image description here

  • Créer Launch.json

 enter image description here

  • Sélectionnez Déboguer iOS ou Android .Ajouter un point d'arrêt et en profiter.

 enter image description here

Remarque: Assurez-vous d’activer Déboguer JS à distance

 enter image description here

Maintenant, prenez un café et profitez-en!

3
Tunvir Rahman Tusher

Il existe un moyen de le faire avec un simple clic sur un bouton . Le débogueur sera attaché au gestionnaire de package après le démarrage du simulateur et que celui-ci est déjà en cours d'exécution. Configurez launch.json fichier comme ceci:

  "configurations": [
    {
      "name": "Debug",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react",
      "port": "8081",
      "address": "localhost",
      "preLaunchTask": "npm: debug:dev"
    },
  ]

Et dans package.json il vous suffit d’ajouter un nouveau script:

  "scripts": {
    "debug:dev": "react-native run-ios --scheme 'My project scheme' --configuration 'Debug' --simulator 'iPhone 8'",
0
big-toni