使用VS Code调试React-Native程序

2025-06-19 09:09:13

本文介绍使用Visual Studio Code对React-Native程序进行调试的方法。

工具/原料

VS Code

React-Native

iOS Simulator

Genimotion Android Emulator

准备工作

1、下载并安装需要的元件sudo npm install -g eslint babel-eslinteslint-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/X罕铞泱殳code.app/Co荏鱿胫协ntents/Developer/Applications/Simulator.app启动iOS Simulator

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

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