Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

时间：2023-12-23 18:33:37

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

简要：本系列文章讲会对expo进行全面的介绍，本人从2017年6月份接触expo以来，对expo的研究断断续续，一路走来将近10个月，废话不多说，接下来你看到内容，将全部来与官网

我猜去全部机翻+个人修改补充+demo测试的形式，对expo进行一次大补血！欢迎加入expo兴趣学习交流群：597732981

【之前我写过一些列关于expo和rn入门配置的东i西，大家可以点击这里查看：从零学习rn开发】

相关文章：

Expo大作战(一)--什么是expo，如何安装expo clinet和xde，xde如何使用

Expo大作战(二)--expo的生命周期，expo社区交流方式，expo学习必备资源，开发使用expo时关注的一些问题

Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等

Expo大作战(四)--快速用expo构建一个app，expo中的关键术语

Expo大作战(五)--expo中app.json 文件的配置信息

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

Expo大作战(七)--expo如何使用Genymotion模拟器

Expo大作战(八)--expo中的publish以及expo中的link，对link这块东西没有详细看，大家可以来和我交流

更多>>

接下来就开始撸码

开发模式

React Native包含一些非常有用的开发工具：Chrome中的远程JavaScript调试，实时重新加载，热重新加载以及类似于您在Chrome中使用的心爱的检查器的元素检查器。 例如，当您的应用程序运行时，它还会执行一系列验证，以便在您使用不推荐使用的属性时发出警告，或者忘记将必需的属性传递给组件。

运行中的开发模式截图

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

这需要付出代价：您的应用在开发模式下运行速度较慢。 你可以在XDE上打开和关闭它。 当您切换时，只需关闭并重新打开您的应用程序即可使更改生效。 每当您测试应用程序的性能时，请务必禁用开发模式。

在XDE中切换开发模式
切换开发模式

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

exp命令行界面 (exp Command-Line Interface)

除XDE之外，如果您喜欢在命令行上工作或想要在测试或持续集成（CI）中使用Expo，还需要CLI exp。

安装

运行npm install -g exp以全局安装exp。

如果您之前没有使用exp或XDE，您需要做的第一件事就是使用exp login登录您的博客账户。

命令

使用exp --help查看命令列表：

用法：exp [options] [command]

选项：

  -V，--version输出版本号

  -o，--output [格式]输出格式。漂亮（默认），原始

  -h，--help输出使用信息

命令：

  android [options] [project-dir]在连接的Android设备上的Expo上打开您的应用程序

  构建：ios | bi [options] [project-dir]为您的项目构建独立的IPA，签名并准备好提交给Apple App Store。

  build：android | ba [options] [project-dir]为您的项目构建一个独立的APK，并已准备好提交给Google Play商店。

  build：status | bs [options] [project-dir]获取项目当前（或最近完成的）构建的状态。

  convert | onentize [options] [project-dir]在现有的React Native项目中初始化Expo项目文件

  detach [options] [project-dir]为您的应用程序创建Xcode和Android Studio项目。如果您需要添加自定义本地功能，请使用此功能。

  诊断[选项] [项目目录]上传诊断信息并返回一个网址与世博团队分享。

  医生[选项] [项目目录]诊断您的世博项目的问题。

  获取：ios：certs [options] [project-dir]获取此项目的iOS证书。写入PROJECT_DIR / PROJECT_NAME_（dist | push）.p12并将密码输出到标准输出。

  fetch：android：keystore [options] [project-dir]获取这个项目的Android密钥仓库。将密钥库写入PROJECT_DIR / PROJECT_NAME.jks并将密码输出到stdout。

  init | i [options] [project-dir]使用示例项目初始化目录。运行它没有任何选项，你会被提示输入名称和类型。

  安装：ios [选项]在模拟器上安装最新版本的Expo Client for iOS

  安装：android [options]在连接的设备或模拟器上安装适用于Android的Expo Client的最新版本

  ios [options] [project-dir]在计算机上的iOS模拟器中打开您的应用程序

  登录|登录[选项]登录世博会

  注销[选项]从exp.host注销

  path [options]为XDE设置P​​ATH

  prepare-detached-build [options] [project-dir]准备一个分离的项目进行构建

  发布：历史| ph [options] [project-dir]查看已发布版本的日志。

  发布：详细信息| pd [options] [project-dir]查看发布版本的详细信息。

  发布：set | ps [options] [project-dir]设置从指定频道投放的发布版本。

  发布：rollback | pr [options] [project-dir]回滚频道的更新。

  发布| p [options] [project-dir]将您的项目发布到exp.host

  注册[选项]注册一个新的世博会帐户

  发送[options] [project-dir]将项目链接发送到电话号码或电子邮件地址

  start | r [options] [project-dir]为您的应用程序启动或重新启动本地服务器并为您提供一个URL

  url | u [options] [project-dir]显示可用于在Expo中查看项目的URL

  whoami | w [options]检查服务器，然后说出你是谁登录的
