WebStorm+Chrom 调试React Native 项目图文详解
来源:互联网 发布:php评论盖楼 编辑:程序博客网 时间:2024/05/17 02:02
在看这篇文章之前,给大家参考一下本人的准备如下:
1、装好React Developer Tools 插件的Chrom;
2、集成完React Native 后的WebStorm,集成参考webstorm集成react-native插件及基础设置;
3、一部Android系统5.0.0+的真机(参考),大家可以下载genymotion模拟器;
准备工作后,开始进入正题:
1、USB链接手机后,打开chrome 浏览器查看链接设备,地址栏直接输入:chrome://inspect/#devices,如下表示chrome链接设备成功:
2、chrom打开新的标签页,并在状态栏中输入:http://localhost:8081/debugger-ui,并打开开发者模式(F12):
3、WebStorm运行react native项目,点击菜单键(真机的话,可以晃一晃),如下图所示,点击Debug JS Remotely选项:
4、上一步完成后,回到chrom浏览器,可以看到如下图:
1、说明已经adb已经反向链接上了设备;
2、这边主要要用到的是Console(输出控制台)及Source(源文件)这两个工具栏
3、这边就是我们代码的区域,左侧行数就是打断点的地方;
4、调试控制区域;
0 0
- WebStorm+Chrom 调试React Native 项目图文详解
- React-native Webstorm调试
- 使用WebStorm创建/运行/调试React Native项目
- 使用WebStorm创建/运行/调试React Native项目
- windows下webstorm调试react native
- 通过WebStorm新建一个React Native项目
- 2、React-Native项目调试
- (翻) 使用webstorm 调试react native 遇到的坑。
- mac上用webstorm搭建React-Native项目
- WebStorm运行React Native配置
- React Native Window 开发环境搭建图文详解
- React Native开发一 webstorm搭建React Native开发环境
- React Native调试方法
- React Native调试插件
- React Native调试心得
- React Native调试心得
- 调试 React Native 应用
- React Native的调试
- UIView 添加category方法 得到view的单个frame值
- 如何扩展或者添加硬盘给VMware的Linux操作系统
- 实用小控件-自定义View-矩形(正方形)
- jzoj 3885 搞笑的代码
- libjson-rpc-cpp windows使用探索
- WebStorm+Chrom 调试React Native 项目图文详解
- 组合全排列算法
- Python学习笔记:python3中的range()函数的返回对象类型
- POJ 3103 Cutting a Block 可能会
- 字符串和基本输入输出
- 排序--希尔排序
- 代码管理工具-git
- 数据库SQL优化大总结之 百万级数据库优化方案
- openwrt使用静态html做web界面