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中的調試方式,歡迎你們關注個人微信公衆號，這篇文章是否被你們承認，個人衡量標準就是公

衆號粉絲增加人數。歡迎你們轉載，但必須保留本人博客連接！