通过传递--help标志来查看有关特定命令的其他信息。例如，exp start --help输出：

用法：start | r [options] [project-dir]

为您的应用启动或重新启动本地服务器，并为您提供一个URL

选项：

  -s， - 发送到[dest]发送链接到的电话号码或电子邮件地址

  -c，--clear清除React Native打包程序缓存

  -a，--android在已连接的Android设备上的Expo上打开您的应用程序

  -i，--ios在计算机上的当前正在运行的iOS模拟器中打开您的应用程序

  -m，--host [mode]隧道（默认），lan，localhost。要使用的主机类型。 “隧道”允许您查看其他网络上的链接

  -p，--protocol [mode] exp（默认），http，重定向。协议类型。现在推荐“exp”

  --tunnel与--host隧道相同

  --lan和--host lan相同

  --localhost与--host localhost相同

  --dev打开dev标志

  --no-dev关闭dev标志

   - 严格打开严格的标志

  --no-strict关闭严格标志

  --minify打开迷你（Turns minify flag on）

　　--no-minify关闭缩小标志
   --exp与--protocol exp相同
   --http与--protocol http相同
   - 重定向与 - 协议重定向相同
   - 非交互式如果需要继续交互式提示，则失败。
   --offline允许此命令在离线状态下运行
   -h，--help输出使用信息

此外，通过将--offline标志传递给android，ios或start命令，您可以在脱机模式下运行。

查看日志

在expo应用程序中写入日志就像在浏览器中一样：使用console.log，console.warn和console.error。 注意：我们目前不支持远程调试模式之外的console.table。

推荐：使用Expo工具查看日志
当您打开一个从XDE或exp服务的应用程序时，该应用程序会将日志发送到服务器，并使它们便于您使用。 这意味着您甚至不需要将设备连接到计算机即可查看日志 - 事实上，如果有人从世界另一端打开应用程序，您仍然可以从设备中看到应用程序的日志。

XDE日志窗格
当你在XDE中打开一个项目时，日志窗口被分成两部分。 您的应用程序日志显示在右侧，打包程序日志显示在左侧。

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

XDE还允许您在打开应用程序的任何设备的日志之间切换。

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

用exp查看日志

如果您使用我们的命令行工具exp，则只要您的项目正在运行，打包程序日志和应用程序日志都将自动进行流式传输。要停止您的项目（并结束日志流），请使用ctrl + C结束进程。

可选：手动访问设备日志

虽然通常没有必要，但如果您希望查看设备上发生的所有事件的日志，甚至可以查看其他应用程序的日志和操作系统本身，则可以使用以下其中一种方法。

查看iOS模拟器的日志

选项1：使用GUI日志

在模拟器中，按⌘+ /或进入调试 - >打开系统日志 - 这两个都会打开一个日志窗口，显示设备中的所有日志，包括expo应用程序中的日志。

选项2：在终端中打开它

运行 instruments -s devices

找到您正在使用的模拟器的设备/操作系统版本，例如：iPhone 6s（9.2）[5083E2F9-29B4-421C-BDB5-893952F2B780]

最后括号中的部分是设备代码，因此您现在可以执行此操作：tail -f〜/ Library / Logs / CoreSimulator / DEVICE_CODE / system.log，例如：tail -f〜/ Library / Logs / CoreSimulator / 5083E2F9-29B4-421C-BDB5-893952F2B780 / SYSTEM.LOG

查看您的iPhone的日志

brew install libimobiledevice

插入手机(Plug your phone in)

idevicepair pair

按设备上的接受(Press accept on your device)

运行 idevicesyslog

从Android设备或模拟器查看日志

确保安装了Android SDK

确保您的设备上启用了USB调试（不需要仿真器）。

运行 adb logcat

调试

使用模拟器/仿真器

在实际设备上测试应用程序的性能和感觉是无可替代的，但在调试时，使用仿真器/模拟器可能会更容易一些。

