2018-09-07 00:14:57 qq_23414675 阅读数 991
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

React Native / React调试技巧

做过原生APP开发的同学们都清楚,我们在Xcode和studio中就可以直接对编写的代码进行断点调试,很方便,但是web开发断点调试就不能直接在开发工具中完成了,需要借助浏览器来完成,React相关的开发断点调试和web开发基本上一样,也是在浏览器上进行调试,虽然没有原生那么方便,但是也还算简单。React Native调试需要借助官方的Developer Menu,下面我们就来简单聊聊这个Developer MenuChrome Developer Tools

Developer Menu

模拟器开启Developer Menu

  • iOS模拟器
    • 可以通过Command⌘ + D快捷键来快速打开Developer Menu
  • android模拟器
    • 可以通过Command⌘ + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开

http://ovyjkveav.bkt.clouddn.com/17-12-4/24659707.jpg

真机开启Developer Menu

  • iOS和Android真机通过摇动手机来开启Developer Menu

Reloading JavaScript

在只是修改了js代码的情况下,如果要预览修改结果,你不需要重新编译你的应用。在这种情况下,你只需要告诉React Native重新加载js即可。

注意: 如果你修改了native的代码或修改了Images.xcassets、res/drawable中的文件,重新加载js是不行的,这时你需要重新编译你的项目了

Reload js

Reload js将你项目中js代码部分重新生成bundle文件,然后传输给模拟器或手机

在Developer Menu中单击Reload让React Native重新加载js。对于iOS模拟器你也可以通过Command⌘ + R快捷键来加载js,对于Android模拟器可以通过双击r键来加载js

注意:如果Command⌘ + R 无法使你的iOS模拟器加载js,可以通过选中Hardware menu中Keyboard选项下的 ‘Connect Hardware Keyboard’ 试试

Enable Live Reload

在 Developer Menu中有 ‘Enable Live Reload’ 选项,该选项提供了React Native动态加载的功能。当你的js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手机上

gif

Enable Hot Reloading

Developer Menu中还有一项需要特别介绍的,就是’Enable Hot Reloading’热加载,如果说Enable Live Reload解放了你的双手的话,那么Hot Reloading不但解放了你的双手而且还解放了你的时间。 当你每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面,Enable Live Reload则会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上,当你做布局的时候启动Enable Live Reload功能你就可以实时的预览布局效果了,方便省时

Warning

React Native程序运行时出现的Warnings也会被直接显示在屏幕上,以黄色的背景显示,并会打印出警告信息,你也可以通过console.warn()来手动触发Warnings,你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示,或者通过console.ignoredYellowBox = ['Warning: ...']来忽略相应的Warning

img

Error

React Native程序运行时出现的Error会被直接显示在屏幕上,以红色的背景显示,并会打印出错误信息, 你也可以通过 console.error()来手动触发Error

img

注意: 在生产环境release下Error和Warning功能不在生效

如何真机调试

  • iOS上

配置好相应的调试证书,直接连接线连接到真机运行即可

  • android

摇晃手机,调出Developer Menu面板,在’Developer Menu’下的’Dev Settings’中Debug server host & prot for device配置自己路由器ip地址。端口使用8081即可

image

image

Chrome Developer Tools

Chrome 开发工具

谷歌Chrome开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略。Chrome开发工具一共提供了8大组工具:

  • Element 面板: 用于查看和编辑当前页面中的 HTML 和 CSS 元素
  • Network 面板:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等
  • Source 面板:用于查看和调试当前页面所加载的脚本的源文件
  • TimeLine 面板: 用于查看脚本的执行时间、页面元素渲染时间等信息
  • Profiles 面板:用于查看 CPU 执行时间与内存占用等信息
  • Resource 面板:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等
  • Audits 面板:用于优化前端页面,加速网页加载速度等
  • Console 面板:用于显示脚本中所输出的调试信息,或运行测试脚本等

注意: 对于调试React Native应用来说,Sources和Console是使用频率最高的两个工具

你可以像调试JavaScript代码一样来调试你的React Native程序

如何通过Chrome调试React Native程序

  • 启动远程调试

在Developer Menu下单击’Debug JS Remotely’启动JS远程调试功能,此时Chrome会被打开,同时会创建一个’http://localhost:8081/debugger-ui‘网页

image

  • 打开Chrome开发者工具

