ReactNative学习----1环境搭建及程序调试

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88565336

搭建环境照着文档一步步搭建就好了
https://reactnative.cn
调试:
调试1.手机调试====

1首先在工具里面启动App(首次要安装apk)
Terminal 中敲命令:npm start

2在电脑上打开自己的共享的wifi
在手机上找到IP地址 http://172.16.146.2
猜出电脑的IP地址 http://172.16.146.1

3在电脑和手机浏览器分别访问
http://172.16.146.1:8081

4打开app长按返回键
找到Dev Settings ---- Debug server host & port for device
里面配置:172.16.146.1:8081 (注意没有http://)

5每次修改之后只要打开App,长按返回键,
Reload 重新加载
Enable Live ReLoading 修改之后自动加载(有时候加载不了)
Toggle Inspector 可以调试布局

调试2.在线工具调试====
http://dabbott.github.io/react-native-web-player/
http://172.27.35.1:8081

调试3.谷歌浏览器断点调试====
1在WebStorm开启debug模式
2浏览器中自定访问http://localhost:8081/debugger-ui/
3Ctrl+Shift+I 打开Sources在debuggerWorker.js下找到要断点的文件
4打断点
5在手机上长按返回键,按Reload
6按F10即可调试,一步一步走

调试模式下,日志在浏览器和控制台都能看到

猜你喜欢

转载自blog.csdn.net/zhaihaohao1/article/details/88565336