调试react-native项目_react-native react-devtools调试 - CSDN
  • 前言React-Native调试不像本地代码调试一样方便,但也是可以调试的.毕竟如果程序不能调试,那基本无法正常开发.接下来我们看下如何调试RN的程序.1.打开开发者菜单.开发者菜单是RN的一个调试菜单,里面有很多选项,例如...

    前言

    React-Native调试不像本地代码调试一样方便,但也是可以调试的.毕竟如果程序不能调试,那基本无法正常开发.接下来我们看下如何调试RN的程序.

    1.打开开发者菜单.

    开发者菜单是RN的一个调试菜单,里面有很多选项,例如重新加载程序,Debug模式开启,实时更新,快速热修复,类似于instant run,开发者调试设置等等.开发者菜单只可在debug版本中调出,假如是apk的release版本则不可调出.具体界面如下:

    这里写图片描述

    那么如何打开者菜单呢?这里分为模拟器和真机,模拟器很简单,mac下按cammand + M可调出开发者菜单.而在windows上可按下window+M可调出(有些模拟器是F1或F2).

    1.开发者菜单的Reload选项

    Reload代表重新加载程序的js代码,意味着程序会重新运行,并且你修改过后的js代码会更新,并运行.也就是开发者菜单中的第一项.每次修改代码,需要重新运行,只需调出开发者菜单,选中Reload即可.

    2.开发者菜单中的Enable Live Reload选项

    这个功能相当于Reload自动执行的选项,在开发者菜单的第二个选项.这个选项选中后,开发会变得更方便.当你修改代码后,便会自动执行.那么如何触发呢?毕竟不是你修改一行就加载一行,那样也不太正常啊.在subline中,只需按下crlt+s 这个保存的快捷键,即可调出live reload功能.

    3.开发者菜单中的Enable Hot Reloading选项

    这个功能相当于上面的live reload的加强版.也就是实时热修复,并直接达到当前所在的界面,保留当前的运行状态.类似android studio中的instant run,修改下界面后,直接显示修改后的ui效果.

    注意: 这里的reload,live reload,hot reload都指的是js代码层面的调试,如果是android中或者ios中加入了图片资源,或者native代码有修改那就不行了,必须要重新编译才能看到效果.

    4.错误提示.

    RN代码运行的错误提示分为红屏和黄屏两种,红屏代表错误,即你的代码有显著错误,需要修复,不然无法运行.黄屏代表警告,不修复也是可以运行的.你可以手动禁止黄屏警告.只需加入一下代码:

    console.disableYellowBox = true;
    console.warn('YellowBox is disabled.');

    注意: 红屏和黄屏也只是在debug版本中才会显示,在release版本中是不会显示的.

    RN中的红屏错误提示还是挺方便的,一般情况下都可以直接看错误描述就可以知道问题所在,例如下面的红屏错误信息:

    这里写图片描述

    这个错误指出错误的标记产生,发生在js代码的249行.这里可能就是你少写了一个中括号或者括号,导致代码结构出现了问题.还是比较方便的.

    5.使用Chrome开发者工具调试.

    使用谷歌浏览器可以方便的对RN的JS代码进行debug调试,当然前提是你得先装个谷歌浏览器.具体操作步骤是,打开开发者菜单,选中Debug JS Remotely选项.这时候应用会打开 http://localhost:8081/debugger-ui 这个页面.在这个页面,你可以方便的进行调试.在Chrome的菜单中选择Tools → Developer Tools可以打开开发者工具,也可以通过键盘快捷键来打开(Mac上是Command + Option+ I,Windows上是Ctrl + Shift + I或是F12)。此时就可以看到js的源代码和打断点调试.

    虽然可以调试,但是还是不太只能,因为在Chrome中并不能直接看到App的用户界面,而只能提供console的输出,以及在sources项中断点调试js脚本。并且浏览器中的react插件也不可用,这个插件本来是用来查看react应用的界面结构的,但是RN中不支持.另外,这里指的是js代码层面的打断点调试,假如是native代码,还是需要到android中进行调试的,和平常开发一样.手机界面是这样:

    这里写图片描述

    浏览器是这样的:

    这里写图片描述

    6.性能检测

    可以在开发者菜单中选择”Pref Monitor”选项以开启一个悬浮层,其中会显示应用的当前帧数。这个也非常的方便.

    展开全文
  • 通过 谷歌浏览器Chrome调试React Native程序步骤一:先在模拟器上运行项目步骤二:选中模拟器,同时使用键盘上的组合键"Command + D"打开Developer Menu菜单,并单击选择”Debug JS Remotely"步骤三...

    学习交流:https://gitee.com/potato512/Learn_ReactNative

    react-native学习交流QQ群:806870562


    通过 谷歌浏览器Chrome调试React Native程序
    步骤一:先在模拟器上运行项目
    步骤二:选中模拟器,同时使用键盘上的组合键"Command + D"打开Developer Menu菜单,并单击选择”Debug JS Remotely"

    步骤三:在打开的谷歌浏览器里选择开发者工具:菜单——视图——开发者——开发者工具


    步骤四:在模拟器里刷新项目"Command + R"则会看到调试效果


    注意:要停止浏览器调试可以在模拟器上打开Developer Menu菜单,并单击选择”Stop Remotely JS Debugging"。


    展开全文
  • 这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得...

    前言:
    这篇博文主要介绍两个方面:
    1. react-native项目的调试
    2. react-native项目的代码智能提示
    这两个问题主要是由于reactnative和vue,react等框架不一样,这个是跨平台的,写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看,所以关于调试就显得特别重要。其次关于智能提示:react-native同react一样,秉承”一切元素皆组件“设计理念,但它比react更甚:直接抛弃html标签,所有“标签”都得用它的封装好的组件。所以这就是智能提示的重要性。

    1. react-native项目的调试

    1.1 使用vscode调试

    1.1.1 安装React Native Tools

    插件支持react-native代码高亮、debug以及代码提示等十分强大的功能

    这里写图片描述

    1.1.2 使用React Native Tools进行调试

    1. 点扩展插件上面的调试
    2. 播放按钮的旁边,给预调试的项目添加配置
      这里写图片描述

    3. 然后弹出一个选择 ,选react native
      这里写图片描述

    4. 这里我选的是Debug Android[因为我的模拟器是安卓的]
      这里写图片描述
      随后生成一个launch.json文件,按照默认配置即可。对了我项目是在react native 脚手架上写的所以默认配置即可
      这里写图片描述

    快捷键F1—>输入 React Native Run Android 来部署应用
    相当于命令行敲下 的react-native run-android

    这里写图片描述

    应用成功启动:

    这里写图片描述

    开始debug:
    1. 打断点
    例如我们在注册页面的判空那里打个断点,当用户点击注册按钮时触发这个函数:
    这里写图片描述

    1. 开始调试
      调试——》debug Android [即选择刚刚我们新添加的那个配置] ——》开始调试[播放按钮]
      这里写图片描述

    开启调试成功: 会出现一行调试的悬浮窗口
    这里写图片描述

    当我触发注册按钮时:断点
    这里写图片描述

    接下来就是正常的调试步骤了
    按钮依次是:继续,单步跳过,单步调试,单步跳出,重启,停止
    这里写图片描述

    1. 对了还有讲下右边界面
      可以看变量,增加断点等
      鼠标移上变量也可以看到变量值,这和chrome调试差不多
      这里写图片描述

    1.2 Chrome开发者工具调试

    1.win10下 在模拟器ctrl + m 打开菜单选项
    选择debug js remotely
    这里写图片描述

    此时谷歌会打开新页面,如未打开自己输入以下地址亦可
    http://localhost:8081/debugger-ui/
    这里写图片描述
    页面显示Status: Debugger session #0 active. 则证明模拟器连接上了该调试。

    1. F12 打开控制台
      在控制台即可以看到console的输出,以及在sources项中断点调试js脚本[和一般的chrome调试没差别]
      只是在网页不能看到app样子只能输出信息 ,app还是得在真机或者模拟器上查看

    2. 利用Typings为Visual Studio Code实现智能提示功能

    2.1 全局安装typings

    npm install -g typings

    2.2 使用typings安装相关代码提示包

    先进入你的react-native项目中,在项目的根目录下:

    typings install dt~react-native --save --g

    安装完成后VSCode的根目录下会多一个typings.json文件
    至此配置完,以后关于reactnative的代码就有自动提示+补全。

    这里写图片描述

    当然也可以使用typings 为node,Lodas等增加智能提示。

    后记:

    学习reactnative让我真正由衷地发出前端今非昔比的感叹..
    从环境搭建到写的应用可以直接调手机的本地文件[前端再也不是简单的网页脚本了。。]到代码调试。让我找到了以前用c++写游戏调试的码感。。
    大抵是以前的一个html+js文件就可以跑个网页的时代一去不复返了,大抵是前端走向全栈将要走向客户端后端的大统一了..
    要学的东西很多,很新,技术也层出不穷的,不过让我兴奋,为前端感到骄傲~

    展开全文
  • 在创建好React-native的初始化项目后,运行yarn ios之后只是显示如下图 在虚拟机上没有任何的显示,这个其实不是个bug,在react-native环境安装好的情况下,一般不会出现程序上面的错误,这个是运行的命令不对。 ...

    在创建好React-native的初始化项目后,运行yarn ios之后只是显示如下图
    在这里插入图片描述
    在虚拟机上没有任何的显示,这个其实不是个bug,在react-native环境安装好的情况下,一般不会出现程序上面的错误,这个是运行的命令不对。
    命令如下

    react-native start
    

    开启react-native监控,一定要开启,不然就会有以上的问题出现

    react-natvie run-ios 
    

    启动程序,就会运行起react-native项目,切记,这些命令的运行一定是要在项目的目录下。
    运行完了如下图在这里插入图片描述

    展开全文
  • android studio直接运行react-native项目时报错 make sure you're either running a metro server(run 'react-native start') 解决办法: You haven't started the bundler yet. Runnpm startorreact-native ...
  • 用了http://localhost:8081/debugger-ui,安装了react-devtools,又发现了一个神器,这个算是集成了react-devtools和浏览器调试。 安装 官网地址:https://github.com/jhen0409/react-native-debugger/releases。 ...
  • 1.安装JDK配置JAVA_HOME系统变量 2.安装android studio配置ANDROiD_HOME系统变量(下载SDK) 3.添加模拟器 转载于:https://www.cnblogs.com/gaollard/p/8804781.html
  • React-Native项目在Android真机上调试?接下来直奔主题,通过USB将手机和电脑连接,打开手机上的USB调试。不通型号的手机可能设置方式不一样,这里具体不在细说…… 1、确保你的设备已经成功连接。可以终端输入adb...
  • 从网页转到app不适应的一点就是网页经常控制台调试,而用了几天react-native感觉哪总说不上来的不舒服,后来对比发现我常用的调试用不了了,这就很难受,后来在网上看了很多的相关文章,在总结自己的使用经验有了...
  • 一,构建react-native项目本文使用的是create-react-native-app 和 expo 工具来新建打包react-native项目,这两个工具的结合使用突破了操作系统的限制,使我们能够不安装安卓和ios的编译环境就能够进行rn应用的开发...
  • 无需Android真机,windows系统和Android模拟器一样可以开发react-native项目,如果需要用到内网环境,直接改模拟器hosts文件就可以了。怎么改啊?进去看看呗!
  • 因为后边要做rn项目,所以...react-native 需要的依赖的环境:node, python2, jdk,react-native-cli. 这里需要注意,python必须是2,jdk必须是1.8以上,jdk遇到过坑,因为本地安装了多个版本的jdk,使用java -ve...
  • 其实对react-native已经仰慕许久,但是由于工作太忙,加上自己的懒惰,迟迟没有着手学习,但是随着react-native日渐成熟,跨平台技术优势的...(1)react-native中文网地址:http://reactnative.cn (2)react-nati
  • 1. 运行在Android上: ... react-native run-android // 默认运行设备 react-native run-android --simulator="XXX" // 模拟器运行 react-native run-android --device="chenfan_mate20pro" // 真机(ch...
  • 最近做了一个项目,用的react-native 开发的iso项目。 由于自己没有oc基础,所以该项目几乎全用js写得。(顺便说一下,react-native 开发,最好还是学一下原生,起码的看得懂,不然搞配置一抓一把黑) 1:关于真机...
  • react-native技术的优劣

    2018-02-27 23:35:18
    从2017年初开始到现在,使用React-Native项目已经一年了。我们做的是一款IM软件,嵌入在一个手机游戏平台的工程内部。之所以要采用react-native(后文简称RN)框架重构它,是因为现在游戏大厅上的所有游戏都是热...
  • 在网上查找相关组件,开始使用的是react-native-qrcode组件,截图功能使用的是react-native-view-shot组件,保存图片则是使用的react-native自带的CameraRoll模块。以为这样就可以万事大吉了,没想到还是出了不明...
  • 启动react-native项目时 node窗口闪退,问题直接,效果显著,欢迎下载。信誉第一,值得信赖
  • react-native连接终端或模拟器调试项目 这里使用.连接真机调试. 真机调试要确保开启调试权限,并且允许usb安装未知来源的应用。 A 以下是启动真机调试步骤: 新建终端一 >$ npm start //启动node模块依赖...
  • 第一次使用Android studio运行react-native开发的App,不知道怎样去启动项目 失败方式 以下均失败: 1、在项目目录下执行:react-native run-android 2、在项目目录下执行:react-native start 3、在Android studio...
1 2 3 4 5 ... 20
收藏数 11,104
精华内容 4,441
关键字:

调试react-native项目