2018年1月26日

免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用

免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用

Wayne Fu 0 A+
macos-simulator-xocde-debug-iphone-ipad.jpg-免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用之前這篇「利用 Chrome 對 iOS 裝置進行除錯」可以讓開發人員很方便地對 iPhone、iPad 等裝置進行偵錯,不過並非所有前端開發者都有辦法買齊各種昂貴的蘋果裝置來測試,因此本篇將會介紹一個比較省錢的解決方案。

雖然不用花錢,不過必須花時間跑模擬器,電腦的 CPU 要夠強,記憶體要夠多,否則模擬器會很卡。

MacOS 官方提供了一個強大的開發工具 Xcode,可以很正確地模擬 iPhone、iPad 的使用環境。我經過實測後發現,一些 iOS 才會發生的網頁錯誤,Xcode 是真的可以模擬出來的。

這樣子的錯誤,光是使用 Chrome 開發人員工具模擬不出來,那麼以下就來看看如何在 Windows 下藉著模擬器執行 Xcode 進行除錯。

(圖片出處: apple.com)


一、WMware 模擬器


  • 首先假設讀者的硬體設備都準備妥當了,否則請放棄這個方案。
  • 請詳讀「Windows 用 VMware Player 模擬 MAC OS X 心得」內容
    • 從「三、準備相關工具」下載及安裝好 WMware
    • 蘋果系統映像檔請想辦法取得
    • 如有 FB 帳號可免費加入本站會員,看到隱藏內容連結

按照以上流程處理完後,很重要的一點是記住你使用的蘋果系統版本,例如「Yosemite 10.10」,之後會用到。



二、下載 Xcode


1. Xcode 版本

如果 MacOS 版本很新,Xcode 可在 App Store 自動下載對應的版本。

否則的話,不同的 MacOS 版本只能對應特定版本的 Xcode,可參考此資訊:


必須說這個表可以參考,但可能無法 100% 正確,例如我的版本 Yosemite 10.10,不過 Xcode 的版本一直下載、不斷降版本,直到嘗試了 6.0.1 才能安裝。


2. 下載 Xcode

如果到蘋果官網下載,很難找到各種 Xcode 版本的連結頁面,通常只能找到最新版本。以下提供幾個連結,可不必這麼麻煩,請找自己需要的版本下載:


下載之前,先準備好自己的 Apple ID 帳號密碼,沒有的話先申請一個。



三、利用 Xcode 進行除錯


1. 打開模擬器

安裝完 Xcode 後,可參考這篇「沒舊版iOS測APP?仿真百分百iPhone模擬器」開啟 iOS 模擬器。

例如模擬 iPhone 後,點擊 iPhone 桌面上的 Safari 瀏覽器,進入要 Debug 的網址:

macos-simulator-xocde-debug-iphone-ipad-1.jpg-免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用


2. 開始除錯

接者開啟 VMware 模擬的 MacOS 系統中的 Safari 瀏覽器:

macos-simulator-xocde-debug-iphone-ipad-2.jpg-免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用

如上圖 Develop → iOS Simulator → Safari → 選擇開啟的網址


macos-simulator-xocde-debug-iphone-ipad-3.jpg-免 iPhone、iPad 開發人員就能進行除錯﹍MacOS 模擬器 + Xcode 妙用

接下來就能使用 Safari 對著 Xcode 模擬的 iPhone 進行偵錯了。

以上就是沒有任何實體蘋果裝置的開發人員處理方案,一時之間找不到機器除錯時,是個很好的備用方案。


更多 iOS 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

3 則留言:

  1. 感謝您的指引,我順利用VMware開啟了Mac OS

    有幾件事情需要注意的
    1. 我用VirtualBox開啟VMDK,但是失敗了。還是得要用VMware才行。
    2. 如果VMware開啟Mac OS時一直停留在開機畫面,無法進入桌面的話,那就是Unlocker沒有裝好。確認Unlocker正確安裝後,就能順利進入桌面。
    3. 如果Mac OS的版本太舊,iOS Simulator就只能模擬舊裝置。舊裝置不支援一些較新的JavaScript語法,例如let或箭頭函數。
    但我們修改vmx檔案,將虛擬機器設定為較新的硬體,這樣就能下載新的Mac OS版本
    https://techsviewer.com/how-to-upgrade-macos-catalina-in-virtual-machine-to-the-latest-version/
    4. 即使更新了Mac OS,我還是不能從App Store下載Xcode。還是要另外直接下載才行:
    https://stackoverflow.com/questions/10335747/how-to-download-xcode-dmg-or-xip-file
    5. 目前我更新到Mac OS 10.15.2,安裝對應版本的Xcode之後,可以順利模擬iPhone 11等較新的裝置。但是Xcode的開發功能有變更,我現在找不到怎麽開啟Web Inspector,仍在研究中。

    回覆刪除
    回覆
    1. 謝謝您的補充
      每次有 apple 平台要 debug 都很心累~~ XD

      刪除
    2. 補充一下:

      在模擬器裡面用iPhone測試的時候,我發現還是有些地方跟實機iPhone操作的結果還是不一樣
      似乎是ontouch事件跟onclick事件之間的順序之類的問題,我沒有仔細釐清

      因為模擬器跟實機差異的地方不少,我試了一陣子之後就放棄模擬器了 QAQ

      說好的HTML5跨平臺呢orz

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP