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中使用的心爱的检查器的元素检查器。 例如，当您的应用程序运行时，它还会执行一系列验证，以便在您使用不推荐使用的属性时发出警告，或者忘记将必需的属性传递给组件。

运行中的开发模式截图

 

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

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

 

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中打开一个项目时，日志窗口被分红两部分。 您的应用程序日志显示在右侧，打包程序日志显示在左侧。

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

用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，则可能会遇到如此之多的延迟以至您的应用没法使用。在这里，还要确保检查开发模式。

•  调试主机

若是您使用的是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请求，您应该使用代理。如下选项将所有起做用：

• Charles Proxy ($50 USD, our preferred tool)

• mitmproxy

• Fiddler

在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中的调试方式,欢迎你们关注个人微信公众号，这篇文章是否被你们承认，个人衡量标准就是公

众号粉丝增加人数。欢迎你们转载，但必须保留本人博客连接！