苹果公司将他们的模拟器称为“模拟器”，谷歌将他们的模拟器称为“仿真机”。

iOS版

确保你有最新的Xcode（例如从Mac App Store）。这包括iOS模拟器和其他几种工具。

Android的
在Android上，我们推荐通过标准仿真器使用Genymotion仿真器 - 我们发现它的功能更加完备，更快，更易于使用。（咱们可以用夜神）

下载Genymotion（免费版）并按照Genymotion安装指南。安装Genymotion后，创建一个虚拟设备 - 我们推荐使用Nexus 5，Android版本由您决定。准备好后启动虚拟设备。如果遇到任何问题，请按照我们的Genymotion指南进行操作。

开发者菜单

该菜单可让您访问几个对调试有用的功能。它也被称为调试菜单。调用它取决于您运行应用程序的设备。

  • 在iOS设备上

摇动设备一下。

  • 在iOS模拟器上

在模拟器的Mac上按Ctrl-Cmd-Z模拟摇动手势，或按Cmd + D。

  • Genymotion

按Genymotion工具栏中的“Menu”按钮，或者按Cmd-m。

  • 调试Javascript

您可以使用Chrome调试器工具调试Expo应用程序。而不是在手机上运行应用程序的JavaScript，而是在Chrome中的webworker中运行它。然后，您可以像调试Web应用程序时那样设置断点，检查变量，执行代码等。

为确保最佳的调试体验，请首先将您的主机类型更改为LAN或localhost。如果您在启用了调试功能的情况下使用Tunnel，则可能会遇到如此之多的延迟以致您的应用无法使用。在这里，还要确保检查开发模式。

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

  • 调试主机

如果您使用的是LAN，请确保您的设备与您的开发机器在同一个WiFi网络上。这可能不适用于某些公共网络。 localhost不适用于iOS，除非您在模拟器中，并且只有当您的设备通过USB连接到您的机器时，才能在Android上运行。

在设备上打开应用程序，显示开发人员菜单，然后点击Debug JS Remotely。这应该打开一个Chrome选项卡，其URL为http：// localhost：19001 / debugger-ui。从那里，您可以设置断点并通过JavaScript控制台进行交互。完成后，摇动设备并停止Chrome调试。

使用Chrome调试时，console.log语句的行号在默认情况下不起作用。要获得正确的行号，请打开Chrome开发工具设置，转到“Blackboxing”选项卡，确保选中“Blackbox内容脚本”，并将expo / src / Logs.js添加为选中“Blackbox”的模式。

解决localhost调试问题

当您在XDE中打开一个项目并且当您按下Android上的打开时，只要您的设备已插入或模拟器正在运行，XDE就会自动告诉您的设备将localhost：19000和19001转发到您的开发计算机。如果您正在使用localhost进行调试并且无法正常工作，请关闭该应用并使用Android上的Open重新打开该应用。或者，如果您安装了Android开发人员工具，则可以使用以下命令手动转发端口：adb reverse tcp：19000 tcp：19000 - adb reverse tcp：19001 tcp：19001

源地图和异步函数

源地图和异步函数不是100％可靠的。在任何情况下，React Native在Chrome的源代码映射方面都表现不佳，所以如果你想确保你在正确的地方突破位置，你应该直接从代码中使用调试器调用。

调试HTTP

要调试您的应用程序的HTTP请求，您应该使用代理。以下选项将全部起作用：

在Android上，代理设置应用程序有助于在调试和非调试模式之间切换。不幸的是，它不适用于Android M。

未来的工作是在Chrome DevTools中显示网络请求。（There is future work to get network requests showing up in Chrome DevTools.）

热重新加载和实时重新加载

热模块重新加载（热跟新）是一种快速重新加载更改的方式，不会丢失屏幕或导航堆栈中的状态。要启用，调用开发人员菜单并点击“启用热重新加载”项目。尽管Live Reload会重新加载整个JS上下文，但Hot Module Reloading会使您的调试周期更快。但是，请确保您没有打开这两个选项，因为这是不受支持的行为。

下一张继续介绍，这一篇主要介绍了：expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式,欢迎大家关注我的微信公众号，这篇文章是否被大家认可，我的衡量标准就是公

众号粉丝增长人数。欢迎大家转载，但必须保留本人博客链接！

Expo大作战(六)--expo开发模式，expo中exp命令行工具，expo中如何查看日志log，expo中的调试方式

相关文章