在该’http://localhost:8081/debugger-ui‘网页下打开开发者工具,打开Chrome菜单->选择更多工具->选择开发者工具。你也可以通过快捷键(Command⌘ + Option⌥ + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具

打开Chrome开发着工具之后你会看到如下界面

image

Sources面板

Sources面板提供了调试 JavaScript 代码的功能

image

Sources面板可以让你看到你所要检查的页面的所有脚本代码,并在面板选择栏下方提供了一组标准控件,提供了暂停,恢复,步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。源码显示在单独的标签页,通过点击 打开文件导航面板,导航栏中会显示所有已打开的脚本文件

Chrome开发着工具中的Sources面板几乎是最常用的功能面板。通常只要是开发遇到了js报错或者其他代码问题,在审视一遍自己的代码而一无所获之后,首先就会打开Sources进行js断点调试

执行控制工具

从上图可以看到’执行控制工具’按钮在侧板顶部,让你可以按步执行代码,当你进行调试的时候这几个按钮非常有用:

  • 继续(Continue): 继续执行代码直到遇到下一个断点
  • 单步执行(Step over): 步进代码以查看每一行代码对变量作出的操作,当代码调用另一个函数时不会进入这个函数,使你可以专注于当前的函数
  • 跳入(Step into): 与 Step over 类似,但是当代码调用函数时,调试器会进去这个函数并跳转到函数的第一行
  • 跳出(Step out): 当你进入一个函数后,你可以点击 Step out 执行函数余下的代码并跳出该函数
  • 断点切换(Toggle breakpoints): 控制断点的开启和关闭,同时保持断点完好

查看js文件

如果你想在开发者工具上预览你的js文件,可以在打开Sources tab下的debuggerWorker.js选项卡,该选项卡下会显示当前调试项目的所有js文件,或者是用快捷键 cmd + o 调出文件搜索直接进行搜索,这个更加便捷高效

断点

断点(Breakpoint)是在脚本中设置好的暂停处,在DevTools中使用断点可以调试JavaScript代码

  • 添加和移除断点

在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试,点击边栏(line gutter) 为当前行设置一个断点,已经设置的断点处会有一个蓝色的标签,单击蓝色标签,断点即被移除

image

右键点击蓝色标签会打开一个菜单,菜单包含以下选项:执行到此(Continue to Here),黑盒脚本(Blackbox scripts),移除断点(Remove Breakpoint), 编辑断点(Edit Breakpoint),和 禁用断点(Disable Breakpoint)。在这里你可以对断点进行更高级的操作

image

高级操作

  • Continue to Here

如果你想让程序立即跳到某一行时,这个功能会帮到你。如果在该行之前还有别的断点,程序会依次经过前面的断点。另外需要提出的是这个功能在任意一行代码的边栏(gutter line)前单击右键都会看到

  • Blackbox scripts

黑盒脚本会从你的调用堆栈中隐藏第三方代码

  • Edit Breakpoint

通过该功能你可以创建一个条件断点,你也可以在边栏(gutter line) 右键并选择添加条件断点(Add Conditional Breakpoint) 。在输入框中,输入一个可解析为真或假的表达式。仅当条件为真时,执行会在此暂停

image

如果你想让程序在某处从来都不要暂停,可以编辑一个条件永远为false的条件断点。另外,你也可以在该行代码的边栏(gutter line)前单击右键选择“Never pause here”即可,你会发现“Never pause here”其实就是在该行代码上设了一个永远为false的条件断点

image

管理断点

你可以通过Chrome开发者工具的右边面板来统一管理你的断点

image

你可以通过断点前的复选框来启用和禁用断点,也可以单击右键来进行更多的操作(如:移除断点,移除所有断点,启用禁用断点等)

全局断点

全局断点的作用是,当程序出现异常时,会在异常的地方暂停,这对快速定位异的常位置很方便。
做iOS开发的同学都知道在Xcode中可以设置全局断点,其实在Chrome 开发者工具中也同样有与之对应的功能,叫’Pause On Caught Exceptions’。如果勾选上此功能,则即使所发生运行时异常的代码在 try/catch 范围内,Chrome 开发者工具也能够在错误代码处停住

image

控制台

DevTools控制台(Console)可以让你在目前已暂停的状态下进行试验。按 Esc 键打开/关闭控制台

你可以在控制台(Console)上打印变量,执行脚本等操作。在开发调试中最常用

