使用VS Code调试React-Native程序

2025-11-29 17:30:50

1、下载并安装需要的元件

sudo npm install -g eslint babel-eslint eslint-plugin-react

2、安装VS Code插件,包括:

- React Native Tools

- ESLint

- Babel ES6/ES7

使用VS Code调试React-Native程序

3、创建项目:

react-native init debug

4、在项目根目录创建一个 .eslintrc:

{  

    "parser": "babel-eslint",  

    "ecmaFeatures": {    

        "jsx": true,    "modules": true  

    },  

    "env": {   

         "es6": true  

    },  

    "plugins": [    

        "react"  

    ]

}

1、点击VS Code左边debug按钮或者按下CMD+SHIFT+D。

使用VS Code调试React-Native程序

2、选择调试环境。launch.json被自动创建。

使用VS Code调试React-Native程序

3、启动iOS Simulator(注意型号与launch.json中的一致)。

{

      "name": "Debug iOS",

      "program": "${workspaceRoot}/.vscode/launchReactNative.js",

      "type": "reactnative",

      "request": "launch",

      "platform": "ios",

      "target": "iPhone 6s",

      "internalDebuggerPort": 9090,

      "sourceMaps": true,

      "outDir": "${workspaceRoot}/.vscode/.react"

    }

4、设置断点,让你启动Debug iOS就可以开始调试了。

使用VS Code调试React-Native程序

使用VS Code调试React-Native程序

5、注意:可以在命令行输入(Xcode 7):

open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

启动iOS Simulator

6、可以使用Genymotion对Android版本进行调试。

使用VS Code调试React-Native程序

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