《React Native移动开发实战》一一2.5 如何调试React Native项目

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.5节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.5 如何调试React Native项目
在实际开发中,还有一个影响开发效率的重要因素,即调试。
在1.4.3节中已经介绍了Enable Live Debugger的使用。本节来介绍另一个非常重要的调试选项Debug JS Remotely选项。
(1)晃动设备或使用模拟器上的快捷键(iOS模拟器快捷键command + D,Android模拟器快捷键command + M)打开调试选项,效果如图2.15所示。
image

图2.15 React Native调试选项
(2)单击Debug JS Remotely选项。此时,React Native会自动打开Chrome浏览器作为调试工具。
(3)按照如图2.16所示的顺序操作,就进入了React Native应用的调试状态。
image

图2.16 使用Chrome浏览器调试React Native应用
(4)在调试状态下,单击index.ios.js文件第12行的行数来添加一个断点,如图2.17所示。
问题:软件开发中的断点是什么?
回答:断点(Breakpoint)是调试器的功能之一,调试时设定断点可以让程序执行到该行程序时停住,借此观察程序到断点位置时,其变量、暂存器、I/O等相关的变数内容,有助于深入了解程序运作的机制,发现、排除程序错误。
image

图2.17 React Native调试时添加断点
(5)最后,重新加载运行的应用(iOS模拟器快捷键command + R,Android模拟器快捷键R + R)。此时,应用运行到刚才添加断点的第12行时就停止了,如图2.18所示。
image

图2.18 React Native调试时在断点处暂停运行
此时,可以在右侧的调试区域查看这些信息:当前应用执行的线程状态(Threads)、变量值、调用栈(Call Stack)等信息。而且,还可以使用调试区域上方的指令来实现单步执行、跳过执行、继续执行等调试操作,如图2.19所示。
调试技巧和经验是需要在开发过程中不断积累的,读者在掌握了这些基本用法之后,可以通过后面的例子不断练习,积累开发经验,提高自己的调试能力和开发效率。

相关文章
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
236 2
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
456 0
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
前端开发 JavaScript 测试技术
React 时间选择器 Time Picker:常见问题与调试指南
本文介绍了在使用 React 时间选择器时常见的问题及解决方案,包括时间格式不匹配、时区问题、禁用时间范围和自定义样式等。通过代码案例详细解释了如何避免这些问题,强调了阅读文档、类型检查、单元测试和调试技巧的重要性。
344 7
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
289 2
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
506 2
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
169 11
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
819 2
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
593 1