image

更多文章

  • 作者React Native开源项目OneM【500+ star】地址(按照企业开发标准搭建框架完成开发的):https://github.com/guangqiang-liu/OneM:欢迎小伙伴们 star
  • 作者简书主页:包含60多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 欢迎小伙伴们:多多关注多多点赞
  • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
  • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(*620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢大家支持!*

小伙伴们扫下方二维码加入RN技术交流QQ群

QQ群二维码,500+ RN工程师在等你加入哦

2018-08-24 23:24:48 niuba123456 阅读数 347
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

目录

1.Chrome安装插件JetBrains IDE Support

2. React Native的js不能直接调试

3. 创建React Native配置

3.1 打开Configurations

3.2 添加React Native配置

3.3 配置React Native

3.4 开始调试React Native


1.Chrome安装插件JetBrains IDE Support

参考:WebStorm调试javaScript

2. React Native的js不能直接调试

js页面可以直接右键“Debug 'index.js'”,但是React的js文件不能直接调试,

因为NodeJS只支持部分ES6的语法,有些ES6语法还不支持,而import语法就是其中一个;

如果RN项目直接右键调试js文件,会出现错误: Nodejs调试错误:SyntaxError: Unexpected token import

3. 创建React Native配置

3.1 打开Configurations

Run -> EditConfigurations ;

或者:

工具栏右侧点击“Add Configurations

3.2 添加React Native配置

点击“+”,选择React Native

3.3 配置React Native

一般只需修改名称即可,

3.4 开始调试React Native

React Native项目JS文件添加断点,选择配置的React Native的名称,然后点击“Debug”按钮;

弹出:Chrome的debug页面

点击手机的React Native界面

 

2019-11-26 15:55:59 qq_39575872 阅读数 29
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

vscode调试react native


1、安装rn环境,建立rn项目,此处不做叙述

2、在vscode中安装Debugger for Chrome扩展,看下图
在这里插入图片描述
3、点击debug按钮、点击小齿轮、选择环境、添加配置。若是直接打开了launch.json文件,请到项目根目录删除./.vscode文件夹再重复以上操作
在这里插入图片描述
在这里插入图片描述
4、配置完成后按F5, 点击三角形按钮启动包生成工具
在这里插入图片描述
5、调试器连接包生成工具后,摇一摇唤出菜单选择Debug,再回到VsCode按F5开启调试即可
在这里插入图片描述

遇到的问题


暂无

2016-09-25 13:12:09 zhangbuzhangbu 阅读数 3375
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

调试React-Native有两种场景,第一种是通过react-native run-ios(或者run-android)启动应用,第二种是打开已经安装在手机的Debug版本。

1)通过react-native run-ios(或者run-android)启动应用后,要调试应用就比较简单,在配置过Js Server的ip和port后,当应用上显示已经成功时,即可通过编辑js源文件,然后保存。再次刷新应用界面即可进行调试

2)如果不想再次通过react-native run-ios(或者run-android)启动调试过程,可以在打开安装好的Debug版本之前,通过Atom的Nuclide工具启动Js Server。然后就可以直接通过修改js文件调试


2017-09-07 10:33:46 u011094768 阅读数 1843
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57803 人正在学习 去看看 李宁

react-native react-native-swiper 设置horizontal=false后界面依然横向滑动,
主要是对布局进行了旋转操作

export  default class TestSwiper extends Component {
    render(){
        return (
            <View style={styles.containerStyle}>
                <Swiper
                    showsPagination={false}
                    autoplay
                >
                    <Text style={[{backgroundColor:"#f0f"},styles.pageStyle]}>界面1</Text>
                    <Text style={[{backgroundColor:"#ff0"},styles.pageStyle]}>界面2</Text>
                    <Text style={[{backgroundColor:"#00f"},styles.pageStyle]}>界面3</Text>
                </Swiper>
            </View>
        )
    }
}
const styles=StyleSheet.create({
    containerStyle:{
        backgroundColor:"#000",
        //旋转90度
        transform:[{rotate: "90deg"}],
        height:100,
        width:100,
    },
    pageStyle:{
        height:100,
        width:100,
        //旋转-90度
        transform:[{rotate: "-90deg"}]
    }
})

这里写图片描述

React之react-router-dom

阅读数 761

React Native react-native init fail

博文 来自: cfhgcvb
没有更多推荐了,返回首页